Multiple Layouts and Views to design a GUI

As we studied about different Views and ViewGroups and Layouts in the previous tutorials and now it’s time to study how to use all of them together in our android project to design great user interfaces. So In this tutorial, we are going to learn how we can put different layouts and views and view groups inside another layout(hierarchical arrangement) to design the perfect GUI for your android application.

Defining the design in layout XML file


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFF59D"
 >
    <!--Light Yellow Color-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/l1"
        android:background="#FF9E80">
        <!--Light Pink Color-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello"
            android:textAllCaps="true"
            android:textSize="40dp"
            android:textColor="#F44336"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android"
            android:textAllCaps="true"
            android:textSize="40dp"
            android:textColor="#F44336"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/l1"
        android:background="#039BE5"
        android:id="@+id/l2">
        <!--Light Blue Color-->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello"
            android:textAllCaps="true"
            android:textSize="30dp"
            android:textColor="#76FF03"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android"
            android:textAllCaps="true"
            android:textSize="30dp"
            android:textColor="#76FF03"
            />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/l2"
        android:background="#7E57C2"
        >
        <!--Light Purple Color-->

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Toast 1"
            android:id="@+id/b1"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Toast 2"
            android:layout_toRightOf="@id/b1"
            android:id="@+id/b2"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Toast 3"
            android:layout_below="@id/b1"
            android:id="@+id/b3"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Toast 4"
            android:layout_below="@id/b2"
            android:layout_toRightOf="@id/b3"
            />

    </RelativeLayout>

</RelativeLayout>

In the Screen design above have a root element which is RelativeLayout. Which means that all its children and whether it is layouts or views will be arranged in a relative fashion. So, it we have to use is very important to choose our root layout carefully.
Next, we have to use Linear Layout, whose orientation is set to vertical. This means that all the elements inside this Linear Layout will be arranged in a vertical fashion.
Next, we have used another Linear Layout, whose orientation is set to horizontal. so, as you can see, we can have different layouts placed inside a root layout.
Next, we have used another Relative Layout placed inside the root Relative Layout and the Relative Layout has 4 buttons inside it, arranged in a relative fashion to each other.
All these layouts are placed inside a Relative Layout, So all these layouts are relative to each other.

Android provides a very structured way of designing the user interface or screen designing and that we have to understand how to use various layouts and views or view groups and go ahead design some great UI screens for your app.

Learn Android

Multiple Layouts and Views to design a GUI