Layouts in Android

In this tutorial, we will have a look at different types of layouts in android. We will see how various layout attributes are set in order to arrange views in the screen. Let's begin with introduction to Layouts.

Layouts?

Layouts are used to define the arrangement of views in the screen. Mostly defined in XML, Layouts help us to build complex designs easily. We have different Layouts in android such as,

• LinearLayout
• RelativeLayout
• FrameLayout
• TableLayout

LinearLayout

As the name suggests LinearLayout is used for arranging views in linear fashion, either horizontally or vertically. Let's have a look at our Android Project that we created in previous tutorial.

Let's change the activity_main.xml file in res/layout folder to look like this.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"   
   android:orientation="vertical"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin"   
   >  
   <TextView android:text="@string/hello_world"   
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
   <Button android:text="Click Me"   
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
 </LinearLayout>  

Here, we used LinearLayout to arrange a TextView and a Button vertically. In LinearLayout we defined android:orientation attribute to be vertical. We can change that to horizontal to align the views horizontally.

RelativeLayout

RelativeLayout can be used when we have to align the view in relative positions. The position of a View can be relative to another view or the parent View. Lets add a Linear Layout inside the LinreaLayout, so that our activity_main.xml becomes.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   >  
   <TextView android:text="@string/hello_world"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
   <Button android:text="Click Me"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
   <RelativeLayout  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content">  
     <TextView  
       android:id="@+id/text"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"   
       android:text="Let's learn Android APP development"/>  
     <Button  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_below="@+id/text"  
       android:text="Get Started"/>  
   </RelativeLayout>  
 </LinearLayout>  

Here we used layout_below attribute to place Button below the Textview. Some of the major layout attributes that can be used to define positions are .

›layout:toLeftOf
›layout:toRightOf›
layout:below›layout:above›
layout:alignParentTop
›layout:alignParentBottom›
layout:alignParentLeft

 layout:alignParentBottom

You may try these attributes and arrange the layouts in different way.

FrameLayout

FrameLayout is used when we have only one child view, FrameLayout holds only one view and expands it to entire screen area. It is helpful to arrange view in such a way that it scales properly in different screen sizes.

Now, let's add a FrameLayout below RelativeLayout.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   >  
   <TextView android:text="@string/hello_world"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
   <Button android:text="Click Me"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
   <RelativeLayout  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content">  
     <TextView  
       android:id="@+id/text"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:text="Let's learn Android APP development"/>  
     <Button  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_below="@+id/text"  
       android:text="Get Started"/>  
   </RelativeLayout>  
   <FrameLayout  
     android:layout_width="match_parent"  
     android:layout_height="match_parent">  
     <ImageView  
       android:layout_width="match_parent"  
       android:layout_height="match_parent"  
       android:src="@drawable/headerbg"/>  
   </FrameLayout>  
 </LinearLayout>  

We used single View inside frameLayout, However we can also try adding multiple children to FrameLayout and align using layout:gravity attribute.

Table Layout

TableLayout is used to arrange the views in a tabular way in rows and columns. Let's try this code in our android_main.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   android:orientation="vertical"  
   android:paddingLeft="@dimen/activity_horizontal_margin"  
   android:paddingRight="@dimen/activity_horizontal_margin"  
   android:paddingTop="@dimen/activity_vertical_margin"  
   android:paddingBottom="@dimen/activity_vertical_margin"  
   >  
   <TextView android:text="@string/hello_world"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
   <Button android:text="Click Me"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" />  
   <RelativeLayout  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content">  
     <TextView  
       android:id="@+id/text"  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:text="Let's learn Android APP development"/>  
     <Button  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:layout_below="@+id/text"  
       android:text="Get Started"/>  
   </RelativeLayout>  
 <TableLayout  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content">  
   <TableRow  
     android:id="@+id/row1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:padding="5dip" >  
     <TextView  
       android:id="@+id/text1"  
       android:text="Column 1" />  
     <Button  
       android:id="@+id/btn1"  
       android:text="Column 2" />  
     <Button  
       android:id="@+id/btn2"  
       android:text="Column 2" />  
   </TableRow>  
   <TableRow  
     android:id="@+id/row2"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:padding="5dip" >  
     <TextView  
       android:id="@+id/text2"  
       android:text="Column 1"/>  
     <Button  
       android:id="@+id/btn3"  
       android:text="Column 2"  
       android:layout_span="2"/>  
     <Button  
       android:id="@+id/btn4"  
       android:text="Column 2" />  
   </TableRow>  
 </TableLayout>  
 </LinearLayout>  

Here, we used TableLayout with TableRow element to define rows. We have two TableRow that makes a table with two rows.
We can also see Button on the second row has android:layout_span attribute to for defining the column span. The span value 2 makes the button span across two column as seen below.

We just saw different types of layouts. In the next tutorial we will see how we can organize various resources.