In this post I will be discussing about the different view layouts in an android mobile application. The six different layouts are

1. Linear Layout
2. Relative Layout
3. Table Layout
4. Grid View
5. Tab Layout
6. List View

Download Code

Android allows you to create view layouts using simple XML file (we can also create a layout using java code). All the layouts must be placed in /res/layout folder.

Android Layout Directory

Okay, now lets get started with the view layouts.

 

1. Linear Layout

In a linear layout, like the name suggests, all the elements are displayed in a linear fashion(below is an example of the linear layouts), either Horizontally or Vertically and this behavior is set in android:orientation which is an attribute of the node LinearLayout.

Example of Vertical layout snippet

<LinearLayout android:orientation="vertical"> .... </LinearLayout>

Example of Horizontal layout snippet

<LinearLayout android:orientation="horizontal"> .... </LinearLayout>
Android Layout

Now that we know the two types of linear layouts, here are the steps you need to follow to create them

1. Create a new project File -> New -> Android Project
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “linear_layout.xml
res/layout -> Right Click -> New -> Android XML File
3. Now open newly created xml file (in my case “linear_layout.xml”) and type the following code.

<?xml version="1.0" encoding="utf-8"?>
<!-- Parent linear layout with vertical orientation -->
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  
  <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
  			android:text="Email:" android:padding="5dip"/>
  			
  <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"
  			android:layout_marginBottom="10dip"/>  			
  
  <Button android:layout_width="fill_parent" android:layout_height="wrap_content"
  			android:text="Login"/>
  
  <!-- Child linear layout with horizontal orientation -->
  <LinearLayout android:layout_width="fill_parent" 
                      android:layout_height="wrap_content"
  		      android:orientation="horizontal" android:background="#2a2a2a"
  		      android:layout_marginTop="25dip">
  				
  <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
  		 android:text="Home" android:padding="15dip" android:layout_weight="1"
  		 android:gravity="center"/>
  			
  <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
  		 android:text="About" android:padding="15dip" android:layout_weight="1"
  		 android:gravity="center"/>	
  
  </LinearLayout>
    
</LinearLayout>


4. To set this newly created view as the initial view of your app, Open your MainActivity.java file. You would see the following line inside the onCreate function setContentView(R.layout.main). Change R.layout.main to R.layout.yourlinearviewname. In my case its R.layout.linear_layout

package com.example.androidlayouts;
import android.app.Activity;
import android.os.Bundle;

public class AndroidLayoutsActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_layout);
    }
}

5. To run the application, right click on the project -> Run As -> 1. Android Application. You should see your newly created linear layout in the emulator.

Linear layout output

2. Relative Layout

In a relative layout every element arranges itself relative to other elements or a parent element.
As an example, lets consider the layout defined below. The “Cancel” button is placed relatively, to the right of the “Login” button parallely. Here is the code snippet that achieves the mentioned alignment (Right of Login button parallely)

Example code snippet

<Button android:id="@+id/btnLogin" ..></Button>

<Button android:layout_toRightOf="@id/btnLogin"
            android:layout_alignTop="@id/btnLogin" ..></Button>
Android relative layout

Here are the steps to create a relative layout

1. Create a new project File -> New -> Android Project
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “relative_layout.xml”
res/layout -> Right Click -> New -> Android XML File
3. Now open newly created xml file (in my case “relative_layout.xml”) and type the following code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content">

    <TextView android:id="@+id/label" android:layout_width="fill_parent" 
              android:layout_height="wrap_content" android:text="Email" />

    <EditText android:id="@+id/inputEmail" android:layout_width="fill_parent" 
              android:layout_height="wrap_content" android:layout_below="@id/label" />
  
    <Button android:id="@+id/btnLogin" android:layout_width="wrap_content"
    		android:layout_height="wrap_content" android:layout_below="@id/inputEmail"
            android:layout_alignParentLeft="true" android:layout_marginRight="10px"
            android:text="Login" />

    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
            android:layout_toRightOf="@id/btnLogin" 
            android:layout_alignTop="@id/btnLogin"  android:text="Cancel" />
            
    <Button android:layout_width="wrap_content" android:layout_height="wrap_content"
    		android:layout_alignParentBottom="true" android:text="Register new Account"
    		android:layout_centerHorizontal="true"/>
</RelativeLayout>

4. Same like before open your MainActivity.java file and set the layout to your newly created relative layout file. In my case its R.layout.relative_layout


        setContentView(R.layout.relative_layout);

5. To run the application, right click on the project -> Run As -> 1. Android Application. You should see your newly created relative layout in the emulator.

Relative layout output

3. Table Layout

Table layouts in Android works in the same way HTML table layouts work. You can divide your layouts into rows and columns. Its very easy to understand. The image below should give you an idea.

Table layout

1. Create a new project File -> New -> Android Project
2. In Package Explorer right click on res/layout folder and create a new Android XML File and name it as you wish. I am naming it as “table_layout.xml”
res/layout -> Right Click -> New -> Android XML File
3. Now open newly created xml file (in my case “table_layout.xml”) and type the following code.

<TableLayout  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff"> 
    <!-- Row 1 with single column --> 
    <TableRow  
        android:layout_height="wrap_content"  
        android:layout_width="fill_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:layout_width="match_parent" android:layout_height="wrap_content" 
            android:textSize="18dp" android:text="Row 1"  android:layout_span="3"
            android:padding="18dip" android:background="#b0b0b0" 
            android:textColor="#000"/>  
    </TableRow>  
    
    <!-- Row 2 with 3 columns -->
    <TableRow  
        android:id="@+id/tableRow1"  
        android:layout_height="wrap_content"  
        android:layout_width="match_parent">  
        <TextView  
            android:id="@+id/TextView04" android:text="Row 2 column 1" 
            android:layout_weight="1" android:background="#dcdcdc" 
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>  
        <TextView  
            android:id="@+id/TextView04" android:text="Row 2 column 2" 
            android:layout_weight="1" android:background="#d3d3d3" 
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
        <TextView  
            android:id="@+id/TextView04" android:text="Row 2 column 3" 
            android:layout_weight="1" android:background="#cac9c9" 
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
    </TableRow> 
    
    <!-- Row 3 with 2 columns -->
    <TableRow  
        android:layout_height="wrap_content"  
        android:layout_width="fill_parent"  
        android:gravity="center_horizontal">  
        <TextView  
            android:id="@+id/TextView04" android:text="Row 3 column 1" 
            android:layout_weight="1" android:background="#b0b0b0" 
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
            
        <TextView  
            android:id="@+id/TextView04" android:text="Row 3 column 2" 
            android:layout_weight="1" android:background="#a09f9f" 
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>  
    </TableRow>  
    
</TableLayout>

4. Same like before open your MainActivity.java file and set the layout to your newly created table layout file. In my case its R.layout.table_layout


        setContentView(R.layout.table_layout);

5. To run the application, right click on the project -> Run As -> 1. Android Application. You should see your newly created table layout in the emulator.

table layout output

I have just discussed Linear Layout, Relative Layout and Table Layout in this post. The remaining Grid View, Tab Layout and List View will be covered in the next article. Stay tuned!

Subscribe
Notify of
guest
188 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback

[…] my previous article Android Layouts i explained about three layouts (Linear Layout, Relative Layout and Table Layout). […]

Vijayamannava1
Vijayamannava1
9 years ago

Nice artical…thabkyou…

Tinhphit
Tinhphit
9 years ago
Reply to  Vijayamannava1

thanks so much

Vijayamannava1
Vijayamannava1
9 years ago

Nice Article…Thankyou

trackback

[…] my previous article Android Layouts i explained about three layouts (Linear Layout, Relative Layout and Table Layout). In this post i […]

Vijayamannava1
Vijayamannava1
9 years ago

Nice artical…thabkyou…

kk
kk
9 years ago

nice….easy to understnd with the help of digrams….!!!

Grsandhya
Grsandhya
9 years ago

superb easy to learn thanks

Android
Android
9 years ago

Owsum Post….

Ruthgicharu2
Ruthgicharu2
9 years ago

Nice!!! grateful for this post

X_bomb_x
X_bomb_x
9 years ago

Thx it very cool.

Thanh Trung
Thanh Trung
9 years ago

Thanks. This tutorial is very usefull!
Hope you have many tutorials like this.

Hobby 110
Hobby 110
9 years ago

Nice tutorial…

Gudeamit148
Gudeamit148
9 years ago

awesome man

Nm15
Nm15
9 years ago

Great work explaining this. Im taking an online Android class, and you covered this theme with far more clarity than the class im paying for.
Again thanks

Edie
Edie
9 years ago

U R awsome … Great job and amazing work

Asma Said
9 years ago

Amaaaaaaaaazing !

Madhu54108
Madhu54108
9 years ago

Splendid work
Explanation with images is the very good way..
Thank you

Raouabenfredj
Raouabenfredj
9 years ago

This tutorial is very clear, but when I put in a TableRow: 4 textview in the same colum colum and who is near him I just want to put 4 EditView. known me how I can achieve it.pleeeeeease :)))

Ravi Tamada
9 years ago
Reply to  Raouabenfredj

try to place a EditText after textview and see how it comes.

abbasi.android
abbasi.android
9 years ago
Reply to  Ravi Tamada

hi ,
i want to solve an expression , by using calculator in android
i just want to click the required numbers and operators
and want to solve the expression , in text view
hw could i?

Dung Nguyen
Dung Nguyen
9 years ago

thanks, but where is “4. Grid View, 5. Tab Layout, 6. List View”? More please

Ravi Tamada
9 years ago
Reply to  Dung Nguyen

I already wrote them. Please go through pagination of this blog.

Ramiz Mohamed
Ramiz Mohamed
9 years ago

Does not come any better than this. Much appreciated.

Ramiz Mohamed
Ramiz Mohamed
9 years ago

Very comprehensive but simple enough to understand. Well done.

Mahesh Anil Thokala
Mahesh Anil Thokala
8 years ago

[I18N] Hardcoded string “Email:”, should use @string resource.
i got these warnings how i can remove.please help me.

Ravi Tamada
8 years ago

Yes this warning is in new Android OS. You shouldn’t hard a string in XML instead you need to store the value in strings.xml and use that name here

Like When creating new project in default main.xml, there will be hello string (project title).

Mahesh Anil Thokala
Mahesh Anil Thokala
8 years ago
Reply to  Ravi Tamada

I got another warning “This text field does not specify an inputType or a hint” But output comes in emulator,thaaaanks alot,you helped me alot……….

Luis Alberto Baigorria Rodas
Luis Alberto Baigorria Rodas
8 years ago

Hi. Ravi Tamada! Do you have any example multi-touch with a image in Android. I need it! Please! Congratulations for Androidhive! Very Good examples! Regards from Santa Cruz, Bolivia!

Ravi Tamada
8 years ago

Hi Luis I haven’t prepared any multi-touch yet.

It might helps you
http://android-developers.blogspot.in/2010/06/making-sense-of-multitouch.html

Thank You for your support

Nguyen Long
8 years ago

Thank man! Help me a lot

ชาย บี้
8 years ago

Hey Ravi Tamada

What program you use to design picture

i want to use design my layout icon

Thank you ^^

Ravi Tamada
8 years ago

I use Adobe Illustrator and Photoshop.

ชาย บี้
8 years ago

Ravi Tamada

i have problem

i want to create custom Layout

LinearLayout ll = (LinearLayout) findViewById(R.id.linearLayoutTest);
setContentView(ll);

but error

you can help me?

thank you ^^

Manas
Manas
8 years ago

Really it is a demo that marked as superb. I am salute the author for a great job.
pls. keep it up

Nitesh Malviya
Nitesh Malviya
8 years ago

baap sir…..

yoj
yoj
8 years ago

thanks.. really helps..keep it up newbies here

Yakub
Yakub
8 years ago

Excellent….

Sameertm
Sameertm
8 years ago

sooooooooooperb

jitendra
jitendra
8 years ago

Great posted tutorial ..excellent ……………….

josue
8 years ago

Thanks man..Great tutorials

Mokamoddo
Mokamoddo
8 years ago

This is just perfect. Thanks RAVI. You’re the man.

Gandi Gangadhar
Gandi Gangadhar
8 years ago

xmlns means xml namespace…….., what is the use of it

Tuan
Tuan
8 years ago

Thank Ravi so much

Bad2Guy
Bad2Guy
8 years ago

thank for beginner

Mahalakshmi
Mahalakshmi
8 years ago

super

Sur
Sur
8 years ago

Best Android Tutorial site ever

mrexodia
8 years ago

Thanks a ton for your article, everything is clearly explained

Ravi Tamada
8 years ago
Reply to  mrexodia

You are welcome.

yungyung
yungyung
8 years ago

Thank you for working

Funjabiwala
Funjabiwala
8 years ago

u r the boss… i am really fan of this site..thanks a lot

516613535
516613535
8 years ago

the TableRow’s child TextView’s android:layout_width is match_parent,why it doesn’t fill up with its parent??

Siva Brahma
Siva Brahma
8 years ago

It is very nice simply superb.

Vijjumailto
Vijjumailto
8 years ago

thank u so much good article.

sumit garg
sumit garg
8 years ago

i want to know how to set Layouts using only java coding not by xml file.

CosmasE
8 years ago

Please how can bring all this table to start from the bottom up.

kartheek
kartheek
8 years ago

mind blowing, awesome, easy way to learn

Harish Thakur
Harish Thakur
8 years ago

good

Mitulgoti001
Mitulgoti001
8 years ago

very good sir ji

188
0
Would love your thoughts, please comment.x
()
x