Android Linear Layout Example

Linear Layout is an android View Group that aligns all children in single oriented manner, vertically or horizontally. A Linear layout can have only one orientation, only vertical or only horizontal. The orientation can be specified by using attribute [cci]android:orientation[/cci].

Horizontal Orientation

By default, if you don’t specify the attribute [cci]android:orientation[/cci], the orientation of linear layout will be horizontal. But you can put [cci]android:orientation=”horizontal”[/cci] to set horizontal orientation. For example:

[sourcecode lang=”xml”]
<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" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world2"
/>
</LinearLayout>
[/sourcecode]

The result of above layout is:

Vertical Orientation

To set the orieantation of linear layout to vertical, add [cci]android:orientation=”vertical”[/cci] to the View Group. For example:

[sourcecode lang=”xml”]
<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" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world1"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world2"
/>
</LinearLayout>
[/sourcecode]

The result of above layout is:

 

Flexible Width or Hight of Children

Linear Layout support flexibility of width or height for its child to consume remaining space in the parent. Flexible width only supported in horizontal orientation and flexible height only supported in vertical orietation. Use [cci]android:layout_weight[/cci] to make a child flexible. The value of the attribute is an integer value. The larger number of [cci]android:layout_weight[/cci] of a child, it consumes more extra space in the parent. Default value of the attributes in 0.

Flexible Width in Horizontal Orientation

To make width of a child flexible, you must set it width to [cci]0dp[/cci] and layout_weight greater than 0.

[sourcecode lang=”xml” highlith=”15,17″]
<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" >

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

<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/button2" />

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

/>
</LinearLayout>
[/sourcecode]

Here is the result:

Flexible Height in Vertical Orientation

To make height of a child flexible, you must set it height to [cci]0dp[/cci] and layout_weight greater than 0.

[sourcecode lang=”xml” highlight=”16,17″]
<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/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button1" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="@string/button2" />

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

/>
</LinearLayout>
[/sourcecode]

Here is the result:

Setting margin to child

Linear Layout respects to margin attribute on child. To set margin, using [cci]android:layout_margin[/cci]. This attribute will apply to all 4 sides, top, right,bottom and left. If you need just apply margin with specified side, you can use [cci]android:layout_marginLeft[/cci],[cci]android:layout_marginTop[/cci],[cci]android:layout_marginRight[/cci],[cci]android:layout_marginBottom[/cci]. Note, you must put margin value in [cci]dp[/cci] unit.
Here is an example:

[sourcecode lang=”xml” highlight=”17″]
<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/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button1" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="@string/button2" />

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

/>
</LinearLayout>
[/sourcecode]

Here is the result:

Setting gravity to child

Another feature of Linear Layout is gravity of a child. Gravity is an aligment of child with its parent. I will give tutorial about gravity in the next tutorial.