Linear Layout

Understanding layouts is most important for good Android application design. Android Layout is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user. Android allows two different ways to create layouts :

(1) Using XML File & (2) Programmatically in Java file.

In this post, all information about linear layout and its attributes (which organizes user interface controls, or widgets) is described.

What Is A Linear Layout?

Linear layouts are one of the simplest and most common types of layouts used by Android developers to organize components within their user interfaces. The linear layout works much as its name implies: it organizes components linearly in either a vertical or horizontal style via orientation attribute.

All children of a Linear Layout are stacked one after the other. When the layouts orientation is set to vertical, all child components within it are organized in a single column; when the layout orientation is set to horizontal, all child components within it are organized in a single row.

To create layout using simple XML file and those XML files must be placed in /res/layout folder.

Simple Structure of Linear Layout xml file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent" >
   </LinearLayout>

The <LinearLayout> XML element is the root element to define the Linear Layout. All Children of this layout must be declared between <LinearLayout> and </LinearLayout>.

Different properties of Linear Layout (with example) are mentioned here.

1. Orientation – Horizontal

To understand LinearLayout, Open "res/layout/main.xml" file, add few buttons within LinearLayout, and set "horizontal" orientation to display each of the Button controls to display in a single row.

Attribute Name: Horizontal Orientation

Code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    tools:context=".TestingActivity" >

    <Button

        android:id="@+id/button1"

        android:layout_width="53dp"

        android:layout_height="match_parent"

        android:background="#cccccc"

        android:text="L" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:background="#666666"

        android:text="I" />

    <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:background="#bbbbbb"

        android:text="N" />

    <Button

        android:id="@+id/button4"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:background="#666666"

        android:text="E" />

    <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:background="#aaaaaa"

        android:text="A" />

    <Button

        android:id="@+id/button6"

        android:layout_width="wrap_content"

        android:layout_height="match_parent"

        android:background="#666666"

        android:text="R" />

</LinearLayout>

Output:

2. Orientation – Vertical

In the xml file, change the Orientation from horizontal to vertical, drag few more buttons on layout and modify the code of it as explained here.

Attribute Name: Vertical Orientation

Code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#fffddd"

    android:gravity="center_horizontal"

    android:orientation="vertical"

    tools:context=".TestingActivity" >

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:minHeight="45dp"

        android:text="V" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:minHeight="45dp"

        android:text="E" />

    <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:minHeight="45dp"

        android:text="R" />

    <Button

        android:id="@+id/button4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:minHeight="45dp"

        android:text="T" />

    <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:minHeight="45dp"

        android:text="I" />

    <Button

        android:id="@+id/button6"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:minHeight="45dp"

        android:text="C" />

    <Button

        android:id="@+id/button7"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:minHeight="45dp"

        android:text="A" />

    <Button

        android:id="@+id/button8"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:minHeight="45dp"

        android:text="L" />

    <Button

        android:id="@+id/button9"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="ORIENTATION" />

</LinearLayout>

Output:

3. Width & Height

To set the width or height of any component or layout; we use two attributes, layout_width and layout_height. The value given to these attributes could be either match_parent  or wrap_content. To understand it edit the xml file or paste the code shown here.

Attribute Name:  layout_width & layout_height

Code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center_horizontal"

    android:orientation="vertical"

    tools:context=".TestingActivity" >

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="ANDROID" />

    <Button

        android:id="@+id/button2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="APPLE" />

    <Button

        android:id="@+id/button3"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:text="MICROSOFT" />

</LinearLayout>

Output:

Note: First button's layout_width and layout_height attribute are set to wrap_content. Second button's layout_width attribute is set to wrap_content, but the width is set to match_parent; so it takes the full length of width. The remaining space of view is covered by third button, as its width and height attribute are set to match_parent. Even if you add the fourth button here, it won't be displayed, as the third button's layout_height attribute is set to match_parent.

4. Layout Gravity :

Android provides layout_gravity attribute to set components to different positions (Left-Right-Centre-Top-Bottom) of screen.

Attribute Name:  layout_gravity

Code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <Button

        android:id="@+id/button3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="left"

        android:text="Left" />

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="Center" />

    <Button

        android:id="@+id/button4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="right"

        android:text="Right" />

    <Button

        android:id="@+id/button5"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:text="Center_horizontal" />

    <Button

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="bottom"

        android:text="Bottom" />

</LinearLayout>

Output:

5. Margin & Padding

In android, layout_margin attribute is used to set distance of object with other object or its parent (View or Activity). layout_padding attribute is used to set some space between object and its child (e.g. Text, image). You can set the padding and margin to all the sides (Left-Right-Top-Bottom) or any specific side of them. To grab the concept it, follow this example.

Attribute Name:  layout_margin & layout_padding

Code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical" >

    <Button

        android:id="@+id/Button01"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="left"

        android:minHeight="10dip"

        android:text="Padding None ; Margin None"

        android:textSize="15sp" />

    <Button

        android:id="@+id/Button02"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:gravity="left"

        android:minHeight="10dip"

        android:paddingLeft="30dp"

        android:text="Padding Left 30dp ; Margin None"

        android:textSize="15sp" />

    <Button

        android:id="@+id/button03"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="30dp"

        android:gravity="left"

        android:minHeight="10dip"

        android:text="Padding None ; Margin Left 30dp"

        android:textSize="15sp" />

    <ImageButton

        android:id="@+id/imageButton1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher" />

    <ImageButton

        android:id="@+id/imageButton2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:paddingLeft="30dp"

        android:src="@drawable/ic_launcher" />

    <ImageButton

        android:id="@+id/imageButton3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginLeft="30dp"

        android:src="@drawable/ic_launcher" />

</LinearLayout>

Output:

6. Layout Weight:

LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space is should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.

Attribute Name: layout_weight

Code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:gravity="center_horizontal"

    android:orientation="vertical"

    tools:context=".TestingActivity" >

    <EditText

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:hint="To" />

    <EditText

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1"

        android:hint="Subject" />

    <EditText

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="2"

        android:gravity="top"

        android:hint="Message" />

    <Button

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="0.5"

        android:text="Send" />

</LinearLayout>

Output:

Note: To put the space of each child equally, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1".

7.Nested Layout:

By now, you would have grabbed info about linear layout and its different attributes. Still, you are away from the concept of advance facility of layout. It's a Nested Layout. You can use multiple layouts (Using one in another) to create descent look of layout. Example for nested layout is given here.

Attribute Name:  - - - - -

Code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_marginTop="20dp"

    android:gravity="center_horizontal"

    android:orientation="vertical"

    tools:context=".TestingActivity" >

    <EditText

        android:id="@+id/editText4"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:ems="10"

        android:hint="FirstName"

        android:inputType="textPersonName" >

        <requestFocus />

    </EditText>

    <EditText

        android:id="@+id/editText2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:ems="10"

        android:hint="LastName"

        android:inputType="textPersonName" />

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_marginLeft="5dp"

        android:layout_marginTop="20dp" >

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Favorite One :"

            android:textSize="17sp" />

        <RadioButton

            android:id="@+id/radioButton1"

            android:layout_width="wrap_content"

            android:layout_marginLeft="15dp"

            android:layout_height="wrap_content"

            android:text="Android" />

        <RadioButton

            android:id="@+id/radioButton2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Apple" />

    </LinearLayout>

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="20dp"

        android:text="Next" />

</LinearLayout>

Output: