Working with Relative Layout

Relative Layout

It is compound and complex compared to Linear Layout. In Linear Layout, the views fall in place horizontally or vertically but it is not the same in Relative Layout. If you don't put some "functions" in place, your views will just lie on top each other.

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

<TextView

        android:id="@+id/donald"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Donald"
        android:textSize="30sp" />
    <TextView

        android:id="@+id/soo_yii"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/donald"
        android:text="Soo Yii"
        android:textSize="30sp" />
    <TextView

        android:id="@+id/tunde"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/soo_yii"
        android:text="Tunde"
        android:textSize="30sp" />
    <TextView

        android:id="@+id/ben"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tunde"
        android:text="Ben"
        android:textSize="30sp" />
    <TextView

        android:id="@+id/alice"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ben"
        android:text="Alice"
        android:textSize="30sp" />

</RelativeLayout>

To set text or image or button below any other view, you will use android:layout_below="@id/top"

Working with IDs

You and I were given different names so that we can be easily identified. So, to identify views, we assign ids to them.

To assign an id to a view

android:id="@+id/button"

Referencing a view

To reference an ImageView with id (image) in XML,

android:layout_below="@id/image".

To set a text to the right side of another text. Given that the first text's id is text1.

android:layout_toRightOf="text1"

To set a text to the left side of another text. Given that the first text's id is text1.

android:layout_toLeftOf="text1"

To set a text above another text. Given that the first text's id is text1.

android:layout_above="text1"

To set a text below another text. Given that the first text's id is text1.

android: layout_below="text1".

Another interesting thing about Relative Layout is that you can align views to the parent view group (e.g RelativeLayout).

To align a button to the parent bottom, android:layout_alignParentBottom="true"

To align a button to the top of a parent, android:layout_alignParentTop="true"

To align a button to the left of a parent, android:layout_alignParentLeft="true"

To align a button to the right of a parent, android:layout_alignParentRight="true"

To align a button to the center of a parent, android:layout_centerInParent="true"