Chapter 2

Layout
 Overview
Understanding the Role of Android Application Components,
Understanding the Utility of Android API, Overview of the
Android Project Files, Understanding Activities, Role of the
Android Manifest File, Creating the User Interface, Commonly
Used Layouts and Controls, Event Handling, Displaying
Messages Through Toast, Creating and Starting an Activity,
Using the Edit Text Control, Choosing Options with Checkbox,
Choosing Mutually Exclusive Items Using Radio Buttons
 XML
• stands for Extensible Markup Language. XML is a markup
language much like HTML used to describe data.
•  XML tags are not predefined in XML. We must define our own
Tags. Xml as itself is well readable both by human and
machine. Also, it is scalable and simple to develop.
• In Android we use xml for designing our layouts because xml
is lightweight language so it doesn’t make our layout heavy.
Organize resource in Android Studio
Cont . . .
Overview f the supported resources and their standard folder prefixes.
Sr.No Directory & Resource Type
.
1 anim/
XML files that define property animations. They are saved in
res/anim/ folder and accessed from the R.anim class.
2 color/
XML files that define a state list of colors. They are saved in
res/color/ and accessed from the R.color class.
3 drawable/
Image files like .png, .jpg, .gif or XML files that are compiled into
bitmaps, state lists, shapes, animation drawable. They are saved
in res/drawable/ and accessed from the R.drawable class.

4 layout/
XML files that define a user interface layout. They are saved in
res/layout/ and accessed from the R.layout class.
Cont . . .
Sr.No. Directory & Resource Type

5 values/
XML files that contain simple values, such as strings, integers, and colors.
For example, here are some filename conventions for resources you can
create in this directory −
arrays.xml for resource arrays, and accessed from the R.array class.
integers.xml for resource integers, and accessed from the
R.integer class.
bools.xml for resource boolean, and accessed from the R.bool class.
colors.xml for color values, and accessed from the R.colorclass.
dimens.xml for dimension values, and accessed from the R.dimen class.
strings.xml for string values, and accessed from the R.string class.
styles.xml for styles, and accessed from the R.style class.
Cont . . .
Sr.No. Directory & Resource Type

6 menu/
XML files that define application menus, such as an Options Menu,
Context Menu, or Sub Menu. They are saved in res/menu/ and accessed
from the R.menu class.
7 raw/
Arbitrary files to save in their raw form. You need to
callResources.openRawResource() with the resource ID, which is
R.raw.filename to open such raw files.
8 xml/
Arbitrary XML files that can be read at runtime by calling
Resources.getXML(). You can save various configuration files here which
will be used at run time.
 Basics Of User Interface:

• The whole concept of Android User Interface is defined using

the hierarchy of View and ViewGroup objects.
• A ViewGroup is an invisible container that organizes child
views. These child views are other widgets which are used to
make the different parts of UI.
• One ViewGroup can have another ViewGroup as an child
element
 CREATING THE USER INTERFACE

There are three approaches to creating user interfaces in

Android.
1. You can create user interfaces entirely in Java code
2. Entirely in XML 3. Combining both methods (defining the user
interface in XML and then referring and modifying it through
Java code).
Cont . . .
No. UI Control & Description
1 TextView - This control is used to display text to the user.

2 EditText - a predefined subclass of TextView that includes rich editing

capabilities.

3 AutoCompleteTextView – is similar to EditText, except that it shows a list

of completion suggestions automatically while the user is typing.

4 Button - A push-button that can be pressed, or clicked, by the user to

perform an action.

5 ImageButton - is an AbsoluteLayout which enables you to specify the

exact location of its children. This shows a button with an image (instead of
text) that can be pressed or clicked by the user.

6 CheckBox - An on/off switch that can be toggled by the user. You should
use check box when presenting users with a group of selectable options
that are not mutually exclusive.
Cont . . .
No. UI Control & Description
7 ToggleButton - An on/off button with a light indicator.
8 RadioButton – it has two states: either checked or unchecked.

9 RadioGroup - is used to group together one or more RadioButtons.

10 ProgressBar – it provides visual feedback about some ongoing tasks, such
as when you are performing a task in the background.

11 Spinner - drop-down list that allows users to select one value from a set
12 TimePicker - enables users to select a time of the day, in either 24-hour
mode or AM/PM mode.
13 DatePicker - enables users to select a date of the day.
14 VideoView - Handles all state management and display Surface
configuration for playing videos more simply from within your Activity.
15 ListView — A View Group that creates and manages a vertical list of
Views, displaying them as rows within the list.
Cont . . .
• Layout Attributes
– android:id – android:layout_x
– android:layout_width – android:layout_y
– android:layout_height – android:layout_width
– android:layout_marginTop – android:paddingLeft
– android:layout_marginBottom – android:paddingRight
– android:layout_marginLeft – android:paddingTop
– android:layout_marginRight – android:paddingBottom
– android:layout_gravity
– android:layout_weight
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"android:layout_width="match_parent"
android:layout_height="match_parent">
 
 
<Button
android:id="@+id/buton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
 
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sample Text"
android:layout_marginTop="15dp"
android:textSize="30dp"/>

 
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
 
<EditText
android:id="@+id/editTextName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="First Name"
/>
 
<EditText
android:id="@+id/editTextLastName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="Last Name"/>
 
</RelativeLayout>
</LinearLayout>
 COMMONLY USED LAYOUTS AND CONTROLS

• The views or the controls that we want to display in an

application are arranged in an order or sequence by placing
them in the desired layout.
• The layouts also known as Containers or ViewGroups.
• These are used for organizing the views or controls in the
required format. Android provides the following layouts
 Layout
• A layout defines the visual structure for a user interface, such as the UI
for an activity or app widget. You can declare a layout in two ways:
 
• Declare UI elements in XML.
 
Android provides a straightforward XML vocabulary that corresponds to
the View classes and subclasses, such as those for widgets and layouts. 

• Instantiate layout elements at runtime.

Your application can create View and ViewGroup objects (and manipulate
their properties) programmatically
 Cont…

Types Of Layout
Cont . . .
a) Linear Layout
• Linear Layout is a view group that puts/aligns all its child elements in a
single direction into a single column or row depending on
the android:orientation attribute.
• Possible values for this attribute are horizontal(default value) and vertical  

horizontal orientation

vertical orientation
Cont . . .
b) Relative Layout
• Relative Layout allows positioning the widget relative to each other.
• This can be used for complex layouts.
• Relative Layout is a complex layout manager and should only be used if
such a complex layout is required, as it performs a resource intensive
calculation to layout its children.

c) Constraint Layout
• Constraint layout is provided by an external library. It allows you to use a
flat view hierarchy and has great performance.
• Also the design tools support constraint layout very well.
• New projects should prefer the usage of constraint layout.
Cont . . .
d) Frame Layout
• Frame Layout is a layout manager which draws all child
elements on top of each other.
• This allows to create nice visual effects.
• The following screenshot shows the Gmail application which
uses Frame Layout to display several button on top of another
layout.
Cont . . .
e) Table Layout :- a view that groups views into rows and
columns.
f) Absolute Layout:- enables you to specify the exact location of
its children.
g) List View:- is a view group that displays a list of scrollable
items.
h) Grid Layout
• Grid Layout separates its drawing area into: rows, columns,
and cells.
• You can specify how many columns the grid should have.
• For each view you can specify in which row and column it
should be placed and how many columns and rows it should
use.
• If not specified, it uses defaults, e.g., one column, one row and
the view position depends on the order of the declaration.
Cont . . .
• 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 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.
Cont . . .
• Gravity attribute
– Plays important role in positioning the view object
– it can take one or more (separated by '|') of the following
constant values.
Constant Value Description
top 0x30 Push object to top of its container, not changing its size.

bottom 0x50 Push object to 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 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.
5) Android – UI Controls/widget Toolbox
• Recall UI layout
– A View is an object that draws something on the screen that
the user can interact with and
– A ViewGroup is an object that holds other View (and
ViewGroup) objects in order to define the layout of the user
interface.

• Android supplies/provides a toolbox of standard Views to

help you create your UIs.
• By using these controls (and modifying or extending them,
as necessary), you can simplify your development and
provide consistency between applications.
• See on next slide, some common UI controls provided by
Android that allow you to build the GUI for your app.
Thank You

Queries