layout

Android Linear Layout Example

lhfazry

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:

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

The result of above layout is:

Linear layout example
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:

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

The result of above layout is:

Linear layout example
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.

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

Here is the result:

Layout weight example
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.

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

Here is the result:

Layout weight example on vertical orientation
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:

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

Here is the result:

Layout margin example
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.

Android Relative Layout example

lhfazry

[cci]RelativeLayout[/cci] is one of android container or [cci]ViewGroup[/cci]. Like it’s name, the main feature of [cci]Relativelayout[/cci] is to place one [cci]View[/cci] relative to other [cci]View[/cci] or with it’s parent it’s self.

Place a view relative to other view

In order to make a relative position of one view to another view, an [cci]id[/cci] is must be defined in referred view. Says you have two [cci]TextView[/cci] in layout, you want second [cci]TextView[/cci] placed to the right of first [cci]TextView[/cci] but the top of second [cci]TextView[/cci] is place to bottom of first [cci]TextView[/cci]. To do this, you must define an [cci]id[/cci] to the first [cci]TextView[/cci].

<RelativeLayout 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">
 
    <TextView
        android:id="@+id/textView1"
        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:layout_toRightOf="@id/textView1"
        android:layout_below="@id/textView1"        
        android:text="@string/hay"
         />
</RelativeLayout>

In above source code, we have put 2 [cci]TextView[/cci]. The frist [cci]TextView[/cci] have an id [cci]textView1[/cci]. Now, take a look at hightlighted line of the above source code. The line [cci]android:layout_toRightOf=”@id/textView1″[/cci] means set the position of [cci]TextView[/cci] to the right of first [cci]TextView[/cci]. While [cci]android:layout_below=”@id/textView1″[/cci] means place second [cci]TextView[/cci] to the bottom of first [cci]TextView[/cci].
Here the result of above layout:

Relative layuot exampl
Relative layuot exampl

There are more attributes that can be used to make relative position between views. Here are the complete list:

  • [cci]android:layout_toLeftOf[/cci]
    Positions the right edge of this view to the left of the given anchor view ID.
  • [cci]android:layout_toRightOf[/cci]
    Positions the left edge of this view to the right of the given anchor view ID.
  • [cci]android:layout_above[/cci]
    Positions the bottom edge of this view above the given anchor view ID.
  • [cci]android:layout_below[/cci]
    Positions the bottom edge of this view below the given anchor view ID.
  • [cci]android:layout_alignBaseline[/cci]
    Positions the baseline of this view on the baseline of the given anchor view ID.
  • [cci]android:layout_alignLeft[/cci]
    Makes the left edge of this view match the left edge of the given anchor view ID.
  • [cci]android:layout_alignTop[/cci]
    Makes the top edge of this view match the top edge of the given anchor view ID.
  • [cci]android:layout_alignRight[/cci]
    Makes the right edge of this view match the right edge of the given anchor view ID.
  • [cci]android:layout_alignBottom[/cci]
    Makes the bottom edge of this view match the bottom edge of the given anchor view ID.
  • [cci]android:layout_toStartOf[/cci]
    Positions the end edge of this view to the start of the given anchor view ID.
  • [cci]android:layout_toEndOf[/cci]
    Positions the start edge of this view to the end of the given anchor view ID.
  • [cci]android:layout_alignStart[/cci]
    Makes the start edge of this view match the start edge of the given anchor view ID.
  • [cci]android:layout_alignEnd[/cci]
    Makes the end edge of this view match the end edge of the given anchor view ID.

Place a view relative to it’s parent

Another relative layout capability is place a view relative to it’s parent. This means you can make bottom edge of a view match bottom edge of its parent. Just add simple attribute [cci]android:layout_alignParentBottom=”true”[/cci] to your view then your view automatically aligned to its parent. I will give an example how to do this in code.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

Here the result of above layout:

Relative layout example
Relative layout example

Except [cci]android:layout_alignParentBottom=”true”[/cci], there are another attributes for aligning to parent. Here are complete list

  • [cci]android:layout_alignParentTop=”true”[/cci]
    If true, makes the top edge of this view match the top edge of the parent.
  • [cci]android:layout_alignParentLeft=”true”[/cci]
    If true, makes the left edge of this view match the left edge of the parent.
  • [cci]android:layout_alignParentRight=”true”[/cci]
    If true, makes the right edge of this view match the right edge of the parent.
  • [cci]android:layout_alignParentBottom=”true”[/cci]
    If true, makes the bottom edge of this view match the bottom edge of the parent.
  • [cci]android:layout_alignParentTop=”true”[/cci]
    If true, makes the top edge of this view match the top edge of the parent.
  • [cci]android:layout_alignParentStart=”true”[/cci]
    If true, makes the start edge of this view match the start edge of the parent.
  • [cci]android:layout_alignParentEnd=”true”[/cci]
    If true, makes the end edge of this view match the end edge of the parent.