Android Layouts explained with examples
Layouts are the design elements of any Application. Layouts in Android Provides the most basic parts of the UI.
Android-SDK provides few different Layouts, basic among them are:
1. Linear Layout (Vertical & Horizontal)
2. Relative Layout
3. Table Layout
Other Layouts include:
4. Grid Layout
5. Frame Layout
Note: This tutorial focuses on the Basic Layouts (Linear, Relative, Table).
Every Layout file should generally contain a main Layout called Parent Layout. Elements added to this Layout are child’s of this layout which inherits the properties of the Parent. Each child can also have its own properties. Properties of any (child or parent) are written as ‘attributes’ in xml – nodes.
All Layout files in android are grouped under a directory called ‘layout’ which is in ‘res’ (resource) directory of the application:
Project Directory > res > layout > layout.xml
Create a new Layout:
Click on ‘New’ >
then ‘Other…’ >
In the dialog box, under ‘Android’ directory select ‘Android XML File’ >
Click ‘Next’ >
Give the file a name with extension(.xml) ex: mylayout.xml,
you can select a Root Element from the list
(‘Linear Layout’ is selected by default) or directly Click on ‘Finish’.
Note: File-based resource names must contain only lowercase a-z, 0-9, or _.
In Android Layouts are the xml files. Android provides a Graphical Interface as well as the Code View to edit a Layout.
We take the basic and Mostly used Layouts and explain each of them:
1. Linear Layout:
As the name says all the ‘elements’ in the Linear Layout are arranged in Linear fashion (Vertically or Horizontally).
We can set the orientaion of a Linear Layout by setting the ‘orientation’ attribute to Vertical or Horizontal as shown below:
|
1
2
3
4
5
6
7
|
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:orientation=“vertical/horizontal” >
...
...
</LinearLayout>
|
Arrangement of the child’s in the Linear Layout (Vertical and Horizontal orientations) is shown below.
Example:
Lets take an example of creating a ‘Simple Login Screen’. Shown below is the final Output:
Here’s the xml code to get the above layout using ‘Linear Layout’:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“fill_parent”
android:layout_height=“fill_parent”
android:orientation=“vertical” >
<TextView
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_gravity=“center”
android:text=“Login”
android:textColor=“#999999”
android:textSize=“35dp” />
<!— Child LinearLayout 1 with horizoantal orientation —>
<LinearLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:layout_marginTop=“20dp”
android:gravity=“center”
android:orientation=“horizontal” >
<TextView
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:text=“User Name:”
android:textColor=“#999999”
android:textSize=“20dp” />
<EditText
android:layout_width=“150dp”
android:layout_height=“wrap_content”
android:hint=“User Name”
android:singleLine=“true” />
</LinearLayout>
<!— Child LinearLayout 2 with horizoantal orientation —>
<LinearLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:layout_marginTop=“20dp”
android:gravity=“center”
android:orientation=“horizontal” >
<TextView
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:text=“Password:”
android:textColor=“#999999”
android:textSize=“20dp” />
<EditText
android:layout_width=“150dp”
android:layout_height=“wrap_content”
android:hint=“Password”
android:inputType=“textPassword” />
</LinearLayout>
<Button
android:layout_width=“200dp”
android:layout_height=“wrap_content”
android:layout_gravity=“center”
android:layout_marginTop=“20dp”
android:text=“Login” />
</LinearLayout>
|
Explanation:
The Main Linear layout or the Parent has the vertical orientation and all the child’s in the Layout are vertically aligned. For the elements ‘User Name’ and ‘Password’ to show their corresponding ‘Edit Text’ boxes to the left we placed them in a separate Linear Layouts (child layouts) and gave the ‘horizontal’ orientation.
Before going forward lets know about the ‘layout weight’ property:
The concept of ‘weight’ is best explained here: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
(after going through the above link): Alternatively we can give the ‘weight sum’ to the parent and distribute the weight equally to all the child’s.
Tip: If weight sum is not specified for any layout then then ‘weight sum’ is the sum of all the weights of the child’s.
2. Relative Layout:
As the name says each ‘element’ in the Relative Layout is arranged Relative either to ‘parent’ or to other ‘elements’ in the Layout.
Relative Layout is generally defined as shown below:
|
1
2
3
4
5
6
|
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent” >
...
...
</RelativeLayout>
|
Arrangement of the child’s in the Relative Layout is shown below:
Example:
To cleanly understand the difference in using the Linear Layout to Relative Layout and vice versa, lets take the same example of Linear Layout and create a ‘Simple Login Screen’. Screen shot of the final output is the same as the above.
Here’s the xml code to get the above layout using ‘Relative Layout’:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“fill_parent”
android:layout_height=“fill_parent” >
<TextView
android:id=“@+id/textView1”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:layout_centerHorizontal=“true”
android:text=“Login”
android:textColor=“#999999”
android:textSize=“35dp” />
<!— Child RelativeLayout 1 —>
<RelativeLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
android:id=“@+id/relativeLayout1”
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:layout_below=“@+id/textView1”
android:layout_marginTop=“20dp”
android:gravity=“center” >
<TextView
android:id=“@+id/textView2”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:text=“User Name:”
android:textColor=“#999999”
android:textSize=“20dp” />
<EditText
android:id=“@+id/editText1”
android:layout_width=“150dp”
android:layout_height=“wrap_content”
android:layout_alignBaseline=“@+id/textView2”
android:layout_toRightOf=“@+id/textView2”
android:hint=“User Name”
android:singleLine=“true” />
</RelativeLayout>
<!— Child RelativeLayout 2 —>
<RelativeLayout
xmlns:android=“http://schemas.android.com/apk/res/android”
android:id=“@+id/relativeLayout2”
android:layout_width=“fill_parent”
android:layout_height=“wrap_content”
android:layout_below=“@+id/relativeLayout1”
android:layout_marginTop=“20dp”
android:gravity=“center” >
<TextView
android:id=“@+id/textView3”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:text=“Password:”
android:textColor=“#999999”
android:textSize=“20dp” />
<EditText
android:id=“@+id/editText2”
android:layout_width=“150dp”
android:layout_height=“wrap_content”
android:layout_alignBaseline=“@+id/textView3”
android:layout_toRightOf=“@+id/textView3”
android:hint=“Password”
android:inputType=“textPassword” />
</RelativeLayout>
<Button
android:id=“@+id/login”
android:layout_width=“200dp”
android:layout_height=“wrap_content”
android:layout_below=“@+id/relativeLayout2”
android:layout_centerHorizontal=“true”
android:layout_marginTop=“20dp”
android:text=“Login” />
</RelativeLayout>
|
Explanation:
Here as mentioned earlier all the elements in the layout are generally aligned either relative to parent or to the other elements in the layout, example:
1. ‘id:editText1′ is aligned to the right of the ‘id:textView2′ (android:layout_toRightOf=”@+id/textView2″) & we are also base lining the edit text ‘id:editText1′ with text view ‘id:textView2′ (android:layout_alignBaseline=”@+id/textView2″).
2. ‘id: login’ Button is aligned below ‘id:relativeLayout2′ (android:layout_below=”@+id/relativeLayout2″) & it is also aligned center horizontally in the parent (android:layout_centerHorizontal=”true”).
3. Table Layout:
Table Layout is like any HTML Table, which contains Rows and Columns. We can customize each row by setting different properties for the row and to the row elements.
Table Layout is generally defined as shown below:
|
1
2
3
4
5
6
|
<TableLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:layout_width=“match_parent”
android:layout_height=“match_parent” >
...
...
</TableLayout>
|
Arrangement of the child’s in the Table Layout is shown below:
Example:
Lets create a Table Layout that contains different rows and columns as shown below:
Here’s the xml code to get the above layout using ‘Relative Layout’:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
<TableLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:id=“@+id/tableLayout1”
android:layout_width=“match_parent”
android:layout_height=“match_parent”
android:shrinkColumns=“*”
android:stretchColumns=“*” >
<!— Row 1 with 3 columns —>
<TableRow
android:id=“@+id/tableRow1”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:padding=“2dip” >
<Button
android:id=“@+id/button1”
android:layout_weight=“1”
android:text=“Row 1 Column 1” />
<Button
android:id=“@+id/button2”
android:layout_weight=“1”
android:text=“Row 1 Column 2” />
<Button
android:id=“@+id/button3”
android:layout_weight=“1”
android:text=“Row 1 Column 3” />
</TableRow>
<!— Row 2 with 2 columns —>
<TableRow
android:id=“@+id/tableRow2”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:padding=“2dip” >
<Button
android:id=“@+id/button4”
android:text=“Row 2 Column 1” />
<Button
android:id=“@+id/button5”
android:text=“Row 2 Column 2” />
</TableRow>
<!— seperator line —>
<View
android:layout_height=“2dip”
android:background=“#0000FF” />
<!— Row 3 with 1 column / column set to 2 (starts from 0) —>
<TableRow
android:id=“@+id/tableRow3”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:padding=“2dip” >
<Button
android:id=“@+id/button6”
android:layout_column=“2”
android:layout_weight=“1”
android:text=“Row 3 Column 3” />
</TableRow>
<!— Row 4 with 2 columns / columns set to 1 & 2 (starts from 0) —>
<TableRow
android:id=“@+id/tableRow4”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:padding=“2dip” >
<Button
android:id=“@+id/button7”
android:layout_column=“1”
android:layout_weight=“1”
android:text=“Row 4 Column 2” />
<Button
android:id=“@+id/button8”
android:layout_column=“2”
android:layout_weight=“1”
android:text=“Row 4 Column 3” />
</TableRow>
<!— seperator line —>
<View
android:layout_height=“2dip”
android:background=“#0000FF” />
<!— Row 5 with span = 3 —>
<TableRow
android:id=“@+id/tableRow5”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:padding=“2dip” >
<Button
android:id=“@+id/button9”
android:layout_span=“3”
android:layout_weight=“1”
android:text=“Row 5 with span = 3” />
</TableRow>
<!— Row 6 with span = 2 and column set to 1 (starts form 0) —>
<TableRow
android:id=“@+id/tableRow6”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:padding=“2dip” >
<Button
android:id=“@+id/button10”
android:layout_column=“1”
android:layout_span=“2”
android:layout_weight=“1”
android:text=“Row 6 with span = 2” />
</TableRow>
<!— seperator line —>
<View
android:layout_height=“2dip”
android:background=“#0000FF” />
<!— Row 7 with 2 columns and with equal weights —>
<TableRow
android:id=“@+id/tableRow7”
android:layout_width=“wrap_content”
android:layout_height=“wrap_content”
android:padding=“2dip” >
<Button
android:id=“@+id/button11”
android:layout_weight=“1”
android:text=“Row 7 Column 1” />
<Button
android:id=“@+id/button12”
android:layout_weight=“1”
android:text=“Row 7 Column 2” />
</TableRow>
</TableLayout>
|
Explanation:
Here in the above table layout we need to know some of the properties like: layout_span and layout_column
layout_span: used to set the number of columns the element will occupy.
layout_column: used to specify the column number from which the element starts from.
