Learn About Android Layouts

Introduction

Android has the following six types of layout in mobile applications:

1. Linear Layout
2. Relative Layout
3. Table Layout
4. Frame Layout

1. Linear Layout

First create layout XML of linear name.

Figure 1: Create Layout XML

Delete the default code in the XML file then open the graphical layout and drag a Linear Layout (Vertical ) or Linear Layout (Horizontal).


Figure 2: Graphical Layout


Figure 3: Drag LinearLayout

After dragging any one of them then go to the code in the XML file and see.

For LinearLayout (Vertical):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

</LinearLayout>
for Lu=inearLayout(Horizontal)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >


</LinearLayout>

So LinearLayout (Horizontal) is the default LinearLayout, but you can change the layout by editing the code: 

android:orientation="vertical"
“Vertical” replace by Horizontal or delete this line then vertical convert into horizontal layout

2. Relative Layout

The relative Layout is the default layout when we create activity.

Relative is easy to use for adjusting the element in the layout.

In a relative layout every element arranges itself relative to other elements or a parent element.

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.layouts.RelativeMainActivity" >

</RelativeLayout>

Example


Figure 4: Relative Layout


Figure 5: Relative Layout code

3. Table Layout

The Table Layout works as a HTML table in Android. In the Table Layout you can divide the layout into rows and columns. It is also easy to understand.


Figure 6: Table Layout

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

     >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Row1Col1"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:background="#b0b0b0"
            android:textColor="#0000bb"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/textView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Row1Col2"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:background="#b0b0b0"
            android:textColor="#00bb00"
            android:layout_weight="1"/>

    </TableRow>

    <TableRow
        android:id="@+id/tableRow2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"

    >

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Row2Col1"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:background="#b0b0b0"
            android:textColor="#bb0000"
            android:layout_weight="1"/>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#b0b0b0"
            android:text="Row2Col2"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#0000b0"
            android:layout_weight="1" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Row2Col3"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:background="#b0b0b0"
            android:textColor="#00b00b"
            android:layout_weight="1"
            />

    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Row3Col1"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:background="#b0b0b0"
            android:textColor="#00bb00"
            android:layout_weight="1"/>

    </TableRow>

</TableLayout>

4. Frame Layout

The Frame Layout is a flexible layout for changing the height and width of elements. It gives us the facility to overlap elements with each other, such as Text on an image.


Figure 7: Frame Layout

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="262dp"
        android:src="@drawable/ic_launcher" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="226dp"
        android:gravity="center_vertical|center_horizontal"
        android:text="Frame Layout"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="35sp" />

</FrameLayout>