Understanding Android layouts

By

May 13, 2012AndroidNo comments

This is the part of Android Development series

1.What is Android ?
2.Hello world mobile application using android.
3.What is Android activity ?
4.Understanding Android layouts
5.Introduction to AndroidManifest file
6.Android programming using Intents

Our next step in android development is to know about the android layouts.An android layout is the UI part of the application designing where the layout specify the design and structure of the screen.If you want your application to be visually appealing you need to know the proper placement of controls which you can specify via layouts. An android layout is a XML file that can be found in Application path ->res->layout To create a new layout,File->new->Android XML file and Select layout option

Default view of the layout designer

Once you create layout file you can see the layout designer page where you can design your app screen based on the controls on the left to0lbar.In the default view the screen size is set for tablet which you can change from the dropdown.You can also change the android version at the top while checking the compatible views.

change the orientation and screensize

The layout file is actually an xml file but this is the Graphical version of the layout file which offers drag drop kind of designing.You can always switch to code view of the layout by clicking the filename.xml at the bottom. For example in graphical layout I am placing a button control and dropping in the screen and now the code behind is automatically generated when you click the xml file.

1
2
3
4
5
6
7
< ?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
   
</linearlayout>

This xml content is automatically generated by Eclipse. So here comes the actual part of learning:Layout designing There are five types of layouts

  • Linear Layout
  • Absolute Layout
  • Relative Layout
  • Frame Layout
  • Table Layout

 

Linear Layout:

In this type of layouts the elements can be placed continuously in either horizontal or vertical direction.

An example for linear layout with elements beings stacked vertically

 

 You can change the horizontal and vertical orientation using the toggle button above the screen.

 

Absolute Layout

 

Absolute layout follows the absolute positioning like in css.The controls can be placed free handed anywhere on the report withe the x,y co ordinates are based on the density pixels of the screen.So as a precautionary measure you need to check the absolute layout on on screen resolutions since it varies on different screen sizes.

 

 

Relative layout:

 

The control’s position will be relative to other or parent control.

 

Frame Layout

The elements in frame layout are stacked one above the other and forms a single view.It is more like z-ordering in css.

The text element is above the background image

Table Layout

Table layouts contain TableRow element that contains the columns.This layout forms the structure based on the table’s cell.The below example shows the table layout that has three columns and two rows.

Of all these type of layouts,while designing the UI part of the application you cannot always stick to one single layout but you need to nest these layouts to get a proper screen.If you are designing a simple login form in android you might use two layouts like linear and relative.

Resources:

Official Android Developer page

Droiddraw – Tool to design layouts online

Do you think this Android Development tutorial is useful ?? If Yes, Share/Comment below.You can also Get Regular Updates. Subscribe to Free RSS Feeds or Email Updates. Follow us on  Twitter @Devlup and Like us on Facebook.

Leave a Reply

*