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

 

 

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 a 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 3: Relative Layout

 

 

Figure 4: 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 5: 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 6: 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>