o7planning

Android UI Layouts Tutorial with Examples

  1. What is Layout?
  2. The standard Layouts in Android
  3. RelativeLayout
  4. LinearLayout
  5. TableLayout
  6. GridLayout
  7. FrameLayout

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. 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:

4. LinearLayout

LinearLayout is a ViewGroup that arranges the child View(s) in a single direction, either vertically or horizontally.

5. TableLayout

TableLayout arranges the View(s) in table format. Specifically, TableLayout is a ViewGroup containing one or more TableRow(s). Each TableRow is a row in the table containing cells. Child View(s) can be placed in one cell or in a merged cell from adjacent cells of a row. Unlike tables in HTML, you cannot merge consecutive cells in the one column.

6. 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, this means it is possible to merge adjacent cells into a large cell (a rectangle) to contain a View.
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, Android 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:
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?

7. FrameLayout

FrameLayout is a simple layout. It can contain one or more child View(s), and they can overlap each other. Therefore, the android:layout_gravity attribute is used to locate the child View(s).
Use the android:layout_gravity attribute to adjust the button position.

Android Programming Tutorials

Show More

Android Programming Tutorials

Show More

Newest Articles

Show More