Learn About Android Layouts

Introduction

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

Linear Layout
Relative Layout
Table Layout
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>

8 Comments

Join the conversation! Your thoughts help the community grow.

Santhakumar Munuswamy11y ago
Thanks for sharing
Manoj Kulkarni11y ago
Nice article
Sibeesh Venu11y ago
Good one.
Neeraj Kumar11y ago
One is Table Row layout but basically it is use with TableLayout .you can use single TableRow Layout Directly
Gopi Chand11y ago
Good one Neeraj
Neeraj Kumar11y ago
Thank You Sandeep
- Sandeep Singh Shekhawat11y ago
  one doubt, you mentioned 6 types layout but list showing only 4. If you include vertically separate then it will be 5. could you please correct me what is real thing?
Sandeep Singh Shekhawat11y ago
It's nice and helpful. Looking more from your side. Thanks for sharing this one.