Using multiple Layouts and Views to design a GUI

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

We have a very basic example below to demonstrate how we can use multiple layouts, views and viewgroups together.

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"
    tools:context="com.example.android.myapplication.MainActivity">
    <!--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="Studytonight"
            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="Studytonight"
            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 UI design above, we have a root element which is RelativeLayout. This means that all its children, whether it is layouts or views will be arranged in a relative fashion. Thus, it is very important to choose our root layout carefully.
• Next, we have a 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 another Linear Layout, whose orientation is set to horizontal. Thus, as you can see, we can have different layouts placed inside a root layout.
• Next, we have another Relative Layout placed inside the root Relative Layout. This Relative Layout has 4 buttons inside it, arranged in a relative fashion to each other.
• Remember, all these layouts are placed inside a Relative Layout. Thus, all these layouts are relative to each other.

Android provides a very structured and extensible way of designing the user interface. Now that you have understood how to use various layouts, views and viewgroups, go ahead design great some great UI screens for your app.