onlyMobilePro

Relative Layout, much like other XML layout, Relative Layout is one of the common types of layout used by many Android Developers. The Relative Layout is an Android’s XML layout that displays child views in relative positions, which means that the position of an element / view such as ImageView can be placed on top, below, left or right of its parent or sibling views.

Working With Relative Layout

Ok, let’s say we want to design something that look like this using Relative Layout:

Here is how the XML code should be look like:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    
     <TextView
        android:id="@+id/TextView01" 
        android:background="#0b62b3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:padding="25dp"
        android:text="@string/topContent"
        android:textColor="#fff" 
        tools:context=".MainActivity" />

    <TextView
        android:id="@+id/TextView02" 
        android:background="#0b62b3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@+id/TextView03"
        android:padding="25dp"
        android:text="@string/first"
        android:textColor="#fff"  />
    
    <TextView  
        android:id="@+id/TextView03" 
        android:background="#f00"  
        android:layout_height="wrap_content"  
        android:layout_width="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" 
        android:padding="25dp"
        android:text="@string/second"  
        android:textColor="#000" />
    
    <TextView
        android:id="@+id/TextView04" 
        android:background="#0b62b3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/TextView03"
        android:padding="25dp"
        android:text="@string/third"
        android:textColor="#fff" />
    
    <TextView
        android:id="@+id/TextView05" 
        android:background="#0b62b3" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:padding="25dp"
        android:text="@string/bottomContent"
        android:textColor="#fff" />

</RelativeLayout>

Explanation

• The top content text view with “@+id/TextView01″ is aligned center horizontally within the parent.
  Note:By default, all views are drawn at the top-left of the screen.
• The second row of content “1st” text view is aligned center vertically, and positioned this view to the left of the given anchor view ID. In this case, the given anchor view ID is @+id/TextView03, which positioned center on the layout.
• The “2nd” text view is aligned center vertically and horizontally.
• The “3rd” text view is aligned to the left of “2nd” text view.
• Lastly, the bottom content text view is aligned center and positioned at the bottom of the parent.

Some of the layout properties that we using in this tutorial are:

• android:layout_centerHorizontal: If true, centers this child horizontally within its parent.
• android:layout_centerVertical: If true, centers this child vertically within its parent.
• android:layout_toLeftOf: Positions the right edge of this view to the left of the given anchor view ID.
• android:layout_toRightOf: Positions the left edge of this view to the right of the given anchor view ID.
• android:layout_alignParentBottom: If true, makes the bottom edge of this view match the bottom edge of the parent.

If you want to learn more about layout properties of Relative Layout, please visit Android Relative Layout Parameter Page.

Previous Post Next Post