Linear Layout

LinearLayout is also a ViewGroup that is responsible for holding views in it and It can be a layout that arranges its children i.e the various views and layouts linearly Whether all these children can be arranged horizontally or vertically depends upon the value of attribute android:orientation and if you are not defining anything then By default the orientation is horizontal.(one after another) in a single column(vertical) or a single row(horizontal).

Vertical Linear Layout

In a vertical LinearLayout as its name suggests its the Views can be defined inside the LinearLayout which can be arranged vertically one after another and similar in a column and for this we need to mention the android:orientation parameter with value verticalAs we can see, there are 6 children inside the within LinearLayout tag.
To understand more clearly, let us 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.salesforcedrillers.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="Hello"
        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 six children inside the Linear Layout which all are TextView and Also the orientation parameter is set to vertical and all of the six children will appear one after another vertically.

Horizontal LinearLayout

In a horizontal LinearLayout as the name suggests it’s the Views which can be inside the LinearLayout which is arranged horizontally one after another, like in a row and it’s a good practice to explicitly specify the orientation of the linear layout by setting the attribute android:orientation with value horizontal in LinearLayout tag.
To understand clearly, let’s check the following code and it’s 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="Android"
    android:textAllCaps="true"/>
    
</LinearLayout>

As we can see that there are 3 children inside the LinearLayout and also the orientation attribute is set to horizontal, all of the 3 children.

LinearLayout within a LinearLayout

A LinearLayout also is a ViewGroup and can contain other layouts too. Let’s see 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 has 3 TextViews and 1 LinearLayout as it’s children and it is set to vertical orientation, all of it’s children will appear vertically.

The second LinearLayout has 3 TextViews and it is set to horizontal orientation; also all it’s children will appear horizontally within this LinearLayout.

Learn Android

Linear Layout