Relative Layout is an android view group to align all childrens relative to other view or its parent. Relative layout give you flexibiliy to place childs wherever you want. In the previous example, I have give some basic example of Relative Layout. Now, I will give you how to create a more complex relative layout example.
Our goal is to create layout like this:
See the following step by step to create above layout:
1. Aligning child to top left of parent
Actually, by default every childs is aligned to top left of parent in relative layout. So we needn’t add any special attribute to align chilc in top left of parent. But you can align child to top left of parent by adding [cci]android:layout_alignParentLeft=”true”[/cci] and [cci]android:layout_alignParentTop=”true”[/cci] attributes.
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
2. Aligning child in top right of parent
To align child in top right of parent, add the following attributes [cci]android:layout_alignParentRight=”true”[/cci] and [cci]android:layout_alignParentTop=”true”[/cci].
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
3. Aligning child in bottom left of parent
To align child in bottom left of parent, add the following attributes [cci]android:layout_alignParentBottom=”true”[/cci] and [cci]android:layout_alignParentLeft=”true”[/cci].
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
4. Aligning child in bottom right of parent
To align child in bottom right of parent, add the following attributes [cci]android:layout_alignParentBottom=”true”[/cci] and [cci]android:layout_alignParentRight=”true”[/cci].
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" />
5. Align child in the center of parent
This is our center child and you must give it an [cci]id[/cci] as our other 4 childs aligned relative this child. To align a child center of the parent, add the following attribute [cci]android:layout_centerInParent=”true”[/cci]. This attribute will align our child center to the parent, vertically and horizontally.
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button5"
android:layout_centerInParent="true"/>
6. Align child in top left of the center child
To align child in top left of the center child, add the following attributes [cci]android:layout_toLeftOf=”@id/button5″[/cci] and [cci]android:layout_above=”@id/button5″[/cci].
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toLeftOf="@id/button5"
android:layout_above="@id/button5"/>
7. Align child in top right of the center child
To align child in top right of the center child, add the following attributes [cci]android:layout_toRightOf=”@id/button5″[/cci] and [cci]android:layout_above=”@id/button5″[/cci].
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toRightOf="@id/button5"
android:layout_above="@id/button5"/>
8. Align child in bottom right of the center child
To align child in bottom right of the center child, add the following attributes [cci]android:layout_toRightOf=”@id/button5″[/cci] and [cci]android:layout_below=”@id/button5″[/cci].
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toRightOf="@id/button5"
android:layout_below="@id/button5"/>
9. Align child in bottom left of the center child
To align child in bottom left of the center child, add the following attributes [cci]android:layout_toLeftOf=”@id/button5″[/cci] and [cci]android:layout_below=”@id/button5″[/cci].
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toLeftOf="@id/button5"
android:layout_below="@id/button5"/>
Final Source Codes
Below is the final source codes:
<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" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button2"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button3"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button4"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button5"
android:layout_centerInParent="true"/>
<Button
android:id="@+id/button6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button6"
android:layout_toLeftOf="@id/button5"
android:layout_above="@id/button5"/>
<Button
android:id="@+id/button7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button7"
android:layout_toRightOf="@id/button5"
android:layout_above="@id/button5"/>
<Button
android:id="@+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button8"
android:layout_toRightOf="@id/button5"
android:layout_below="@id/button5"/>
<Button
android:id="@+id/button9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button9"
android:layout_toLeftOf="@id/button5"
android:layout_below="@id/button5"/>
</RelativeLayout>
