Linear Layout in Android

LinearLayout is a ViewGroup that is responsible for holding views in it. It is a layout that arranges its children i.e the various views and layouts linearly (one after another) in a single column(vertically) or a single row(horizontally).

Whether all the children will be arranged horizontally or vertically depends upon the value of attribute android:orientation. By default the orientation is horizontal.

Vertical Linear Layout

In a vertical LinearLayout, as the name suggests, the Views defined inside the Linear Layout are arranged verically one after another, like in a column. And for this we need to mention the android:orientation attribute with value vertical within the LinearLayout tag.

To understand more clearly, lets check the following code and its output shown.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.example.android.studytonightandroid.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="Welcome"
        android:background="@color/colorAccent"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="to"
        android:background="#E65100"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:background="#25f"
        android:text="Studytonight"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="android"
        android:background="#76FF03"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="is"
        android:background="#FDD835"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="fun"
        android:background="#E040FB"
        android:textAllCaps="true"/>

</LinearLayout;>

As we can see, there are 6 children inside the LinearLayout, all are TextView. Also, since the orientation attribute is set to vertical, all of the 6 children will appear one after another vertically.

Horizontal LinearLayout

In a horizontal LinearLayout, as the name suggests, the Views defined inside the Linear Layout will be arranged horizontally one after another, like in a row. By default, the orientation is set to horizontal. But its a good practice to explicitly specify the orientation of the linear layout by setting the attribute android:orientation with value horizontal in the LinearLayout tag.

To understand this more clearly, lets check the following code and its output shown.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal"
    tools:context="com.example.android.studytonightandroid.MainActivity">

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:text="Welcome"
    android:background="@color/colorAccent"
    android:textAllCaps="true"/>

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:text="to"
    android:background="#E65100"
    android:textAllCaps="true"/>

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="30sp"
    android:background="#25f"
    android:text="Studytonight"
    android:textAllCaps="true"/>
    
</LinearLayout>

As we can see, there are 3 children inside the LinearLayout. Also, since the orientation attribute is set to horizontal, all of the 3 children i.e the TextViews appear one after another horizontally.

LinearLayout within a LinearLayout

A LinearLayout, which is a ViewGroup, can contain other layouts too. Let's try the following code in which we have added one LinearLayout inside another LinearLayout, along with a few Views too.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:background="#FFEB3B"
    tools:context="com.example.android.studytonightandroid.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="Welcome"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="to"
        android:textAllCaps="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:text="Studytonight"
        android:textAllCaps="true"/>

    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="horizontal"
        android:background="#FF6E40">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="android"
            android:textAllCaps="true"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="is"
            android:textAllCaps="true"/>
    
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="30sp"
            android:text="fun"
            android:textAllCaps="true"/>
    </LinearLayout>

</LinearLayout>

The first LinearLayout(yellow color) has 3 TextViews and 1 LinearLayout as its children. Since it is set to vertical orientation, all of its children will appear vertically.

The second LinearLayout (orange color) has 3 TextViews as its children. Since it is set to horizontal orientation, all its children will appear horizontally within this LinearLayout.