Relative Layout
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Relative Layout


Relative layout Android Example


Relative Layout is a flexible layout it's used in android for custom layout design. It gives us

  • flexibility to position component/view
  • sibling component’s position
  • .It allows us to position the component anywhere so it's most flexible layout. For the same reason Relative layout is the most used layout after Linear Layout in Android. It allow its child view to position relative to each other or relative to the container or another container.

    In Relative Layout, you can use “above, below, left and right” to arrange the component’s position in relation to other component. For example, in the below image you can see content is placed in related to Heading.

    Relative Layout Android
    Android can drag and drop system to put one component in related to other inside relative layout. But actually in the background lots of XML properties are working which does this task. So Android developer can design UI either using drag & drop or using XML code. Professional developer uses both for designing UI.



    Attributes of Relative layout:

      1.Alingbottom

    alignBottom is used to makes the bottom edge of the view match the bottom edge of the given anchor view ID and it must be a reference to another resource, in the form of id. Example: android:layout_ alignBottom =”@+id/button1?

    In the below example we have aligned a view with id textView2 Bottom of another view with id textView. Below is the coded and layout image.

    <!-- textView2 alignBottom of textView -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView2"
        android:layout_alignBottom="@+id/textView"
        android:text="Text2 alignBottom of Text1"
        android:layout_marginBottom="90dp"
    />

    alignBottom in Android using TextView


      2.above:

    Position the bottom edge of the view above the given anchor view ID , android:layout_above=”@+id/textView .

    For example, suppose a view with id textview2 is what we want to place above another view with id textview.Simple is the code and layout image.

    <!-- textView2 is placed above textView-->
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Text2"
            android:id="@+id/textView2"
            android:layout_above="@+id/textView"
            android:layout_marginBottom="100dp"
            android:layout_centerHorizontal="true"/>
    

    above attribute Android



    Relative Layout Examples Code:

    Android Studio using Relative Layout. Below is the final output:

    Relative Layout  Example Output
    <?xml version="1.0" encoding="utf-8"?>
    
    <!--Relative Layout Is Used-->
    
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <!--Text View for Displaying SIGN IN Text At Top of UI-->
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="SIGN IN"
            android:id="@+id/textView3"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />
    
        <!--Text View for Displaying Username-->
    
        <TextView
            android:id="@+id/userName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginTop="110dp"
            android:text="UserName:"
            android:textColor="#000000"
            android:textSize="20sp" />
    
        <!--Text View for Displaying Password-->
    
        <TextView
            android:id="@+id/password"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/userName"
            android:layout_margin="@dimen/activity_horizontal_margin"
            android:text="Password:"
            android:textColor="#000000"
            android:textSize="20sp" />
    
        <!--Edit Text for Filling Username-->
    
        <EditText
            android:id="@+id/edt_userName"
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:layout_marginLeft="@dimen/activity_horizontal_margin"
            android:layout_marginTop="100dp"
            android:layout_toRightOf="@+id/userName"
            android:hint="User Name" />
    
        <!--Edit Text for Filling Password-->
    
        <EditText
            android:layout_width="fill_parent"
            android:layout_height="40dp"
            android:layout_below="@+id/edt_userName"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/password"
            android:hint="Password" />
    
        <!--Button for Clicking after filling details-->
    
        <Button
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/password"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="20dp"
            android:background="#03B424"
            android:text="Login"
            android:textColor="#ffffff"
            android:textStyle="bold" />
    
    
    </RelativeLayout>

    3.centerHorizontal: If centerHorizontal property is true, makes the view horizontally center. The value of centerHorizontal is either true or false.Example: android:layout_centerHorizontal=”true”.

    Below is the example code of centerHorizontal property and also layout image.

    <!-- centerHorizontal example -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text1 center Horizontal"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"
        android:textColor="#000"
    />

    CH Android Relative Layout
    4.centerVertical: If centerVertical property is true, make the view vertically center. The value of align parent bottom is either true or false. Example: android:layout_centerVertical=”true”.

    Below is the example code of centerVertical property and also layout image.

    <!-- centerVertical example -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text1 center vertical"
        android:layout_centerVertical="true"
        android:textSize="20sp"
        android:textColor="#000"
    />

    CV in Android Relative Layout


    5.alignParentTop: If alignParentTop is true, then it makes the top edge of this view match the top edge of the parent. The value of align parent Top is either true or false. Example: android:layout_alignParenTop=”true”.

    Important Note: alignParentTop and alignTop are two different properties, In alignTop we give the reference of another view in the form of id that the view is aligned to the top of the referenced view but in alignParentTop the top edge of the view matches the top edge of the parent(RelativeLayout).

    Below is the example code of alignParentTop property and also layout image.

    <!-- alignParentTop example -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text1 align parent top"
        android:layout_alignParentTop="true"
        android:layout_margin="20dp"
        android:textSize="20sp"
        android:textColor="#000"/>

    ATOP in Android Relative Layout
    6.centerInParent: If center in parent is true, makes the view in the center of the screen vertically and horizontally. The value of center in parent is either true or false. Example: android:layout_centerInParent=”true”.

    Below is the example code of centerInParent property and also layout image.

    <!-- centerInParent example -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text1 center in parent"
        android:layout_centerInParent="true"
        android:textSize="20sp"
        android:textColor="#000"
    />

    CTOP in parent Android Relative Layout

    7. alignLeft: alignLeft is used to make the left edge of the view match the left edge of the given anchor view ID and must be a reference to another resource, in the form of Example: android:layout_ alignLeft =”@+id/button1?.

    Below is the code and layout image in which we have aligned a view with id textView2 left of another view with id textView.

    <!-- textView2 alignLeft of textView -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView2"
        android:layout_alignLeft="@+id/textView"
        android:text="Text2 alignLeft of Text1"
        android:layout_below="@+id/textView"
        android:layout_marginTop="20dp"/>

    AL in Android Relative Layout Example
    8. alignRight: alignRight property is used to make the right edge of this view match the right edge of the given anchor view ID and must be a reference to another resource, in the form like this example: android:layout_alignRight=”@+id/button1?

    Below is the code and layout image in which we have aligned a view with id textView2 right of another view with id textView.

    <!-- textView2 alignRight of textView-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView2"
        android:layout_alignRight="@+id/textView"
        android:text="Text2 alignRight of Text1"
        android:layout_below="@+id/textView"
        android:layout_marginTop="20dp"/>

    AR in Android Relative Layout Example
    9.alignStart: alignStart property is used to makes the start edge of this view match the start edge of the given anchor view ID and must be a reference to another resource, in the form of like this example: android:layout_alignStart=”@+id/button1?

    Below is the alignStart code and layout image in which we have aligned a view with id textView2 start of another view with id textView.

    <!-- Text2 alignStart-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/textView2"
        android:text="Text2 align start of Text1"
        android:layout_alignStart="@+id/textView"
     />

    alignStart in Relative Layout Android Example