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:
Linear layout example
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:
Linear layout example
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:
Layout weight example
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:
Layout weight example on vertical orientation
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:
Layout margin example
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.
0 Comments