Learn About Android Layouts

Introduction

 
Android has the following six types of layout in mobile applications:
  1. Linear Layout
  2. Relative Layout
  3. Table Layout
  4. Frame Layout

1. Linear Layout

 
First, create layout XML of the linear name.
 
Figure 1: Create Layout XML
 
Delete the default code in the XML file then open the graphical layout and drag a Linear Layout (Vertical ) or Linear Layout (Horizontal).
 
Graphical Layout
 
Figure 2: Graphical Layout
 
Drag Linear Layout
 
After dragging any one of them then go to the code in the XML file and see.
 
For LinearLayout (Vertical):
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      
  2.     android:layout_width="fill_parent"      
  3.     android:layout_height="fill_parent"      
  4.     android:orientation="vertical" >      
  5.       
  6. </LinearLayout>      
  7. for Lu=inearLayout(Horizontal)      
  8. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      
  9.     android:layout_width="fill_parent"      
  10.     android:layout_height="fill_parent" >      
  11.       
  12.       
  13. </LinearLayout>   
    So LinearLayout (Horizontal) is the default LinearLayout, but you can change the layout by editing the code: 
    1. android:orientation="vertical"    
    2. “Vertical” replace by Horizontal or delete this line then vertical convert into a horizontal layout   

    2. Relative Layout

     
    The relative Layout is the default layout when we create activity.
     
    Relative is easy to use for adjusting the element in the layout.
     
    In a relative layout, every element arranges itself relative to other elements or a parent element.
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    2.     xmlns:tools="http://schemas.android.com/tools"    
    3.     android:layout_width="match_parent"    
    4.     android:layout_height="match_parent"    
    5.     android:paddingBottom="@dimen/activity_vertical_margin"    
    6.     android:paddingLeft="@dimen/activity_horizontal_margin"    
    7.     android:paddingRight="@dimen/activity_horizontal_margin"    
    8.     android:paddingTop="@dimen/activity_vertical_margin"    
    9.     tools:context="com.example.layouts.RelativeMainActivity" >    
    10.     
    11. </RelativeLayout>  
    Example
     
    Relative Layout
     
    Figure 3: Relative Layout
     
    Relative Layout code
     
    Figure 4: Relative Layout code
     

    3. Table Layout

     
    The Table Layout works as a HTML table in Android. In the Table Layout you can divide the layout into rows and columns. It is also easy to understand.
     
    Table Layout
     
    Figure 5: Table Layout
    1. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    2.     android:layout_width="wrap_content"    
    3.         
    4.     android:layout_height="wrap_content"    
    5.         
    6.      >    
    7.     
    8.     <TableRow    
    9.         android:id="@+id/tableRow1"    
    10.         android:layout_width="fill_parent"    
    11.         android:layout_height="wrap_content"    
    12.         android:gravity="center_horizontal" >    
    13.     
    14.         <TextView    
    15.             android:id="@+id/textView1"    
    16.             android:layout_width="wrap_content"    
    17.             android:layout_height="wrap_content"    
    18.             android:text="Row1Col1"    
    19.             android:textAppearance="?android:attr/textAppearanceLarge"    
    20.             android:background="#b0b0b0"    
    21.             android:textColor="#0000bb"    
    22.             android:layout_weight="1" />    
    23.     
    24.         <TextView    
    25.             android:id="@+id/textView8"    
    26.             android:layout_width="wrap_content"    
    27.             android:layout_height="wrap_content"    
    28.             android:text="Row1Col2"    
    29.             android:textAppearance="?android:attr/textAppearanceLarge"    
    30.             android:background="#b0b0b0"    
    31.             android:textColor="#00bb00"     
    32.             android:layout_weight="1"/>    
    33.     
    34.     </TableRow>    
    35.     
    36.     <TableRow    
    37.         android:id="@+id/tableRow2"    
    38.         android:layout_width="fill_parent"    
    39.         android:layout_height="wrap_content"    
    40.         android:gravity="center_horizontal"    
    41.             
    42.     >    
    43.     
    44.         <TextView    
    45.             android:id="@+id/textView2"    
    46.             android:layout_width="wrap_content"    
    47.             android:layout_height="wrap_content"    
    48.             android:text="Row2Col1"    
    49.             android:textAppearance="?android:attr/textAppearanceLarge"     
    50.             android:background="#b0b0b0"    
    51.             android:textColor="#bb0000"    
    52.             android:layout_weight="1"/>    
    53.     
    54.         <TextView    
    55.             android:id="@+id/textView3"    
    56.             android:layout_width="match_parent"    
    57.             android:layout_height="wrap_content"    
    58.             android:background="#b0b0b0"    
    59.             android:text="Row2Col2"    
    60.             android:textAppearance="?android:attr/textAppearanceLarge"    
    61.             android:textColor="#0000b0"    
    62.             android:layout_weight="1" />    
    63.     
    64.         <TextView    
    65.             android:id="@+id/textView4"    
    66.             android:layout_width="wrap_content"    
    67.             android:layout_height="wrap_content"    
    68.             android:text="Row2Col3"    
    69.             android:textAppearance="?android:attr/textAppearanceLarge"     
    70.             android:background="#b0b0b0"    
    71.             android:textColor="#00b00b"    
    72.             android:layout_weight="1"    
    73.             />    
    74.     
    75.     </TableRow>    
    76.     
    77.     <TableRow    
    78.         android:id="@+id/tableRow3"    
    79.         android:layout_width="fill_parent"    
    80.         android:layout_height="wrap_content"    
    81.         android:gravity="center_horizontal" >    
    82.     
    83.         <TextView    
    84.             android:id="@+id/textView7"    
    85.             android:layout_width="wrap_content"    
    86.             android:layout_height="wrap_content"    
    87.             android:text="Row3Col1"    
    88.             android:textAppearance="?android:attr/textAppearanceLarge"    
    89.             android:background="#b0b0b0"    
    90.             android:textColor="#00bb00"     
    91.             android:layout_weight="1"/>    
    92.     
    93.     </TableRow>    
    94.     
    95. </TableLayout>   

      4. Frame Layout

       
      The Frame Layout is a flexible layout for changing the height and width of elements. It gives us the facility to overlap elements with each other, such as Text on an image.
       
      Frame Layout
       
      Figure 6: Frame Layout
      1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    
      2.     android:layout_width="fill_parent"    
      3.     android:layout_height="fill_parent" >    
      4.     
      5.     <ImageView    
      6.         android:id="@+id/imageView1"    
      7.         android:layout_width="match_parent"    
      8.         android:layout_height="262dp"    
      9.         android:src="@drawable/ic_launcher" />    
      10.     
      11.     <TextView    
      12.         android:id="@+id/textView1"    
      13.         android:layout_width="match_parent"    
      14.         android:layout_height="226dp"    
      15.         android:gravity="center_vertical|center_horizontal"    
      16.         android:text="Frame Layout"    
      17.         android:textAppearance="?android:attr/textAppearanceLarge"    
      18.         android:textSize="35sp" />    
      19.     
      20. </FrameLayout>