An overview of Linear Layout in Android, including attributes and examples

An overview of Linear Layout in Android, including attributes and examples

A linear layout is a view group that aligns all children in a single direction, vertically or horizontally. It is one of the most basic layouts in Android and is used to create layouts with simple structures.

The main properties of a linear layout are:

  • Orientation: The orientation attribute specifies how the children will be aligned. The value can be either “horizontal” or “vertical”. The default is horizontal.
  • In Vertical orientation, all the views can be arranged vertically. The code snippet below shows how the views can be placed vertically.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">
   <TextView
       android:id="@+id/name"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:text="Hello World!" />
   <TextView
       android:id="@+id/email"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:text="Hello World!" />
</LinearLayout>

In Horizontal orientation, all the views can be arranged horizontally. The code snippet shows how the views can be arranged Horizontally.

<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:id="@+id/name"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:text="Hello World!" />
   <TextView
       android:id="@+id/email"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_gravity="center"
       android:text="Hello World!" />
</LinearLayout>
  • Gravity: The gravity attribute specifies the alignment of the children within the layout. The value can be one of the following:
    • TOP
    • BOTTOM
    • LEFT
    • RIGHT
    • CENTER
    • CENTER_VERTICAL
    • CENTER_HORIZONTAL

The below code shows how we can control the alignment of the layout based on the gravity specified.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal"
   android:gravity="right">
   <TextView
       android:id="@+id/name"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!" />
   <TextView
       android:id="@+id/email"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!" />
</LinearLayout>
  • Weight: The weight attribute specifies the importance of a child’s view. Children with a higher weight will take up more space in the layout.

The below example shows how we can specify the weight if we want all the views to take equal or unequal spaces on the screen.

  • For Equal spaces with orientation horizontal.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="horizontal"
   android:weightSum="2">
   <TextView
       android:id="@+id/name"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:text="Hello World!"
       android:textAlignment="center"
       android:background="@color/black"
       android:textColor="@color/white"
       android:textSize="13dp"
       android:padding="5dp"/>
   <TextView
       android:id="@+id/email"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:layout_weight="1"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"/>
</LinearLayout>
  • For unequal spaces with vertical orientation.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:weightSum="4">
   <TextView
       android:id="@+id/email1"
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:text="Hello World!"
       android:layout_weight="1"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"/>
   <TextView
       android:id="@+id/name"
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:layout_weight="2"
       android:text="Hello World!"
       android:textAlignment="center"
       android:background="@color/black"
       android:textColor="@color/white"
       android:textSize="13dp"
       android:padding="5dp"/>
   <TextView
       android:id="@+id/email"
       android:layout_width="wrap_content"
       android:layout_height="0dp"
       android:text="Hello World!"
       android:layout_weight="1"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"/>
</LinearLayout>

The advantages of using a linear layout in Android are:

  • It is simple to use and understand.
  • It is efficient and performant.
  • It can be used to create a variety of layouts.

The disadvantages of using a linear layout in Android are:

  • It is not as flexible as some other layouts, such as the relative layout.
  • It can be difficult to create complex layouts with a linear layout.

Overall, the linear layout is a versatile and efficient layout that can be used to create a variety of layouts in Android. However, it is important to keep in mind its limitations when choosing it for a particular project.

Now let’s design the 2 linear layouts using buttons and text view. In one we will use a simple linear layout with vertical orientation and in the other, we will be using a linear layout with a weight attribute in it.

Below the example, we will see the linear layout with a vertical orientation.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
  >
   <TextView
       android:id="@+id/email1"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"
      />
   <Button
       android:id="@+id/name"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:textAlignment="center"
       android:background="@color/black"
       android:textColor="@color/white"
       android:textSize="13dp"
       android:padding="5dp"/>
   <Button
       android:id="@+id/email"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"
       android:background="@color/teal_200"
       android:textColor="@color/white"/>
   <Button
       android:id="@+id/email2"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"
       android:background="@color/purple_500"
       android:textColor="@color/white"/>
</LinearLayout>

In the below example, we will see the Linear layout with the weight attribute.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   android:weightSum="3">
   <TextView
       android:id="@+id/email1"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"
      />
   <Button
       android:id="@+id/name"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:text="Hello World!"
       android:textAlignment="center"
       android:background="@color/black"
       android:textColor="@color/white"
       android:textSize="13dp"
       android:padding="5dp"/>
   <Button
       android:id="@+id/email"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:text="Hello World!"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"
       android:background="@color/teal_200"
       android:textColor="@color/white"/>
   <Button
       android:id="@+id/email2"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:text="Hello World!"
       android:textAlignment="center"
       android:textSize="13dp"
       android:padding="5dp"
       android:background="@color/purple_500"
       android:textColor="@color/white"/>
</LinearLayout>

Techinfo Avatar

One response to “An overview of Linear Layout in Android, including attributes and examples”

  1. SImran Avatar
    SImran

    thank you for this article, Very Help full : -)

Leave a Reply

Your email address will not be published. Required fields are marked *