Android Tutorials - Linear Layout

Linear layout is a container for andoid ui components.  It helps us to arrange components in either horizontal (default) or vertical direction.

Frequently used attributes in a linear layout are the following.  A fair understanding of them will help us create a gui easily and use them at the appropriately.

android:orientation - horizontal (default )  or vertical

android:weightSum - This attribute works with android:layout_weight in the child components.  This attribute contains the sum of the layout_weight attributes in its children. The range is (0.0 to 1.0).  eg. if weightSum in the linearlayout parent has 1.0 and it has two child buttons, and each of them have a layout_weight value of 0.5.  They will be allocated equal space in its parent.  If the two have values (0.25 & 0.75) respectively and its parent has 100 pixels of horizontal space, the children will be allocated 25 pixels and 75 pixels respectively.  

android:gravity: This attribute decides where the child components will placed in the rectangular space that it has.  The possible values are ( top, left, right, bottom, center_horizontal, center_vertical, center, fill, fill_horizontal, fill_vertical, start, end ... ).  

center = center_horizontal + center_vertical.

Component placed in the top left corner should have value as( top | left). 

The following is a layout resource file for a sample activity which I created to help understand these basic attributes.

<?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:id="@+id/topLevelContainer"
    android:weightSum="1.0">
    <LinearLayout
        android:id="@+id/firstChildContainer"
        android:layout_weight="0.5"
        android:gravity="center_horizontal|center_vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:text="Button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="Button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/secondChildContainer"
        android:layout_weight="0.5"
        android:gravity="center_vertical|right|center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:text="Cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <Button
            android:text="OK"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

The above example contains 3 LinearLayouts.  A root container with two child containers and each of them have two buttons respectively.

Top Level Linear Layout ( which illustrates android:orientation and android:weightSum).
The First & Second  child container  ( which illustrates android:gravity ).

The following screen shot says it all.