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" >
  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" >
  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" >
    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"
    4. android:layout_height="wrap_content"
    6. >
    8. <TableRow
    9. android:id="@+id/tableRow1"
    10. android:layout_width="fill_parent"
    11. android:layout_height="wrap_content"
    12. android:gravity="center_horizontal" >
    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" />
    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"/>
    34. </TableRow>
    36. <TableRow
    37. android:id="@+id/tableRow2"
    38. android:layout_width="fill_parent"
    39. android:layout_height="wrap_content"
    40. android:gravity="center_horizontal"
    42. >
    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"/>
    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" />
    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. />
    75. </TableRow>
    77. <TableRow
    78. android:id="@+id/tableRow3"
    79. android:layout_width="fill_parent"
    80. android:layout_height="wrap_content"
    81. android:gravity="center_horizontal" >
    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"/>
    93. </TableRow>
    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" >
      5. <ImageView
      6. android:id="@+id/imageView1"
      7. android:layout_width="match_parent"
      8. android:layout_height="262dp"
      9. android:src="@drawable/ic_launcher" />
      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" />
      20. </FrameLayout>