Android - UI Layouts
The basic building block for user interface is a View object which is created from the
View class and occupies a rectangular area on the screen and is responsible for
drawing and event handling. View is the base class for widgets, which are used to
create interactive UI components like buttons, text fields, etc.
The ViewGroup is a subclass of View and provides invisible container that hold other
Views or other ViewGroups and define their layout properties.
At third level we have different layouts which are subclasses of ViewGroup class and a
typical layout defines the visual structure for an Android user interface and can be
created either at run time using View/ViewGroup objects or you can declare your
layout using simple XML file main_layout.xml which is located in the res/layout folder
of your project.
Layout params
This tutorial is more about creating your GUI based on layouts defined in XML file. A
layout may contain any type of widgets such as buttons, labels, textboxes, and so on.
Following is a simple example of XML file having LinearLayout –
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a Button" />
<!-- More GUI components go here -->
</LinearLayout>
Once your layout has created, you can load the layout resource from your application
code, in your [Link]() callback implementation as shown below −
public void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
}
Android Layout Types
There are number of Layouts provided by Android which you will use in almost all the
Android applications to provide different view, look and feel.
[Link] Layout & Description
1 Linear Layout
LinearLayout is a view group that aligns all children in a single direction, vertically
or horizontally.
2 Relative Layout
RelativeLayout is a view group that displays child views in relative positions.
3 Table Layout
TableLayout is a view that groups views into rows and columns.
4 Absolute Layout
AbsoluteLayout enables you to specify the exact location of its children.
5 Frame Layout
The FrameLayout is a placeholder on screen that you can use to display a single
view.
6 List View
ListView is a view group that displays a list of scrollable items.
7 Grid View
GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.
Layout Attributes
Each layout has a set of attributes which define the visual properties of that layout.
There are few common attributes among all the layouts and their are other attributes
which are specific to that layout. Following are common attributes and will be applied to
all the layouts:
[Link] Attribute & Description
1 android:id
This is the ID which uniquely identifies the view.
2 android:layout_width
This is the width of the layout.
3 android:layout_height
This is the height of the layout
4 android:layout_marginTop
This is the extra space on the top side of the layout.
5 android:layout_marginBottom
This is the extra space on the bottom side of the layout.
6 android:layout_marginLeft
This is the extra space on the left side of the layout.
7 android:layout_marginRight
This is the extra space on the right side of the layout.
8 android:layout_gravity
This specifies how child Views are positioned.
9 android:layout_weight
This specifies how much of the extra space in the layout should be allocated to
the View.
10 android:layout_x
This specifies the x-coordinate of the layout.
11 android:layout_y
This specifies the y-coordinate of the layout.
12 android:layout_width
This is the width of the layout.
13 android:paddingLeft
This is the left padding filled for the layout.
14 android:paddingRight
This is the right padding filled for the layout.
15 android:paddingTop
This is the top padding filled for the layout.
16 android:paddingBottom
This is the bottom padding filled for the layout.
Here width and height are the dimension of the layout/view which can be specified in
terms of dp (Density-independent Pixels), sp ( Scale-independent Pixels), pt ( Points
which is 1/72 of an inch), px( Pixels), mm ( Millimeters) and finally in (inches).
You can specify width and height with exact measurements but more often, you will
use one of these constants to set the width or height −
android:layout_width=wrap_content tells your view to size itself to the
dimensions required by its content.
android:layout_width=fill_parent tells your view to become as big as its parent
view.
Gravity attribute plays important role in positioning the view object and it can take one
or more (separated by '|') of the following constant values.
Constant Value Description
top 0x30 Push object to the top of its container, not changing its
size.
bottom 0x50 Push object to the bottom of its container, not changing
its size.
left 0x03 Push object to the left of its container, not changing its
size.
right 0x05 Push object to the right of its container, not changing its
size.
center_vertical 0x10 Place object in the vertical center of its container, not
changing its size.
fill_vertical 0x70 Grow the vertical size of the object if needed so it
completely fills its container.
center_horizontal 0x01 Place object in the horizontal center of its container, not
changing its size.
fill_horizontal 0x07 Grow the horizontal size of the object if needed so it
completely fills its container.
center 0x11 Place the object in the center of its container in both the
vertical and horizontal axis, not changing its size.
fill 0x77 Grow the horizontal and vertical size of the object if
needed so it completely fills its container.
clip_vertical 0x80 Additional option that can be set to have the top and/or
bottom edges of the child clipped to its container's
bounds. The clip will be based on the vertical gravity: a
top gravity will clip the bottom edge, a bottom gravity will
clip the top edge, and neither will clip both edges.
clip_horizontal 0x08 Additional option that can be set to have the left and/or
right edges of the child clipped to its container's bounds.
The clip will be based on the horizontal gravity: a left
gravity will clip the right edge, a right gravity will clip the
left edge, and neither will clip both edges.
start 0x00800003 Push object to the beginning of its container, not
changing its size.
end 0x00800005 Push object to the end of its container, not changing its
size.
View Identification
A view object may have a unique ID assigned to it which will identify the View uniquely
within the tree. The syntax for an ID, inside an XML tag is −
android:id="@+id/my_button"
Following is a brief description of @ and + signs −
The at-symbol (@) at the beginning of the string indicates that the XML parser
should parse and expand the rest of the ID string and identify it as an ID
resource.
The plus-symbol (+) means that this is a new resource name that must be
created and added to our resources. To create an instance of the view object
and capture it from the layout, use the following −
Button myButton = (Button) findViewById([Link].my_button);
Android Table Layout
Android TableLayout going to be arranged groups of views into rows and columns. You
will use the <TableRow> element to build a row in the table. Each row has zero or
more cells; each cell can hold one View object.
TableLayout containers do not display border lines for their rows, columns, or cells.
TableLayout Attributes
Following are the important attributes specific to TableLayout −
[Link]. Attribute & Description
1
android:id
This is the ID which uniquely identifies the layout.
2
android:collapseColumns
This specifies the zero-based index of the columns to collapse. The column indices must
be separated by a comma: 1, 2, 5.
3
android:shrinkColumns
The zero-based index of the columns to shrink. The column indices must be separated
by a comma: 1, 2, 5.
4
android:stretchColumns
The zero-based index of the columns to stretch. The column indices must be separated
by a comma: 1, 2, 5.
Following is the content of the modified main activity
file src/[Link]/[Link].
package [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
}
}
Following will be the content of res/layout/activity_main.xml file −
<TableLayout
xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<TextClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textClock"
android:layout_column="2" />
</TableRow>
<TableRow>
<TextView
android:text="First Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<EditText
android:width="200px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<TextView
android:text="Last Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ratingBar"
android:layout_column="2" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:id="@+id/button"
android:layout_column="2" />
</TableRow>
</TableLayout>
Following will be the content of res/values/[Link] to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">HelloWorld</string>
<string name="action_settings">Settings</string>
</resources>
Android Relative Layout
Android RelativeLayout enables you to specify how child views are positioned relative
to each other. The position of each view can be specified as relative to sibling elements
or relative to the parent.
Relative Layout
RelativeLayout Attributes
Following are the important attributes specific to RelativeLayout −
[Link]. Attribute & Description
1
android:id
This is the ID which uniquely identifies the layout.
2
android:gravity
This specifies how an object should position its content, on both the X and Y axes.
Possible values are top, bottom, left, right, center, center_vertical, center_horizontal
etc.
3
android:ignoreGravity
This indicates what view should not be affected by gravity.
Using RelativeLayout, you can align two elements by right border, or make one below
another, centered in the screen, centered left, and so on. By default, all child views are
drawn at the top-left of the layout, so you must define the position of each view using
the various layout properties available from [Link] and few of
the important attributes are given below −
[Link]. Attribute & Description
1
android:layout_above
Positions the bottom edge of this view above the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name"
2
android:layout_alignBottom
Makes the bottom edge of this view match the bottom edge of the given anchor view
ID and must be a reference to another resource, in the form
"@[+][package:]type:name".
3
android:layout_alignLeft
Makes the left edge of this view match the left edge of the given anchor view ID and
must be a reference to another resource, in the form "@[+][package:]type:name".
4
android:layout_alignParentBottom
If true, makes the bottom edge of this view match the bottom edge of the parent.
Must be a boolean value, either "true" or "false".
5
android:layout_alignParentEnd
If true, makes the end edge of this view match the end edge of the parent. Must be a
boolean value, either "true" or "false".
6
android:layout_alignParentLeft
If true, makes the left edge of this view match the left edge of the parent. Must be a
boolean value, either "true" or "false".
7
android:layout_alignParentRight
If true, makes the right edge of this view match the right edge of the parent. Must be
a boolean value, either "true" or "false".
8
android:layout_alignParentStart
If true, makes the start edge of this view match the start edge of the parent. Must be
a boolean value, either "true" or "false".
9
android:layout_alignParentTop
If true, makes the top edge of this view match the top edge of the parent. Must be a
boolean value, either "true" or "false".
10
android:layout_alignRight
Makes the right edge of this view match the right edge of the given anchor view ID
and must be a reference to another resource, in the form
"@[+][package:]type:name".
11
android:layout_alignStart
Makes the start edge of this view match the start edge of the given anchor view ID
and must be a reference to another resource, in the form
"@[+][package:]type:name".
12
android:layout_alignTop
Makes the top edge of this view match the top edge of the given anchor view ID and
must be a reference to another resource, in the form "@[+][package:]type:name".
13
android:layout_below
Positions the top edge of this view below the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name".
14
android:layout_centerHorizontal
If true, centers this child horizontally within its parent. Must be a boolean value, either
"true" or "false".
15
android:layout_centerInParent
If true, centers this child horizontally and vertically within its parent. Must be a
boolean value, either "true" or "false".
16
android:layout_centerVertical
If true, centers this child vertically within its parent. Must be a boolean value, either
"true" or "false".
17
android:layout_toEndOf
Positions the start edge of this view to the end of the given anchor view ID and must
be a reference to another resource, in the form "@[+][package:]type:name".
18
android:layout_toLeftOf
Positions the right edge of this view to the left of the given anchor view ID and must
be a reference to another resource, in the form "@[+][package:]type:name".
19
android:layout_toRightOf
Positions the left edge of this view to the right of the given anchor view ID and must
be a reference to another resource, in the form "@[+][package:]type:name".
20
android:layout_toStartOf
Positions the end edge of this view to the start of the given anchor view ID and must
be a reference to another resource, in the form "@[+][package:]type:name".
Following is the content of the modified main activity
file src/[Link]/[Link].
package [Link];
import [Link];
import [Link];
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
}
}
Following will be the content of res/layout/activity_main.xml file −
<RelativeLayout
xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentStart="true"
android:layout_below="@+id/name">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2" />
</LinearLayout>
</RelativeLayout>
Following will be the content of res/values/[Link] to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="action_settings">Settings</string>
<string name="reminder">Enter your name</string>
</resources>
Android Absolute Layout
An Absolute Layout lets you specify exact locations (x/y coordinates) of its children. Absolute
layouts are less flexible and harder to maintain than other types of layouts without absolute
positioning.
Absolute Layout
AbsoluteLayout Attributes
Following are the important attributes specific to AbsoluteLayout −
[Link] Attribute & Description
android:id
1
This is the ID which uniquely identifies the layout.
android:layout_x
2
This specifies the x-coordinate of the view.
android:layout_y
3
This specifies the y-coordinate of the view.
Public Constructors
AbsoluteLayout(Context context)
AbsoluteLayout(Context context, AttributeSet attrs)
AbsoluteLayout(Context context, AttributeSet attrs, int defStyleAttr)
AbsoluteLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes)
Following is the content of the modified main activity file
src/[Link]/[Link]. This file can include each of the fundamental
lifecycle methods.
package [Link];
import [Link];
import [Link];
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
}
Following will be the content of res/layout/activity_main.xml file −
<AbsoluteLayout xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="OK"
android:layout_x="50px"
android:layout_y="361px" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_x="225px"
android:layout_y="361px" />
</AbsoluteLayout>
Following will be the content of res/values/[Link] to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">demo</string>
<string name="action_settings">Settings</string>
</resources>
Android Frame Layout
Frame Layout is designed to block out an area on the screen to display a single item. Generally,
FrameLayout should be used to hold a single child view, because it can be difficult to organize
child views in a way that's scalable to different screen sizes without the children overlapping
each other.
You can, however, add multiple children to a FrameLayout and control their position within the
FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
FrameLayout Attributes
Following are the important attributes specific to FrameLayout −
[Link] Attribute & Description
android:id
1
This is the ID which uniquely identifies the layout.
android:foreground
2
This defines the drawable to draw over the content and possible values may be a color
value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".
android:foregroundGravity
3
Defines the gravity to apply to the foreground drawable. The gravity defaults to fill.
Possible values are top, bottom, left, right, center, center_vertical, center_horizontal etc.
android:measureAllChildren
4
Determines whether to measure all children or just those in the VISIBLE or INVISIBLE
state when measuring. Defaults to false.
Following is the content of the modified main activity file
src/[Link]/[Link]. This file can include each of the fundamental
lifecycle methods.
package [Link];
import [Link];
import [Link];
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
}
}
Following will be the content of res/layout/activity_main.xml file −
<FrameLayout xmlns:android="[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="@drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_height="250px"
android:layout_width="250px"/>
<TextView
android:text="Frame Demo"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>
Following will be the content of res/values/[Link] to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">demo</string>
<string name="action_settings">Settings</string>
</resources>