Learn About Android Layouts

Neeraj Kumar
4y
8.2k
0
0

100

Article

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.