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.
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="http://schemas.android.com/apk/res/android"
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 Activity.onCreate() callback implementation as shown below −
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.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.
Sr.No 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 there are other attributes
which are specific to that layout. Following are common attributes and will be applied to
all the layouts:
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_margin : This is the extra space outside of the view. For example if
you give android:marginLeft=20dp, then the view will be arranged after 20dp from left
5. android:layout_padding : This is similar to android:layout_margin except that it
specifies the extra space inside the view
6. android:layout_gravity : This specifies how child Views are positioned
7. android:layout_weight : This specifies how much of the extra space in the layout
should be allocated to the view
8. android:layout_x : This specifies the x-coordinate of the layout
9. android:layout_y : This specifies the y-coordinate of the layout
android:layout_width=wrap_content tells the view to size itself to the dimensions
required by its content.
Relative
As the name implies, this layout will set its inner child views in relative position. This can
keep your layout hierarchy flat with no nested view groups. At the same time, however,
each Relative Layout has to undergo a process of two Measure passes, which can
impact performance.
One useful feature of a RelativeLayout is the ability to center a child view by using the
centerInParent attribute
layout_centerInParent centers the TextView
Constraint
A constraint is a connection or an alignment to the element the constraint is tied to. You
define various constraints for every child view relative to other views present. This gives
you the ability to construct complex layouts with a flat view hierarchy (no nested
ViewGroups). Similar to RelativeLayout, this layout also requires two Measure passes.
Notice the constraints on the TextView
Frame
This layout is used only to hold a single child view, thus blocking any other view in the
layout. The layout itself will be as big as its biggest child view (visible or not), plus some
padding.
Avoid having several child views inside a FrameLayout since it will be difficult to avoid
the child views from overlapping one another. You can control the positions of these
child views by assigning the layout_gravity attribute to each child.
List View/Grid View
Use when you have a need to present several items on screen (like in a restaurant
menu). List View is a single column list that the user can scroll through. You can think of
Grid View as a List View with more than one column.
What is important to know about these layouts is that the Views are dynamic and
created at runtime. To make the items populate at runtime, you need to use an
AdapterView.
Android LinearLayout
Android LinearLayout organizes elements along a single line. We can specify whether
that line is vertical or horizontal using android:orientation. The orientation is
horizontal by default.
A vertical LinearLayout will only have one child per row (so it is a column of single
elements), and a horizontal LinearLayout will only have one single row of elements on
the screen.
android:layout_weight attribute depicts the importance of the element. An element
with larger weight occupies more screen space. Here is a sample Layout XML using
LinearLayout:
layout_linear.xml
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="@dimen/activity_horizontal_margin">
<Button
android:id="@+id/backbutton"
android:text="Back"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Row 2"
android:layout_width="wrap_content"
android:textSize="18sp"
android:layout_margin="10dp"
android:layout_height="wrap_content" />
<TextView
android:text="Row 3"
android:textSize="18sp"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Row 4"
android:textSize="18sp"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Row 5"
android:textSize="18sp"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/next_button"
android:text="next"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Row 6b"
android:textSize="18sp"
android:layout_margin="10dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Row 6c"
android:textSize="18sp"
android:layout_margin="10dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:text="Row 6d"
android:textSize="18sp"
android:layout_margin="10dp"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
In this layout we have a Parent LinearLayout which has a vertical orientation and
contains buttons, textviews and a nested Linear Layout(having a horizontal orientation)
as child views.
Note: Nested layouts don’t have to be of one type. We could, for example, have a
LinearLayout as one of the children in a RelativeLayout and vice-versa.
