My Life with Android
Introduction Android Componets UserInterface Advanced UI Data Storage Advanced Concepts Others New Studio

Android Linear Layout

Android LinearLayout is a view group that aligns all children in either vertically or horizontally.(via orientation attribute. )


Note : In additional, the highest weight component will fill up the remaining space in LinearLayout.

LinearLayout Attributes

Following are the important attributes specific to LinearLayout :
Attribute Description
android:id This is the ID which uniquely identifies the layout.
android:orientation This specifies the direction of arrangement and you will use horizontal for a row, vertical for a column. The default is horizontal.

Ex 1: Linear Layout orientation : horizontal


<?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" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button -1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button -2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button -3" />

</LinearLayout>
Result of above code.

Ex 2: Linear Layout orientation : vertical


<?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" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button -1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button -2" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button -3" />

</LinearLayout>
Result of above code.

Ex 3: Applying weight for child views

a) Add 3 buttons within LinearLayout, with horizontal orientation. In this case, the highest weight is button3, so it will fill up the remaining space in the layout. 

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />
    
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" 
        android:layout_weight="1"/>
    
</LinearLayout>


b) In above example, make orientation with vertical. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#BBDEFB"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />
    
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" 
        android:layout_weight="1">
    
</LinearLayout>


c) In above example, filling up the space uniformly in the layout. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#BBDEFB"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button 1" />
    
    <Button
        android:id="@+id/button2"
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" 
        android:layout_weight="1"/>
    
</LinearLayout>

Ex 4: Nested 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" >

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="25dp"
        android:background="#0000FF" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="25dp"
        android:background="#FF0000" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginLeft="45dp"
        android:layout_marginTop="25dp"
        android:background="#000000"
        android:orientation="horizontal" >

        <LinearLayout
            android:layout_width="75dp"
            android:layout_height="50dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="25dp"
            android:background="#9C27B0" >
        </LinearLayout>

        <LinearLayout
            android:layout_width="75dp"
            android:layout_height="50dp"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="25dp"
            android:background="#9C27B0" >
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

Ex 4: gravity, layout_gravity, padding, margins

gravity

layout_gravity

The layout_gravity attribute
You'll use the layout_gravity attribute in a child view to position itself along the x, y axis inside one of the View group containers, such as:
  • LinearLayout
  • GridLayout
  • FrameLayout



Here are some of the common constant values that you can use to set the layout_gravity attribute:

  • top

    - positions the object at the top of the container

  • bottom

    - positions the object at the bottom of the container

  • left

    - positions the object on the left of the container

  • right

    - positions the object on the right of the container

  • center_vertical

    - positions the object in the vertical center of the container

  • center_horizontal

    - positions the object in the horizontal center of the container

  • center

    - positions the object in both the vertical and horizontal center of the container
Note : You can also use the (|) character to combine one or more of the constants, like this: android:layout_gravity="left|top" 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#BBDEFB"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center_horizontal"
        android:text="Registration"
        android:textSize="24sp"
        android:textStyle="bold" />

</LinearLayout>