Advertisements

Aatul Palandurkar

Working with Layouts in Android

Posted on: August 5, 2013

Objectives :

  • Which layouts does Android have?
  • How to implement a layout in Android?
  • How to use different layouts in Android?
  • How to use Linear Layout in Android?
  • How to use Relative Layout in Android?
  • How to use Absolute Layout in Android?
  • How to use Frame Layout in Android?
  • How to use Table Layout in Android?
  • How to use nested layouts in Android?
  • How to use a layout inside another layout in Android?

In Android, there are main five (5) layouts which are as follows;

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

Here I have used the same form controls/components in form to show how it looks in different layouts except Frame Layout.

Linear Layout in Android

Here I have used nested linear layout.

XML Code for Linear Layout :


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

<LinearLayout
 android:orientation="horizontal"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">

<TextView
 android:text="User Name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

<EditText
 android:width="100px"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

</LinearLayout>

<LinearLayout
 android:orientation="horizontal"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">

<TextView
 android:text="Password"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

<EditText
 android:width="100px"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

</LinearLayout>

</LinearLayout>

Here android:orientation=”vertical” will render controls in vertical manner and android:orientation=”horizontal” will render controls in horizontal manner.

Relative Layout in Android

Here in Relative layout we don’t need to nest layouts generally.

XML Code for Relative Layout :


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

<TextView
 android:id="@+id/userName"
 android:text="First Name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

<EditText
 android:id="@+id/editUserName"
 android:width="100px"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@id/userName"
 android:layout_below="@id/userName"/>

<EditText
 android:id="@+id/editpassword"
 android:width="100px"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@id/editUserName"
 android:layout_alignLeft="@id/editUserName"/>

<TextView
 android:id="@+id/password"
 android:text="Password"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_toLeftOf="@id/editpassword"
 android:layout_below="@id/editUserName" />

</RelativeLayout>

Here we need to specify android:layout_toLeftOf=”@id/controlId”, android:layout_toRightOf=”@id/controlId”, android:layout_below=”@id/controlId”, android:layout_alignLeft=”@id/controlId”, etc. parameters so as to render the control at particular place.

Absolute Layout in Android

Here in Absolute Layout we need to specify exact pixel location or (x,y) coordinate where we need to render our controls.

XML Code for Absolute Layout :

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

<TextView
 android:layout_x="10px"
 android:layout_y="110px"
 android:text="User Name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

<EditText
 android:layout_x="150px"
 android:layout_y="100px"
 android:width="100px"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

<TextView
 android:layout_x="10px"
 android:layout_y="160px"
 android:text="Password"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

<EditText
 android:layout_x="150px"
 android:layout_y="150px"
 android:width="100px"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

</AbsoluteLayout>

Table Layout in Android

Whenever you need to manage data in tabular manner, you can use Table Layout. Table Layout will help you to show data in rows and columns.
Here is the sample code showing how to use Table Layout :

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

<TableRow>

<TextView
 android:text="User Name"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="1" />

<EditText
 android:width="100px"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

</TableRow>

<TableRow>

<TextView
 android:text="Password"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_column="1" />

<EditText
 android:width="100px"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content" />

</TableRow>

</TableLayout>

Here in Table Layout, we use <TableRow> tag to add contents to a row same as that of HTML.

Frame Layout in Android

Frame Layout can be used to display various contents such as text, images, videos, image galleries, etc.
Sample code for Frame Layout is as follows :

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

<TextView
android:text="http://aatul.me"
android:textSize="24sp"
android:textColor="#000000"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>

</FrameLayout>
Advertisements

1 Response to "Working with Layouts in Android"

What purpose does just regurgitating/munging the official documentation with no explanation or break down possibly achieve other than to pollute google with more information likely to be out of date in no time? https://developer.android.com/guide/topics/ui/declaring-layout.html#CommonLayouts

Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Advertisements

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 8,346 other followers

Tweets

%d bloggers like this: