Android LinearLayout Basic Layouting and Example

Android LinearLayout is an essential layout to build a UI layout block for Android apps. Most of the time you will need to use this layout as your main layout when designing the UI. It is the easiest layout to implement.

Basic Attributes of Android LinearLayout

Here are the most used attributes that you have to know when you use the LinearLayout:

android:id

This attribute is where you identify the layout uniquely. This ID also becomes a reference to the layout when you need to access the LinearLayout programmatically.

android:layout_width

This is where you set the layout width and it’s mandatory.

android:layout_height

This is where you set the layout height and it’s mandatory.

android:orientation

You will have to set the orientation of the LinearLayout to horizontal or vertical, and it’s required.

android:padding

This is the extra padding for all sides of the layout. For each side, you can set it using:

• android:paddingLeft
• android:paddingStart
• android:paddingRight
• android:paddingEnd
• android:paddingTop
• android:paddingBottom

android:layout_margin

This is an extra space outside the layout. For each side, you can set it using:

• android:layout_marginLeft
• android:layout_marginStart
• android:layout_marginRight
• android:layout_marginEnd
• android:layout_marginTop
• android:layout_marginBottom

android:gravity

This attribute specifies how the child Views are positioned. In other means, it is like an alignment of the child Views. There are several values or constants for this attribute, they are top, bottom, left, right, start, end, center, etc.

android:layout_gravity

This attribute specifies how the layout itself is positioned to its parent. So basically, the layout_gravity is for the child attribute to position itself to the parent layout.

android:layout_weight

This attribute specifies how much extra space that will be allocated to the child Views.

Setting the Width and Height

You can set the android:layout_width and android:layout_height to:

match_parent

This sets the layout to fill all the space that the parent layout has. In other means, it fills the remaining space of layout.

wrap_content

This will tell your layout to size itself to the dimensions required by its content.

DP value

This specifies the layout to size exactly on the value you set.

Setting the LinearLayout Orientation

There are two layout orientations of LinearLayout, they are vertical and horizontal. You can set it via android:orientation attribute.

• 

• 

Android LinearLayout Gravity Attribute

The gravity attribute on LinearLayout is like the alignment to its child Views. Here take a look at this XML code.

<?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="vertical"
   android:padding="20dp"
   android:gravity="top|left">

   <View
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@color/colorAccent"
       />

</LinearLayout>

That is a sample layout and it contains a box-sized 100dp for both its width and height. It is positioned on the gravity top and left. Here take a look for each gravity that can be supported on Android LinearLayout:

• 

• 

• 

• 

• 

• 

• 

• 

• 

Layout Gravity on Vertical LinearLayout

Here is another example of the vertical LinearLayout. It has children using the android:layout_gravity of left, center, and right.

<?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="vertical"
   android:padding="20dp">

   <View
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@color/colorAccent"
       android:layout_gravity="left"
       />

   <View
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@color/colorAccent"
       android:layout_marginTop="40dp"
       android:layout_gravity="center"
       />

   <View
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@color/colorAccent"
       android:layout_marginTop="40dp"
       android:layout_gravity="right"
       />

</LinearLayout>

The vertical layout can only accept the left, center, right, start, and end as its children layout_gravity attributes.

Layout Gravity on Horizontal LinearLayout

The code below is the example of the horizontal LinearLayout. It has children using the android:layout_gravity of top, center, and bottom.

<?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"
   android:padding="20dp">

   <View
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@color/colorAccent"
       android:layout_gravity="top"
       />

   <View
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@color/colorAccent"
       android:layout_marginStart="30dp"
       android:layout_gravity="center"
       />

   <View
       android:layout_width="100dp"
       android:layout_height="100dp"
       android:background="@color/colorAccent"
       android:layout_marginStart="30dp"
       android:layout_gravity="bottom"
       />

</LinearLayout>

The horizontal layout can only accept the top, center, and bottom as its children layout_gravity attributes.

Layout Weight on Vertical LinearLayout

If you need a layout to allocate the Views with the same height size for vertical LinearLayout, you can set the android:layout_weight to each of the child to 1 and the android:layout_height to 0dp. This is an example code:

<?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="vertical"
   android:padding="20dp">

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

</LinearLayout>

What about the different height? You can set the layout_weight to be different for each child.

<?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="vertical"
   android:padding="20dp">

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="2"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="4"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

   <View
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginBottom="20dp"
       />

</LinearLayout>

Please note in mind that the vertical layout can only allocate the height size.

Layout Weight on Horizontal LinearLayout

If you need a layout to allocate the Views with the same width size for horizontal LinearLayout, you can set the android:layout_weight to each of the child to 1 and the android:layout_width to 0dp. This is an example code:

<?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"
   android:padding="20dp">

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginEnd="20dp"
       />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginEnd="20dp"
       />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginEnd="20dp"
       />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginEnd="20dp"
       />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       />

</LinearLayout>

What about the different width? You can set the layout_weight to be different for each child. Here is an 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"
   android:padding="20dp">

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginEnd="20dp"
       />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="3"
       android:background="@color/colorAccent"
       android:layout_marginEnd="20dp"
       />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="1"
       android:background="@color/colorAccent"
       android:layout_marginEnd="20dp"
       />

   <View
       android:layout_width="0dp"
       android:layout_height="match_parent"
       android:layout_weight="2"
       android:background="@color/colorAccent"
       />

</LinearLayout>

Please note in mind that the horizontal layout can only allocate the width size.

Example of Login Screen using Android LinearLayout

This is an example of a login screen using both combinations of vertical and horizontal LinearLayout.

<?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="vertical"
   android:padding="30dp">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Email"
       />

   <EditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="Enter your email address.."
       android:layout_marginTop="10dp"
       android:paddingBottom="16dp"
       android:paddingTop="10dp"
       />

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Password"
       android:layout_marginTop="20dp"
       />

   <EditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:hint="Enter your password.."
       android:layout_marginTop="10dp"
       android:paddingBottom="16dp"
       android:paddingTop="10dp"
       />

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:layout_marginTop="30dp">

       <Button
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:text="Cancel"
           android:textColor="@android:color/white"
           android:background="#858585"
           />

       <Button
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:text="Sign In"
           android:textColor="@android:color/white"
           android:background="@color/colorAccent"
           android:layout_marginStart="12dp"
           />

   </LinearLayout>

   <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Dont have any account yet? Sign up here"
       android:gravity="center"
       android:layout_marginTop="30dp"
       />

</LinearLayout>

If you still need a reference for the Android LinearLayout, you can go here for more info on it.

Where to go next?

Not a single day off for learning something right? Try the other posts and tutorials here about:

• How to put an Intro Slider and Splash Screen to your app
• How to Get Data from REST API using Retrofit
• Android Take Photo from Camera and Gallery
• Android Simple Image Gallery Tutorial
• Get to Know About Android Activity Lifecycle

I hope you like my post, comment and share it with love!