CH3. UI Components & Layouts

Prof. Ghanawajeer D.J.
3.1 Control Flow:

 Directory Structure
3.2 Components of a Screen:
 Fundamental UI Design
3.3 Layouts: Linear Layout
Absolute Layout
Frame Layout
Table Layout
Relative Layout
3a. Explain with relevant analogy the given
Directory Structure.
3b. Describe the steps to use the given Android rich

UI component.
3c. Describe the steps to use the given type of

Layouts.
3d. Develop the given basic Android Application.

 Control Flow:
• Java programming Language can be used in
development of Android Apps. Android IDE and tools
check & compile the dependencies, code, resource,
data and generate an APK.

 Control Flow:
• APK file comprises all the content of the app. Each
app runs on emulator or virtual machine so that app
can run inaccessible from other apps. Each android
app only access to components which it requires to do
its work.
 Control Flow:
• The workflow to develop an app for Android is
conceptually the same as other app platforms.
However, to efficiently build a well-designed app for
Android, you need some specialized tools.

 Control Flow:
• Following are the each phases of Android Application
Development:
1. Set up your workspace: This is the phase you

probably already finished: Install Android Studio
and create a project.
2. Write your app: Now you can get to work. Android
Studio includes a variety of tools and intelligence to
help you work faster, write quality code, design a UI,
and create resources for different device types.
3. Build and run: During this phase, you build your
project into a debugable APK package that you can
install and run on the emulator or an Android-powered
device. You can also begin customizing your build. For
example, you can create build variants that produce
different types of APKs from the same project, and
shrink your code and resources to make your APK file
smaller.
4. Debug, profile, and test: This is the iterative phase
in which you continue writing your app but with a focus
on eliminating bugs and optimizing app performance.
Of course, creating tests will help you in those
endeavors.
5. Publish: When you're ready to release your app to
users, there are just a few more things to consider, such
as versioning your app and signing it with a key.
 Directory Structure:
• Within each Android app module view, files are shown
in the following groups:
▬ Manifests: Contains the AndroidManifest.xml file.
▬ Java: Contains the Java source code files,
separated by package names.

• Within each Android app module view, files are shown
in the following groups:
▬ res: Contains all non-code resources, such as XML
layouts, UI strings, and bitmap images, divided
into corresponding sub-directories.
• .
 This is the Project View in
Android Studio.
• When you select Project view, you can see a lot more files
and directories. The most important of which are the
following:
module-name/
 build/: Contains build outputs.
libs/: Contains private libraries.

 src/ : Contains all code and resource files for the module in
the following subdirectories:
o androidTest/: Contains code for instrumentation tests that run
on an Android device.
o main/ : Contains the "main" sourceset files: the Android code

and resources shared by all build variants (files for other build
variants reside in sibling directories, such as src/debug/ for the
debug build type).
o main/ : files in this folder
 AndroidManifest.xml: Describes the nature of the

application and each of its components.
 java/:Contains Java code sources.
 libs/ : This folder contains private libraries.
 gen/ : Contains the Java files generated by Android

Studio, such as your R.java file and BuildConfig.java
files are auto generated.
o main/ : files in this folder
 res/ :Contains application resources, such as drawable

files, layout files, and UI string.
 drawable: Under this folder we store images

(PNG,JPEG,GIF) for our project
 layout: Under this folder we store UI layout files for

our android project, which is written in xml format.
 menu: For xml files that define application menus.

values: In this folder we place predefined application

values in the form of XML files that define the variable
names and their value that will be later referenced in java
source code.
• dimens.xml: This XML file defines the dimension

values such as font sizes and standard heights for UI.
values:
• strings.xml: In this file we define text strings which is

used in the application. E.g. Title of Application
• styles.xml: This XML file defines styles which are

used in the application. Generally we apply these
styles to our UI elements.
 assets/ :Contains file that should be compiled into
an .apk file as-is. You can navigate this directory in the
same way as a typical file system using URIs and read
files as a stream of bytes using the AssetManager . For
example, this is a good location for textures and game
data.
 test/ : Contains code for local tests that run on your host
JVM.
build.gradle (module): This defines the module-specific build

configurations.
 build.gradle (project): This defines your build configuration

that applies to all modules. This file is integral to the project, so
you should maintain them in revision control with all other
source code.
The important application files are:
 The MainActivity File:
 The main activity code is a Java file MainActivity.java.

This is the actual application file which ultimately gets
converted to a Dalvik executable and runs your application.
 Following is the default code generated by the application

wizard for Hello World! application –

 Here, R.layout.activity_main refers to the

activity_main.xml file located in the res/layout folder. The
onCreate() method is one of many methods that are figured
when an activity is loaded.
 The Manifest File:

 Whatever component you develop as a part of your
application, you must declare all its components in a
manifest.xml which resides at the root of the application
project directory. This file works as an interface between
Android OS and your application, so if you do not declare
your component in this file, then it will not be considered by
the OS.

 For example, a default manifest file will look like as
following file –

 Here <application>...</application> tags enclosed the
components related to the application. Attribute android:icon
will point to the application icon available under
res/drawable-hdpi. The application uses the image named
ic_launcher.png located in the drawable folders.

 The <activity> tag is used to specify an activity and
android:name attribute specifies the fully qualified class name
of the Activity subclass and the android:label attributes
specifies a string to use as the label for the activity. You can
specify multiple activities using <activity> tags.

 Following is the list of tags which you will use in your
manifest file to specify different Android application
components −
• <activity>elements for activities
• <service> elements for services
• <receiver> elements for broadcast receivers
• <provider> elements for content providers

 The Strings File:

 The strings.xml file is located in the res/values folder and it
contains all the text that your application uses. For example,
the names of buttons, labels, default text, and similar types of
strings go into this file. This file is responsible for their
textual content.
 The Strings File:

 For example, a default strings file will look like as following
file –
 The Layout File:

 The activity_main.xml is a layout file available in res/layout
directory, that is referenced by your application when
building its interface. You will modify this file very
frequently to change the layout of your application.
.
 The Layout File:

 For your "Hello World!" application, this file will have
following content related to default layout-
 Component of Screen:
A Typical user interface of an android application

consists of action bar and the application content area.
 Main Action Bar
 View Control
 Content Area
 Split Action Bar

 Understanding Screen Components:
• The basic unit of android application is the activity. A

UI is defined in an xml file. During compilation, each
element in the XML is compiled into equivalent
Android GUI class with attributes represented by
methods.
 View and ViewGroups:
• An activity is consist of views. A view is just a widget

that appears on the screen. It could be button etc. One
or more views can be grouped together into one
GroupView. Example of ViewGroup includes layouts.
 Fundamental of Android UI Design:
The core building blocks or fundamental components

of android are activities, views, intents, services,
content providers, fragments and
AndroidManifest.xml.
It’s important of creation of User interfaces in any

android application.
View: It is the base class for all visual components
(control and widgets). All the controls present in an
android app are derived from this class. A View is an
object that draws something on a Smartphone screen and
enables an user to interact with it.
Viewgroup: A ViewGroup can contain one or more
Views and defines how these Views are placed in the user
interface these are used along with Android Layout
managers.
Fragments: Introduced from API level 11, this
component encapsulates a single piece of UI interface.
They are very useful when we have to create and
optimize our app user interface for multiple devices or
multiple screen size.
Activities: Usually an Android app consists of several
activities that exchange data and information. An Activity
takes care of creating the user interface.
Android provides several standard UI controls, Layout

managers and widgets that we can use without much effort
and with which we can create apps fast and simply.
Android provides some standard UI components that can be
grouped in:
Sr. No. UI Control & Description

TextView:This control is used to display text to the
1
user.
EditText: EditText is a predefined subclass of
2
TextView that includes rich editing capabilities.
Sr.Fundamental
No. of Android UI&Design:
UI Control Description
AutoCompleteTextView:The
AutoCompleteTextView is a view that is similar to
3
EditText, except that it shows a list of completion
suggestions automatically while the user is typing.
Button: A push-button that can be pressed, or
4
clicked, by the user to perform an action.
Sr.
Fundamental
ImageButton:An ImageButton is an AbsoluteLayout
which enables you to specify the exact location of its
5
children. This shows a button with an image (instead
of text) that can be pressed or clicked by the user.
CheckBox:An on/off switch that can be toggled by
the user. You should use check box when presenting
6
users with a group of selectable options that are not
mutually exclusive.
Sr.
Fundamental
7 ToggleButton:An on/off button with a light indicator.
RadioButton:The RadioButton has two states: either
8
checked or unchecked.
RadioGroup:A RadioGroup is used to group together
9
one or more RadioButtons.
ProgressBar:The ProgressBar view provides visual
10 feedback about some ongoing tasks, such as when
you are performing a task in the background.
Sr.
Fundamental
Spinner:A drop-down list that allows users to select
11
one value from a set.
TimePicker:The TimePicker view enables users to
12 select a time of the day, in either 24-hour mode or
AM/PM mode.
DatePicker:The DatePicker view enables users to
13
select a date of the day.
 Types of layout:
The ViewGroup is a subclass of View. One or more Views
can be grouped together into a ViewGroup. A ViewGroup
provides the android layout in which we can order the
appearance and sequence of views. Examples of
ViewGroup are LinearLayout, FrameLayout,
RelativeLayout etc.
Android provides the following ViewGroups or layouts:
LinearLayout : is a ViewGroup that aligns all children in a
single direction, vertically or horizontally.
RelativeLayout : is a ViewGroup that displays child views in

relative positions.
AbsoluteLayout : allows us to specify the exact location of

the child views and widgets.
TableLayout : is a view that groups its child views into rows
and columns.
FrameLayout : is a placeholder on screen that is used to

display a single view.
ScrollView : is a special type of FrameLayout in that it
allows users to scroll through a list of views that occupy more
space than the physical display. The ScrollView can contain
only one child view or ViewGroup, which normally is a
LinearLayout.
ListView : is a view group that displays a list of scrollable
item.
GridView : is a ViewGroup that displays items in two-

dimensional scrolling grid. The items in the grid come from
the ListAdapter associated with this view.
View
ImageView TextView … ViewGroup
LinearLayout RelativeLayout FrameLayout AbsoluteLayout
TableLayout ScrollView
 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:
Sr.No Attribute & Description
android:id-This is the ID which uniquely identifies
1
the view.
android:layout_width-This is the width of the
2
layout.
android:layout_height-This is the height of the
3
layout

android:layout_marginTop-This is the extra space
4
on the top side of the layout.
android:layout_marginBottom-This is the extra
5
space on the bottom side of the layout
android:layout_marginLeft-This is the extra space
6
on the left side of the layout.
android:layout_marginRight-This is the extra
7
space on the right side of the layout.

android:layout_weight-This specifies how much of
8 the extra space in the layout should be allocated to
the View.
android:layout_x-This specifies the x-coordinate of
9
the layout.
android:layout_y-This specifies the y-coordinate of
10
the layout.
android:layout_gravity-This specifies how child
11
Views are positioned.
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).
 Linear Layout :
Linear layout is further divided into horizontal and vertical
layout. It means it can arrange views in a single column or
in a single row. Here is the code of linear layout(vertical)
that includes a text view.
 Linear Layout :
 Linear Layout :
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.
 Linear Layout :
 Linear Layout :
Example
 activity_main.xml
 Linear Layout :
Example
 activity_main.xml
 Linear Layout :Example
 AbsoluteLayout
The AbsoluteLayout enables you to specify the exact
location of its children.
Absolute layouts are less flexible and harder to maintain for

different mobile screen sizes than other types of layouts
because we set the exact location of a child view or called
component.
 AbsoluteLayout
The positioning is based on x(top) and y(left) coordinates
and that positioning is not as useful in world of various
screen resolutions(sizes) and aspect ratios.
 AbsoluteLayout
Attributes of Absolute Layout:
 layout_x: In Absolute Layout layout_x attribute is used to

specify the x- coordinate of the view(TextView or any other
view). The possible value for this is in dp or px.
 layout_y: In AbsoluteLayout layout_y attribute is used to

specify the y- coordinate of the view(TextView or any other
view). The possible value for this is in dp or px.
 AbsoluteLayout
It can be declared like this:
 Frame Layout:
In android, Framelayout is a ViewGroup subclass which is
used to specify the position of View instances it contains on
the top of each other to display only single View inside the
FrameLayout. In simple manner, we can say FrameLayout
is designed to block out an area on the screen to display a
single item.
 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.
 Frame Layout:
We can add multiple children to a FrameLayout and control
their position by assigning gravity to each child, using the
android:layout_gravity attribute.
 Frame Layout:
 Frame Layout:
Attributes of Frame Layout:
1.android:foreground
– 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".
 Frame Layout:
2.android:foregroundGravity
– 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.
– It is used to set the gravity of foreground. We can also set

multiple values by using “|”. Ex: fill_horizontal|top .Both the
fill_horizontal and top gravity are set to framelayout.
 Frame Layout:
3.android:measureAllChildren
– Determines whether to measure all children or just those in

the VISIBLE or INVISIBLE state when measuring. Defaults to
false.
– If measureallchildren is set true then it will show actual width

and height of frame layout even if the views visibility is in gone
state.
 Frame Layout:
4.android:visibility
– This determines whether to make the view visible, invisible or

gone.
• visible – the view is present and also visible
• invisible – The view is present but not visible
• gone – The view is neither present nor visible

 Frame Layout:Example
Table Layout:
The TableLayout is a ViewGroup subclass which is used to
display the child View elements in rows and columns.
The TableLayout going to be arranged groups of views into

rows and columns.
Table Layout:
Table Layout:
 The TableLayout 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 like
ImageView,TextView or any other View.
Table Layout:
Table Layout:
 The TableLayout will position its children elements into
rows and columns and it won’t display any border lines for
rows, columns or cells.
The TableLayout in android will work same as HTML table

and table will have as many columns as the row with the
most cells. The TableLayout can be explained as <table>
and TableRow is like <tr> element.
Table Layout:
Column can be both stretchable and shrinkable. If
shrinkable then the width of column can be shrunk to fit the
table into its parent object and if stretchable then it can
expand in width to fit any extra space available.
Table Layout:
Attributes of TableLayout in Android:
1.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.
 If the value is 0 then the first column appears collapsed, i.e

it is the part of table but it is invisible.
Table Layout:
1.android:collapseColumns:
Table Layout:
2.android:shrinkColumns
 The zero-based index of the columns to shrink. The column

indices must be separated by a comma: 1, 2, 5.
 If the value is 0 then the first column’s width shrinks or

reduces by word wrapping its content.
Table Layout:
 If the value is 0,1 then both first and second columns are
shrinks or reduced by word wrapping its content.
 If the value is ‘*’ then the content of all columns is word

wrapped to shrink their widths.
Table Layout:
Table Layout:
3.android:stretchColumns
 The zero-based index of the columns to stretch. The

column indices must be separated by a comma: 1, 2, 5.
 If the value is 1 then the second column is stretched to take

up any available space in the row, because of the column
numbers are started from 0.
Table Layout:
 If the value is 0,1 then both the first and second columns of
table are stretched to take up the available space in the row.
 If the value is ‘*’ then all the columns are stretched to take
up the available space.
Table Layout:
Table Layout:
4.android:layout_column
 This is used to specify the column in which the view should

be placed.
 By default a view is placed in the first unused column.

Table Layout:
5. android:layout_span
 This is used to specify if a view should occupy more than

one column. For example if we have a row with two
elements and each element has android:layout_span=”3″
then you will have at least six columns in your table.
Table Layout:Example
 Relative Layout:
The Relative Layout is very flexible layout used in android
for custom layout designing. It gives us the flexibility to
position our component/view based on the relative or
sibling component’s position. Just because it allows us to
position the component anywhere we want so it is
considered as most flexible layout.
For the same reason Relative layout is the most used layout
after the Linear Layout in Android. It allows its child view
to position relative to each other or relative to the container
or another container.
In Relative Layout, you can use “above, below, left and
right” to arrange the component’s position in relation to
other component.
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 RelativeLayout.LayoutParams..
Relative Layout:
Attributes of Relative Layout in Android:
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"
Relative Layout:
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".
Relative Layout:
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".
Relative Layout:
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".
Relative Layout:
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".
Relative Layout:
6.android:layout_alignParentLeft
– If true, makes the left edge of this view match the left edge
"false".
Relative Layout:
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".
Relative Layout:
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".
Relative Layout:
9.android:layout_alignParentTop
– If true, makes the top edge of this view match the top edge
"false".
Relative Layout:
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
Relative Layout:
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
Relative Layout:
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
Relative Layout:
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".
Relative Layout:
14.android:layout_centerHorizontal
– If true, centers this child horizontally within its parent.

Must be a boolean value, either "true" or "false".
Relative Layout:
15.android:layout_centerInParent
– If true, centers this child horizontally and vertically within

its parent. Must be a boolean value, either "true" or "false".
Relative Layout:
16.android:layout_centerVertical
– If true, centers this child vertically within its parent. Must

be a boolean value, either "true" or "false".
Relative Layout:
17.android:layout_toEndOf
– Positions the start edge of this view to the end of the given
Relative Layout:
18.android:layout_toLeftOf
– Positions the right edge of this view to the left of the given
Relative Layout:
19.android:layout_toRightOf
– Positions the left edge of this view to the right of the given
Relative Layout:
20.android:layout_toStartOf
– Positions the end edge of this view to the start of the given
Relative Layout:
Relative Layout:
Relative Layout:
Relative Layout:

CH3. UI Components &amp; Layouts

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CH3. UI Components &amp; Layouts

Uploaded by

Copyright:

Available Formats

Prof. Ghanawajeer D.J.

3.1 Control Flow:

3b. Describe the steps to use the given Android rich

3c. Describe the steps to use the given type of

3d. Develop the given basic Android Application.

• Java programming Language can be used in

development of Android Apps. Android IDE and tools

check & compile the dependencies, code, resource,

data and generate an APK.

• APK file comprises all the content of the app. Each

app runs on emulator or virtual machine so that app

can run inaccessible from other apps. Each android

app only access to components which it requires to do

• The workflow to develop an app for Android is

conceptually the same as other app platforms.

However, to efficiently build a well-designed app for

Android, you need some specialized tools.

• Following are the each phases of Android Application

1. Set up your workspace: This is the phase you

• Within each Android app module view, files are shown

in the following groups:

▬ Manifests: Contains the AndroidManifest.xml file.

▬ Java: Contains the Java source code files,

separated by package names.

• Within each Android app module view, files are shown

in the following groups:

▬ res: Contains all non-code resources, such as XML

layouts, UI strings, and bitmap images, divided

into corresponding sub-directories.

 This is the Project View in

 build/: Contains build outputs.

libs/: Contains private libraries.

o main/ : Contains the "main" sourceset files: the Android code

 AndroidManifest.xml: Describes the nature of the

 java/:Contains Java code sources.

 libs/ : This folder contains private libraries.

 gen/ : Contains the Java files generated by Android

 res/ :Contains application resources, such as drawable

 drawable: Under this folder we store images

 layout: Under this folder we store UI layout files for

 menu: For xml files that define application menus.

values: In this folder we place predefined application

• dimens.xml: This XML file defines the dimension

• strings.xml: In this file we define text strings which is

• styles.xml: This XML file defines styles which are

build.gradle (module): This defines the module-specific build

 build.gradle (project): This defines your build configuration

 The MainActivity File:

 The main activity code is a Java file MainActivity.java.

 Following is the default code generated by the application

 The MainActivity File:

 The MainActivity File:

 Here, R.layout.activity_main refers to the

 The Manifest File:

 The Manifest File:

 The Manifest File:

 The Manifest File:

 The Manifest File:

• <service> elements for services

• <receiver> elements for broadcast receivers

• <provider> elements for content providers

 The Strings File:

 The Strings File:

 The Layout File:

CH3. UI Components & Layouts

CH3. UI Components & Layouts