Android UI Layouts Tutorial

1- What is Layout?

An Android layout is a class that handles arranging the way its children appear on the screen.  Anything that is a View (or inherits from View) can be a child of a layout. All of the layouts inherit from ViewGroup (which inherits from View) so you can nest layouts.  You could also create your own custom layout by making a class that inherits from ViewGroup.
The image below illustrates the inheritance hierarchy between views in Android.

2- The standard Layouts in Android

  • The standard Layouts:
Layout Description
LinearLayout


(Horizontal)

(Vertical)

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

RelativeLayout

RelativeLayout is a view group that displays child views in relative positions.

TableLayout

TableLayout is a view that groups views into rows and columns.

GridLayout

GridLayout uses a grid of infinitely-thin lines to separate its drawing area into: rows, columns, and cells. It supports both row and column spanning, which together allow a widget to occupy a rectangular range of cells that are next to each other.
FrameLayout

The FrameLayout is a placeholder on screen that you can use to display a single view.

AbsoluteLayout

AbsoluteLayout enables you to specify the exact location of its children. Arrange the children views according coordinates x, y.

  • The standard Containers:
Container Description
RadioGroup

 

ListView

 

GridView

 

ExpandableListView

 
ScrollView

 

HorizontalScrollView

 

SearchView

 

TabHost

 

VideoView

 
DialerFilter

 

3- Layout

3.1- RelativeLayout

RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance. If you find yourself using several nested LinearLayout groups, you may be able to replace them with a single RelativeLayout.
Please see the following interface, and you can design it using RelativeLayout.
  • SLIDER:

3.2- LinearLayout

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally. You can specify the layout direction with the android:orientation attribute.
Attributes:
Attribute Description
android:orientation This specifies the direction of arrangement and you will use "horizontal" for a row, "vertical" for a column. The default is horizontal.

Example:

Note: If the root element of the interface is not LinearLayout, you can change the name of the tag without having to change anything else, so you will have an interface with the root element is LinearLayout.
Sub-view in  LinearLayout has an important attributes: android: layout_weight.

android:layout_weight

This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.
The subcomponents that have weight will fill the remaining space of LinearLayout  in proportion to its weight.
With  LinearLayout (Vertical), subcomponents that have  android:width=fill_parent attribute will fill the width of LinearLayout (Vertical).
Subcomponents can also be set  a specific value for the width, height:
Distinguishing gravity and layout_gravity:
  • android:layout_gravity sets the gravity of the View or Layout in its parent.
  • android:gravity sets the gravity of the content of the View its used on (for example, Text). 

3.3- TableLayout

TableLayout is a ViewGroup that displays child View elements in rows and columns.
TableLayout positions its children into rows and columns. TableLayout containers do not display border lines for their rows, columns, or cells. The table will have as many columns as the row with the most cells. A table can leave cells empty, but cells cannot span vertical, as they can in HTML.
  • TableRow
TableRow objects are the child views of a TableLayout (each TableRow defines a single row in the table). Each row has zero or more cells, each of which is defined by any kind of other View. So, the cells of a row may be composed of a variety of View objects, like ImageView or TextView objects. A cell may also be a ViewGroup object (for example, you can nest another TableLayout as a cell).

Example:

Note: If the root element of the interface is not TableLayout, you can change the name of tag without having to change anything else, so you will have an interface with the root element is TableLayout.
TableRow will be automaticcally created (if that  row has not been existed) when you drag Subview to  the table cell.
Cells can span horizontally, but not vertically. There may be those cells do not contain any subView.
You can set a specific size for the View in cell, it will change the size of cell.
You can set  android:layout_gravity and   android:gravity attributes for views in cell. I have described in detail in LinearLayout.

3.4- GridLayout

GridLayout uses a grid of infinitely-thin lines to separate its drawing area into: rows, columns, and cells. It supports both row and column spanning, which together allow a widget to occupy a rectangular range of cells that are next to each other.
Sizes, Margins and Alignment/Gravity
In GridLayout, specifying sizes and margins is done just as with a LinearLayout. Alignment/gravity also works just like gravity in LinearLayout and uses the same constants: left, top, right, bottom, center_horizontal, center_vertical, center, fill_horizontal, fill_vertical and fill.
Flexibility
Unlike most grids in other toolkits, GridLayout does not associate data with rows or columns. Instead, everything to do with alignment and flexibility is associated with the components themselves.

The flexibility of columns is inferred from the gravity of the components inside the column. If every component defines a gravity, the column is taken as flexible, otherwise the column is considered inflexible

Example:

Note: If the root element of the interface is not GridLayout, you can change the name of card without having to change anything else, so you will have an interface with the root element is GridLayout.
Subcomponents determine its position in the grid according to the  layout_row & layout_column attributes:
Working principle with GridLayout is that you set subcomponents consecutively, then change its properties to achieve the desired, all obtained by the versatility of this layout.
With  GridLayout, if there is no object displaces grid column, the width of the grid at  which is 0. Similarly, if row does not be displaced by any objects, the height of the grid at which is 0.

layout_columnWeight

In GridLayout, layout_columnWeight attribute is weight by column of the object in the cell, it may affect the occupancy by column, the default value is 0.
If you specify a value different than 0 for layout_columnWeight, you need to set layout_gravity value for the object, this is mandatory, if not specify the layout_gravity value,  object can not be displayed on the grid :
  • The value for layout_gravity in this case is:       
    • left
    • right
    • center_horizontal
    • center
    • fill_horizontal
    • fill

layout_rowSpan

layout_rowWeight

In GridLayout, layout_rowWeight attribute is weight by row of the object in the cell, it may affect the occupancy by row, the default value is 0.

layout_columnSpan

OK, can you  use GridLayout to design interface as shown below?

3.5- FrameLayout

The FrameLayout is a placeholder on screen that you can use to display a single view.

Example:

Design following interface with FrameLayout:
Prepare an image file:
  • halong.png
Copy and paste to mipmap folder.
Drag and drop ImageView into the screen at left + top area.
Similarly drag and drop two TextView objects to screen:
Setting attributes allows ImageView fill the screen.
ImageView:
  • layout_width: fill_parent
  • layout_height: fill_parent
  • src: @mipmap/halong
Change attribute for TextView 1:
TextView 1:
  • layout_width: fill_parent
  • text: Halong Bay, Vietnam
  • layout_gravity:
    • top
    • left
  • layout_marginTop: 100dp
  • padding: 10dp
  • background: #d7cece
Change attribute for TextView 2:
TextView 2:
  • text: Photo by intrepidtravel.com
  • layout_gravity:
    • right
    • bottom
  • activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/imageView"
        android:layout_gravity="top|left"
        android:src="@mipmap/halong" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Halong Bay, Vietnam"
        android:id="@+id/textView"
        android:layout_gravity="top|left|center_vertical"
        android:layout_marginTop="100dp"
        android:background="#d7cece"
        android:padding="10dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Photo by intrepidtravel.com"
        android:id="@+id/textView2"
        android:layout_gravity="right|bottom" />

</FrameLayout>
Rerun application: