Linear Layout In Android

In this tutorial we will learn about Linear Layout In Android Studio With different different examples. This is the best Layout to mange its child layouts horizontally or vertically.

What is Linear Layout in Android Studio?

Linear Layout is view group that aligns its all children in a single direction. Layouts are used to show data to users. To make User-Interface (UI) in android applications.

There are many types of Layouts in android studio to make UI. Some of them are below:

But in this tutorial we will discuss about Linear Layout only.

When should we use Linear Layout?

To arrange the child layouts horizontally or vertically, you can use Linear Layout. You can easily manage its child layouts or views horizontally or vertically by providing orientation only. A simple view of vertically aligned layouts are below in design.

To align the Views or View Groups in Linear Layout just use its orientation inside it as below:

android:orientation="horizontal"
android:orientation="vertical"

Below are two examples with screenshots, that how to align Views in horizontal or vertical in Linear Layout.

Vertically Aligned Views:

Its code is as below:

To make orientation vertical just add a property android:orientation=”vertical” . Below is the code for above screenshot for understanding purpose.


<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="15dp"
        android:layout_marginBottom="10dp"
        android:padding="10dp">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Bottom Sheet View"
            android:textSize="18dp"
            android:textColor="@color/black"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/react_shape_edittext_white"
            android:hint="Username"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:layout_marginTop="15dp"
            android:background="@drawable/react_shape_edittext_white"
            android:hint="Password"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/buttonLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:text="Login"
            app:cornerRadius="5dp"
            android:padding="12dp"
            android:backgroundTint="@color/green"/>

    </LinearLayout>

Horizontally aligned:

To align views in horizontal way, you just needed to android:orientation=”horizontal” property in parent View group. Below is the example for horizontal alignment in Linear Layout.

Horizontal Views in Linear Layout Android

Below is the code for above screenshot. You can align multiple views and view group in the horizontal way by providing the orientation in the Linear Layout. The Linear Layout is the parent View which takes another views as child inside it.


<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:padding="20dp"
        android:gravity="center">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button1"
            android:background="@color/teal_200"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="FlutterTPoint"
            android:textStyle="bold"
            android:textSize="20sp"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button2"
            android:background="@color/teal_200"/>
    </LinearLayout>

You can comment for any doubt or making UI in android app.

Thank you for visiting the page on FlutterTPoint. To develop your skills please see More Useful Android Tutorials, which will help you to improve your android development skills.