Mobile Application Development Course Code: 4350703

Unit – II
Modeling GUI Using Android
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.

Types of Android Layout

• Android Linear Layout:

LinearLayout is a ViewGroup subclass, used to provide child View elements

one by one either in a particular direction either horizontally or vertically
based on the orientation property.

• Android Relative Layout:

RelativeLayout is a ViewGroup subclass, used to specify the position of child

View elements relative to each other like (A to the right of B) or relative to the
parent (fix to the top of the parent).

• Android Constraint Layout:

ConstraintLayout is a ViewGroup subclass, used to specify the position of

layout constraints for every child View relative to other views present. A
ConstraintLayout is similar to a RelativeLayout, but having more power.
ConstraintLayout provides you the ability to completely design your UI with
the drag and drop feature provided by the Android Studio design editor.It
helps to improve the UI performance over other layouts.With the help of
ConstraintLayout, we can control the group of widgets through a single line of
code.With the help of ConstraintLayout, we can easily add animations to the
UI components which we used in our app.

• Android Frame Layout:

FrameLayout is a ViewGroup subclass, used to specify the position of View

elements it contains on the top of each other to display only a single View
inside the FrameLayout.

• Android Table Layout:

VPMP Polytechnic, Computer Department. 7

Mobile Application Development Course Code: 4350703

TableLayout is a ViewGroup subclass, used to display the child View

elements in rows and columns.

• Android Web View:

WebView is a browser that is used to display the web pages in our activity
layout.

• Android ListView:

ListView is a ViewGroup, used to display scrollable lists of items in a single

column.

• Android Grid View:

GridView is a ViewGroup that is used to display a scrollable list of items in a

grid view of rows and columns.

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:

Attribute
android:id
android:layout_width
android:layout_height
android:layout_marginTop
android:layout_marginBottom
android:layout_marginLeft
android:layout_marginRight
android:layout_gravity
Description
This is the ID which uniquely identifies the view.
This is the width of the layout.
This is the height of the layout
This is the extra space on the top side of the
layout.
This is the extra space on the bottom side of the
layout.
This is the extra space on the left side of the
layout.
This is the extra space on the right side of the
layout.
This specifies how child Views are positioned.

VPMP Polytechnic, Computer Department. 8

Mobile Application Development Course Code: 4350703

This specifies how much of the extra space in the

android:layout_weight
android:layout_x
android:layout_y
android:layout_width
android:layout_width
android:paddingLeft
android:paddingRight
android:paddingTop
android:paddingBottom
layout should be allocated to the View.
This specifies the x-coordinate of the layout.
This specifies the y-coordinate of the layout.
This is the width of the layout.
This is the width of the layout.
This is the left padding filled for the layout.
This is the right padding filled for the layout.
This is the top padding filled for the layout.
This is the bottom padding filled for the layout.

For example, a simple vertical linear layout with a text view and a button looks like
this:
<?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="I am a TextView" />
<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a Button" />
</LinearLayout>

Android UI Controls
We have a different type of UI controls available in android to implement the user
interface for our android applications.

VPMP Polytechnic, Computer Department. 9

Mobile Application Development Course Code: 4350703

Control Description Related Classes

Type

Button A push-button that can be pressed, or Button

clicked, by the user to perform an
action.

Text field An editable text field. You can use EditText,AutoCompleteText

theAutoCompleteTextView widget to View
create a text entry widget that
provides auto-complete suggestions

Checkbox An on/off switch that can be toggled CheckBox

by the user. You should use
checkboxes when presenting users
with a group of selectable options that
are not mutually exclusive.

Radio Similar to checkboxes, except that RadioGroup

button only one option can be selected in the RadioButton
group.

Toggle An on/off button with a light ToggleButton

button indicator.

Spinner A drop-down list that allows users to Spinner

select one value from a set.

Pickers A dialog for users to select a single DatePicker,TimePicker

value for a set by using up/down
buttons or via a swipe gesture. Use
aDatePickercode> widget to enter the
values for the date (month, day, year)
or a TimePicker widget to enter the
values for a time (hour, minute,
AM/PM), which will be formatted
automatically for the user's locale.

Android ProgressBar:
In android, ProgressBar is a user interface control which is used to indicate the
progress of an operation. For example, downloading a file, uploading a file.

VPMP Polytechnic, Computer Department. 10

Mobile Application Development Course Code: 4350703

By default the ProgressBar will be displayed as a spinning wheel, in case if we want

to show it like a horizontal bar then we need to change the style property to
horizontal like style="?android:attr/progressBarStyleHorizontal".
Example:

Create Android ProgressBar in XML Layout File

In android, we can create ProgressBar in XML layout file using <ProgressBar>

element with different attributes like as shown below

<ProgressBar
android:id="@+id/pBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="50dp"
android:minWidth="200dp"
android:max="100"
android:indeterminate="true"
android:progress="1" />

we defined a progress bar (<ProgressBar>) with different attributes.

XML Attributes of ProgressBar:

Attribute Description

android:id It is used to uniquely identify the control

android:minHeight It is used to set the height of the progress bar.

android:minWidth It is used to set the width of the progress bar.

android:max It is used to set the maximum value of the progress bar.

android:progress It is used to set default progress value between 0 and max.

ImageView:
ImageView class is used to display any kind of image resource in the android
application.

VPMP Polytechnic, Computer Department. 11

Mobile Application Development Course Code: 4350703

XML Attributes of ImageView:

Attribute Description

android:id To uniquely identify an image view

android:src/app:srcCompat To add the file path of the inserted image

android:background To provide a background color to the inserted image

android:layout_width To set the width of the image

android:layout_height To set the height of the image

To add padding to the image from the left, right, top, or

android:padding
bottom of the view

android:scaleType To re-size the image or to move it in order to fix its size

Example:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/image" />

<ProgressBar
android:id="@+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"/>
</RelativeLayout>

VPMP Polytechnic, Computer Department. 12