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>
Leave a Reply