Linear Layout Tutorial With Examples In Android

A LinearLayout is one of the fundamental layout managers in Android, used to arrange UI elements linearly either horizontally or vertically. In this tutorial, I’ll provide examples of using LinearLayout in Android, both programmatically and with XML layouts.

Table of Contents

Types Of Linear Layout Orientation

Vertical
Horizontal

Vertical

In the following code snippets, the child views of this layout are arranged in a vertical line, one after the other. This vertical arrangement is achieved by specifying the orientation as ‘vertical’ in the LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"> <!-- Vertical Orientation set -->

    <!-- Child Views(In this case 2 Button) are here -->


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button"
        android:background="#358a32" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:background="#0058b6" />

 
</LinearLayout>

XML

Horizontal

In this layout, all the child views are arranged in a line, one after the other, in a horizontal fashion. This horizontal arrangement is achieved by specifying the orientation as ‘horizontal’ within the code snippets. As a result, the child views within this layout are displayed side by side, creating a horizontal alignment.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"> <!-- Horizontal Orientation set -->

    <!-- Child Views(In this case 2 Button) are here -->


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button"
        android:background="#358a32" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:background="#0058b6" />


</LinearLayout>

XML

Creating a LinearLayout Programmatically

You can also create LinearLayouts programmatically in Java or Kotlin. Here’s an example of how to create a vertical LinearLayout programmatically and add elements to it:

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Create a vertical LinearLayout
        LinearLayout linearLayout = new LinearLayout(this);
        linearLayout.setOrientation(LinearLayout.VERTICAL);

        // Create a TextView
        TextView textView = new TextView(this);
        textView.setText("Hello, LinearLayout!");

        // Create a Button
        Button button = new Button(this);
        button.setText("Click Me");

        // Add TextView and Button to the LinearLayout
        linearLayout.addView(textView);
        linearLayout.addView(button);

        // Set the LinearLayout as the content view of the activity
        setContentView(linearLayout);
    }
}

Java

Controlling Layout Weight

LinearLayout allows you to control the distribution of space among its child elements using the android:layout_weight attribute. For example, you can make one element take up more space than another by assigning it a higher weight.

Here’s an XML example:

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

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Left"/>

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Right"/>

</LinearLayout>

XML

LinearLayout is a simple and commonly used layout manager in Android, especially for creating basic UI structures. Depending on your app’s requirements, you may also use other layout managers like RelativeLayout, ConstraintLayout, or GridLayout for more complex layouts.