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.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     tools:context=".MainActivity">  
  8.   
  9.     <TextView  
  10.         android:id="@+id/text_view"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:layout_centerInParent="true"  
  14.         android:text="Android Layouts Example"  
  15.         android:textColor="@color/colorPrimaryDark"  
  16.         android:textSize="20sp" />  
  17.   
  18.     <Button  
  19.         android:id="@+id/button"  
  20.         android:layout_width="match_parent"  
  21.         android:layout_height="wrap_content"  
  22.         android:layout_below="@id/text_view"  
  23.         android:layout_margin="10dp"  
  24.         android:layout_marginTop="20dp"  
  25.         android:background="@color/colorAccent"  
  26.         android:padding="10dp"  
  27.         android:text="Button"  
  28.         android:textColor="@color/colorPrimaryDark"  
  29.         android:textSize="20sp" />  
  30.   
  31. </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.
  1. import androidx.appcompat.app.AppCompatActivity;  
  2.   
  3. import android.os.Bundle;  
  4.   
  5. public class MainActivity extends AppCompatActivity {  
  6.   
  7.     @Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.activity_main);  
  11.     }  
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.
 
Layout Example
 

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.
 
Relative Layout
 
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:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/relative_layout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:layout_marginLeft="10dp"  
  7.     android:layout_marginTop="10dp"  
  8.     android:layout_marginRight="10dp"  
  9.     android:layout_marginBottom="10dp"  
  10.     android:layout_weight="1">  
  11.   
  12.     <TextView  
  13.         android:id="@+id/text_view"  
  14.         android:layout_width="match_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:layout_centerHorizontal="true"  
  17.         android:layout_marginLeft="10dp"  
  18.         android:layout_marginTop="50dp"  
  19.         android:layout_marginRight="10dp"  
  20.         android:padding="20dp"  
  21.         android:background="@color/colorAccent"  
  22.         android:text="Android Relative Layouts"  
  23.         android:textAlignment="center"  
  24.         android:textColor="@color/colorPrimaryDark"  
  25.         android:textSize="35sp"  
  26.         android:textStyle="bold" />  
  27.   
  28.     <TextView  
  29.         android:id="@+id/text_view1"  
  30.         android:layout_width="wrap_content"  
  31.         android:layout_height="wrap_content"  
  32.         android:layout_below="@id/text_view"  
  33.         android:background="@color/colorPrimaryDark"  
  34.         android:layout_marginLeft="30dp"  
  35.         android:layout_marginTop="50dp"  
  36.         android:layout_marginRight="10dp"  
  37.         android:padding="20dp"  
  38.         android:text="Relative"  
  39.         android:textAlignment="center"  
  40.         android:textColor="@color/colorAccent"  
  41.         android:textSize="30sp"  
  42.         android:textStyle="italic" />  
  43.   
  44.     <TextView  
  45.         android:id="@+id/text_view2"  
  46.         android:layout_width="wrap_content"  
  47.         android:layout_height="wrap_content"  
  48.         android:layout_below="@id/text_view"  
  49.         android:layout_marginLeft="5dp"  
  50.         android:layout_marginTop="50dp"  
  51.         android:layout_toRightOf="@id/text_view1"  
  52.         android:padding="20dp"  
  53.         android:background="@color/colorPrimaryDark"  
  54.         android:text="Layout"  
  55.         android:textAlignment="center"  
  56.         android:textColor="@color/colorAccent"  
  57.         android:textSize="30sp"  
  58.         android:textStyle="italic" />  
  59.   
  60.     <TextView  
  61.         android:id="@+id/text_view3"  
  62.         android:layout_width="match_parent"  
  63.         android:layout_height="wrap_content"  
  64.         android:layout_below="@id/text_view1"  
  65.         android:layout_centerInParent="true"  
  66.         android:layout_marginLeft="10dp"  
  67.         android:layout_marginTop="50dp"  
  68.         android:background="@color/colorAccent"  
  69.         android:layout_marginRight="10dp"  
  70.         android:padding="20dp"  
  71.         android:text="Relative Layout Example"  
  72.         android:textAlignment="center"  
  73.         android:textColor="@color/colorPrimaryDark"  
  74.         android:textSize="35sp"  
  75.         android:textStyle="bold" />  
  76.   
  77. </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.
 
RelativeLayout Output
 

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.
 
Linear Layout Image  Linear Layout
 
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.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/relative_layout"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:orientation="vertical">  
  7.   
  8.     <TextView  
  9.         android:id="@+id/text_view"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:background="@color/coloryellow"  
  13.         android:layout_margin="10dp"  
  14.         android:layout_marginTop="30dp"  
  15.         android:padding="20dp"  
  16.         android:text="Android Linear Layouts"  
  17.         android:textAlignment="center"  
  18.         android:textColor="@color/colorPrimaryDark"  
  19.         android:textSize="30sp"  
  20.         android:textStyle="bold" />  
  21.   
  22.     <TextView  
  23.         android:id="@+id/text_view1"  
  24.         android:layout_width="match_parent"  
  25.         android:layout_height="wrap_content"  
  26.         android:layout_margin="10dp"  
  27.         android:background="@color/colorpink"  
  28.         android:padding="20dp"  
  29.         android:text="Linear"  
  30.         android:textAlignment="center"  
  31.         android:textColor="@color/colorAccent"  
  32.         android:textSize="30sp"  
  33.         android:textStyle="italic" />  
  34.   
  35.     <TextView  
  36.         android:id="@+id/text_view2"  
  37.         android:layout_width="match_parent"  
  38.         android:layout_height="wrap_content"  
  39.         android:layout_margin="10dp"  
  40.         android:padding="20dp"  
  41.         android:background="@color/colorpurple"  
  42.         android:text="Layout"  
  43.         android:textAlignment="center"  
  44.         android:textColor="@color/colorAccent"  
  45.         android:textSize="30sp"  
  46.         android:textStyle="italic" />  
  47.   
  48.     <TextView  
  49.         android:id="@+id/text_view3"  
  50.         android:layout_width="match_parent"  
  51.         android:layout_height="wrap_content"  
  52.         android:layout_margin="10dp"  
  53.         android:padding="20dp"  
  54.         android:background="@color/coloryellow"  
  55.         android:text="Linear Layout Example"  
  56.         android:textAlignment="center"  
  57.         android:textColor="@color/colorPrimaryDark"  
  58.         android:textSize="30sp"  
  59.         android:textStyle="bold" />  
  60.   
  61. </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.
 
Linear Layout Output
 

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.
 
Table Layout
 
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.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#000"  
  6.     android:orientation="vertical"  
  7.     android:stretchColumns="1">  
  8.   
  9.     <TableRow android:padding="5dip">  
  10.   
  11.         <TextView  
  12.             android:layout_height="wrap_content"  
  13.             android:layout_marginBottom="20dp"  
  14.             android:layout_span="2"  
  15.             android:gravity="center_horizontal"  
  16.             android:text="loginForm"  
  17.             android:textColor="#0ff"  
  18.             android:textSize="25sp"  
  19.             android:textStyle="bold" />  
  20.     </TableRow>  
  21.   
  22.     <TableRow>  
  23.   
  24.         <EditText  
  25.             android:id="@+id/userName"  
  26.             android:layout_height="wrap_content"  
  27.             android:layout_column="1"  
  28.             android:layout_marginLeft="10dp"  
  29.             android:background="#fff"  
  30.             android:hint="userName"  
  31.             android:padding="5dp"  
  32.             android:textColor="#000" />  
  33.   
  34.         <TextView  
  35.             android:layout_height="wrap_content"  
  36.             android:layout_column="0"  
  37.             android:layout_marginLeft="10dp"  
  38.             android:text="User Name"  
  39.             android:textColor="#fff"  
  40.             android:textSize="16sp" />  
  41.     </TableRow>  
  42.   
  43.     <TableRow>  
  44.   
  45.         <EditText  
  46.             android:id="@+id/password"  
  47.             android:layout_height="wrap_content"  
  48.             android:layout_column="1"  
  49.             android:layout_marginLeft="10dp"  
  50.             android:layout_marginTop="20dp"  
  51.             android:background="#fff"  
  52.             android:hint="password"  
  53.             android:padding="5dp"  
  54.             android:textColor="#000" />  
  55.   
  56.         <TextView  
  57.             android:layout_height="wrap_content"  
  58.             android:layout_column="0"  
  59.             android:layout_marginLeft="10dp"  
  60.             android:layout_marginTop="20dp"  
  61.             android:text="Password"  
  62.             android:textColor="#fff"  
  63.             android:textSize="16sp" />  
  64.     </TableRow>  
  65.   
  66.   
  67.     <TableRow android:layout_marginTop="20dp">  
  68.   
  69.         <Button  
  70.             android:id="@+id/loginBtn"  
  71.             android:layout_height="wrap_content"  
  72.             android:layout_gravity="center"  
  73.             android:layout_span="2"  
  74.             android:background="#0ff"  
  75.             android:text="login"  
  76.             android:textColor="#000"  
  77.             android:textSize="20sp"  
  78.             android:textStyle="bold" />  
  79.     </TableRow>  
  80. </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.
 
Table Layout Output
 

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.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     tools:context=".MainActivity">  
  8.   
  9.     <TextView  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:text="Hello World!"  
  13.         app:layout_constraintBottom_toBottomOf="parent"  
  14.         app:layout_constraintLeft_toLeftOf="parent"  
  15.         app:layout_constraintRight_toRightOf="parent"  
  16.         app:layout_constraintTop_toTopOf="parent" />  
  17.   
  18. </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. 
 
ConstaintLayout Output
 

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.