Layouts in Android

Introduction

 

In this article, we will learn about Layouts in Android with Android Studio and different types of layouts with example programs.

 

Layouts in Android Studio

 

In Android Studio, Layouts is the term used to describe the user interface that contains the UI controls or widgets that would display on an android device or operation screen. Layout specifies the various widgets to be used in the UI and the relationships between such widgets and their containers. 

 

Layout files are stored in "res-> layout" in the Android application. When we open the resource of the application we find the layout files of the Android application. We can create layouts in the XML file or in the Java file programmatically.

  

Step 1

 

First, we will create a new Android Studio project named "Layouts Example". Android Studio will create two files in the project MainActivity.java and activity_main.xml. The activity_main.xml file is the layout file of the project.

 

Step 2

 

Now we will update the activity_main.xml file of the project. The code of this file is listed below.

<?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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Android Layouts Example"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view"
        android:layout_margin="10dp"
        android:layout_marginTop="20dp"
        android:background="@color/colorAccent"
        android:padding="10dp"
        android:text="Button"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp" />

</RelativeLayout>

Explanation

 

In this activity_main.xml file, we use RelativeLayout. In this layout example, we create TextView and Button. In TextView as attributes, we use Id for the identification, width, and height set as "wrap_content", we set text as the "Android Layouts Example" color attribute for setting the color of the text and we use the size of the text as 20sp.

 

In the Button, we use id for the identification, width as "match_parent" and height as "wrap_content", we set the margin between the TextView and Button, and we set the background of the Button, we set the name of the button as "Button" and size of textSize is 20sp. We set the button below to the TextView.

 

Step 3

 

When our layout is ready, we will load the layout resource layout file in our application code. Now we will see the MainActivity.java file of our project. Here is the code of the file.

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Explanation

 

This is the code of the MainActivity.java file of our project. Now we will run our project.

 

Step 4

 

Let's see the output of the project.

 

 

View

 

The View is the basic building block for the user interface. The view is created from the View Class and occupies a rectangular area on the screen. View is also responsible for drawing and event handling. It is the base class for widgets which are used to create interactive User Interface components like button, text fields, etc.

 

ViewGroup

 

A ViewGroup is a view that contains other views. It is a group of different views. The ViewGroup is the base class of layouts and contains views.

 

Types of Layouts in Android

 

Here is will be discussing some of the most commonly used layouts. We generally see the following layouts used while creating an Android Application:  

 

1. RelativeLayout in Android

 

Relative Layout arranges the views relative to other views. The views can be relative to its parent or other child views. Child views specify layout attributes to get aligned. Now let's see the image of the RelativeLayout.

 

 

Explanation

 

In this image, we saw that there is a screen. Inside the layout, we have four child layouts. These layouts are relatively connected to each other. At the top of the screen, we have a big layout and below to this attribute, there are two attributes that are small in the size from the layout of the top, and in the last of the screen, we have another layout as the same size of the first layout.

 

The complete code example of the RelativeLayout is listed below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginLeft="10dp"
    android:layout_marginTop="10dp"
    android:layout_marginRight="10dp"
    android:layout_marginBottom="10dp"
    android:layout_weight="1">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="10dp"
        android:padding="20dp"
        android:background="@color/colorAccent"
        android:text="Android Relative Layouts"
        android:textAlignment="center"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="35sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view"
        android:background="@color/colorPrimaryDark"
        android:layout_marginLeft="30dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="10dp"
        android:padding="20dp"
        android:text="Relative"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        android:textSize="30sp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/text_view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="50dp"
        android:layout_toRightOf="@id/text_view1"
        android:padding="20dp"
        android:background="@color/colorPrimaryDark"
        android:text="Layout"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        android:textSize="30sp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/text_view3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/text_view1"
        android:layout_centerInParent="true"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="50dp"
        android:background="@color/colorAccent"
        android:layout_marginRight="10dp"
        android:padding="20dp"
        android:text="Relative Layout Example"
        android:textAlignment="center"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="35sp"
        android:textStyle="bold" />

</RelativeLayout>

Explanation

 

In this layout example, We use RelativeLayout as the parent layout. In this layout example, we create four TextView and arrange them according to the image. We use different attributes of the text views for arranging the text views. 

 

Now we will run the application. Let's see the output of the project.

 

 

LinearLayout in Android

 

Linear Layout is the ViewGroup that aligns the child views as vertically and horizontally. Now let's see the image of the RelativeLayout.

 

 

 

Explanation

 

Among the above images, in the first image, we arrange the views horizontally and in the second image, we arrange the views vertically. 

 

The complete code example of LinearLayout is listed below.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/text_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/coloryellow"
        android:layout_margin="10dp"
        android:layout_marginTop="30dp"
        android:padding="20dp"
        android:text="Android Linear Layouts"
        android:textAlignment="center"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/text_view1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="@color/colorpink"
        android:padding="20dp"
        android:text="Linear"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        android:textSize="30sp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/text_view2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="20dp"
        android:background="@color/colorpurple"
        android:text="Layout"
        android:textAlignment="center"
        android:textColor="@color/colorAccent"
        android:textSize="30sp"
        android:textStyle="italic" />

    <TextView
        android:id="@+id/text_view3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="20dp"
        android:background="@color/coloryellow"
        android:text="Linear Layout Example"
        android:textAlignment="center"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

Explanation

 

In the above code example, we use LinearLayout as the parent layout and as the child views, we use four TextView and arrange them vertically. 

 

Now we will run our application. Let's see the output of the project.

 

 

TableLayout in Android

 

Table Layout is a view group that is used to arrange the views in the form of row and columns. We use <TableRow> for creating the rows in the table. Every Row can have 0 and more columns as the user requirement. Now let's see the image of the TableLayout.

 

 

Explanation

 

In the above image, we can see that there is a scre with some views. Inside the layout, we have four rows. In the first and second row, we have zero columns and in the third row, we create two columns. In the fourth row, we create three columns and in the last row, we create zero columns.

 

Note

 

In the table layout, the indexing of the columns started with 0. For example 0, 1,2,3.......etc.

 

The complete code example of TableLayout is listed below.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    android:orientation="vertical"
    android:stretchColumns="1">

    <TableRow android:padding="5dip">

        <TextView
            android:layout_height="wrap_content"
            android:layout_marginBottom="20dp"
            android:layout_span="2"
            android:gravity="center_horizontal"
            android:text="loginForm"
            android:textColor="#0ff"
            android:textSize="25sp"
            android:textStyle="bold" />
    </TableRow>

    <TableRow>

        <EditText
            android:id="@+id/userName"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_marginLeft="10dp"
            android:background="#fff"
            android:hint="userName"
            android:padding="5dp"
            android:textColor="#000" />

        <TextView
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_marginLeft="10dp"
            android:text="User Name"
            android:textColor="#fff"
            android:textSize="16sp" />
    </TableRow>

    <TableRow>

        <EditText
            android:id="@+id/password"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:background="#fff"
            android:hint="password"
            android:padding="5dp"
            android:textColor="#000" />

        <TextView
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:text="Password"
            android:textColor="#fff"
            android:textSize="16sp" />
    </TableRow>


    <TableRow android:layout_marginTop="20dp">

        <Button
            android:id="@+id/loginBtn"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_span="2"
            android:background="#0ff"
            android:text="login"
            android:textColor="#000"
            android:textSize="20sp"
            android:textStyle="bold" />
    </TableRow>
</TableLayout>

Explanation

 

In the above code example, we use TableLayout as the parent layout. In this layout, we create a login form using the TableLayout. For creating a login form, we use four rows. In the first row we create a TextView for showing a Text "loginForm", in the second row we use an EditText and a TextView for UserName, in the third row, we create a Button for login. 

 

Now we will run our application. Let's see the output of the project.

 

 

ConstraintLayout in Android 

 

ConstantLayout is a view group that is used to arrange the views in an adaptable and flexible way. ConstantLayout is the default Layout which is used by the Android Studio. It means that when we create any project in the Android Studio ConstantLayout is used by the Android Studio itself. It also supports animation.

 

The complete code example of ConstraintLayout is listed below.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Explanation

 

When we create an Android Studio project, Android Studio provides two files MainActivity.java and activity_main.xml file. In the activity_main.xml file. In this file, ConstantLayout is used by default. A TextView is created in this layout file for showing the use of ConstaintLayout.

 

Now we will run our application. Let's see the output of the project. 

 

 

Summary

 

In this article, we learned about Layouts in Android, its different types with examples, and how to use these Layouts as per the user's requirements.