Understanding Layout

Understanding Layout Manager

 Android offers a collection of view classes which act as containers for views. These container classes are called layout and each implement specific strategy to manage the size and position of its children. The different types of Layout that are used are

 

• LinearLayout - The children are organized either Horizontally or Vertically. This a simple layout that is used in android application.
  
  Figure:- Linear Layout organized vertically.
  
  .xml code for Linear Layout organized Vertically.
  

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

   
  
  

  .xml code for Linear Layout organized Horizontally. 

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
     android:layout_width="fill_parent"  
     android:layout_height="fill_parent" >  
   <!-- add children here -->  
   </LinearLayout>  

  • Table Layout: - In Table layout the children are organized in a tabular fashion.
    
    Figure:- Table Layout with different Rows and Columns

.xml code for Table Layout with Three Rows

 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent" >  
   <TableRow  
     android:id="@+id/tableRow1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" >  
   </TableRow>  
   <TableRow  
     android:id="@+id/tableRow2"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" >  
   </TableRow>  
   <TableRow  
     android:id="@+id/tableRow3"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content" >  
   </TableRow>  
 </TableLayout>  

• Relative Layout:- The Relative layout organizes its children relative to one another or parent.

Figure :- Buttons are are arranged in relative fashion with respect to each other

.xml code for Relative Layout

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent" >  
   <Button  
     android:id="@+id/button1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignParentTop="true"  
     android:layout_centerHorizontal="true"  
     android:layout_marginTop="39dp"  
     android:text="Button" />  
   <Button  
     android:id="@+id/button2"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_below="@+id/button1"  
     android:layout_marginRight="18dp"  
     android:layout_marginTop="93dp"  
     android:layout_toLeftOf="@+id/button1"  
     android:text="Button" />  
   <Button  
     android:id="@+id/button3"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignBottom="@+id/button2"  
     android:layout_marginLeft="17dp"  
     android:layout_toRightOf="@+id/button1"  
     android:text="Button" />  
   <Button  
     android:id="@+id/button4"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:layout_alignLeft="@+id/button1"  
     android:layout_alignParentBottom="true"  
     android:layout_marginBottom="61dp"  
     android:layout_marginLeft="19dp"  
     android:text="Button" />  
 </RelativeLayout>  

• Frame Layout:- It is used to display a single item. we can use this layout to dynamically display a single view. We can even populate it with as many items, setting one to visible while the others are invisible.

Figure:- Frame Layout

.xml code for Frame Layout

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="fill_parent"  
   android:layout_height="fill_parent" >  
   <Button  
     android:id="@+id/button1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Button" />  
   <Button  
     android:id="@+id/button2"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:text="Button" />  
   <ImageView  
     android:id="@+id/imageView1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content"  
     android:src="@drawable/ic_launcher" />  
 </FrameLayout>  

As we can see, if we populate frame layout with many items, the items get stacked one above the other.