Unit 3
UI Components
& Layouts
3.1 Project Directory Structure
The android project explorer window contains different types of app modules, source
code files, and resource files.
1. Manifests Folder
2. Java Folder
3. res (Resources) Folder
Drawable Folder
Layout Folder
Mipmap Folder
Values Folder
4. Gradle Scripts
3.1 Project Directory Structure
1. Manifests Folder
Manifests folder contains AndroidManifest.xml for
creating our android application.
This file contains information about our application such
as the Android version, metadata, permissions, services
and additional libraries, and other application
components.
It acts as an intermediator between android OS and
our application.
3.1 Project Directory Structure
1. Manifests Folder
AndroidManifest.xml
3.1 Project Directory Structure
2. Java Folder
The Java folder contains all the java source code
(.java) files that we create during the app
development and including other Test files.
The reason there is more than one folder with the
same name is for advanced reasons to do with
automated testing.
3.1 Project Directory Structure
2. Java Folder
MainActivity.java
3.1 Project Directory Structure
3. Resource (res) folder
The resource folder is the most important folder
because it contains all the non-code resources like
images, XML layouts, and UI strings for our
android application.
3.1 Project Directory Structure
3. Resource (res) folder
The res/drawable folder
It contains the different types of images used for
the development of the application.
We need to add all the images in a drawable
folder for the application development.
3.1 Project Directory Structure
3. Resource (res) folder
The res/layout folder
The layout folder contains all XML layout files
which we used to define the user interface of our
application.
It contains the activity_main.xml file.
setContentView(R.layout.activity_main);
The R.layout.activity_main code is indeed a reference
to the activity_main file within the res/layout file.
This is the connection between our Java code and
our XML layout/design.
3.1 Project Directory Structure
3. Resource (res) folder
The res/mipmap folder
This folder contains launcher.xml files to define
icons that are used to show on the home screen.
It contains different density types of icons
depending upon the size of the device such as hdpi,
mdpi, xhdpi.
Note:
• The letters dpi stand for dots
per inch, and
• the h, m, xh, xxh, and xxxh
prefixes stand for high, medium,
extra high, extra extra high, and
so on.
• These are known as qualifiers.
3.1 Project Directory Structure
3. Resource (res) folder
The res/values folder
Values folder contains a number of XML files like
strings, dimensions, colors, and style definitions.
One of the most important files is the strings.xml file
which contains the string resources.
3.1 Project Directory Structure
3. Resource (res) folder
The res/values folder
The colors.xml file
The code is called hexadecimal code because in each
position of the code, the values 0 to 9 and a to f can
be used, giving 16 possible values.
3.1 Project Directory Structure
3. Resource (res) folder
The res/values folder
The strings.xml file
By separating the content of the app from the
programming of the app it is easier to make
changes at any time.
It is also possible to create content for multiple
different spoken languages without altering the
Java code for each.
3.1 Project Directory Structure
4. Gradle Scripts folder
Gradle means automated build system and it contains a
number of files that are used to define a build
configuration that can be applied to all modules in
our application.
3.2 Components of Android App Screen
Most of the Android apps consist of regions referred to as
1. The System bars
2. The navigation area & bar
3. The Body Region
Fig. System bars 1
navigation area 2
the body region 3
3.2 Components of Android App Screen
1. The System bars
The Status bar, Navigation bar & Caption bar collectively
known as the system bars.
These two bars displays important information such as,
Battery level
The time
Notification alerts
Network operator
Provide direct device interaction from anywhere.
3.2 Components of Android App Screen
1. The System bars
Status bar
On Android, the status bar contains notification icons and
system icons.
The user interacts with the status bar by pulling it down to
access the notification shade.
Fig. Status bar region
highlighted on top of top app
bar
3.2 Components of Android App Screen
1. The System bars
Status bar
When notification arrives, an icon usually
appears in the status bar.
This signals to the user that there is
something to see in the notification drawer.
Fig. Notification icon in status
bar
3.2 Components of Android App Screen
2. Navigation Region & bar
Android lets users control navigation using back, home
and overview controls
Back returns directly back to the previous view.
Home transitions out of the app and to the device’s home screen.
Overview shows the apps are open and have recently been opened.
3.2 Components of Android App Screen
3. The body Region
The body region holds the screen content.
Body content is composed of additional groupings
and layout parameters.
It must continue under navigation and system bar
regions
Fig. Body Region
3.3 Fundamentals of UI Design
Every application framework has some key components that developers need to understand before
they can begin to write applications based on the framework.
You need to understand views, activities, fragments, intents, content providers, services, and
the AndroidManifest.xml file when you build applications for Android.
3.3 Fundamentals of UI Design
Views
Views are user interface (UI) elements that form the basic building blocks of a user interface.
A view can be a button, a label, a text field, or many other UI elements.
Views are also used as containers for views, which means there’s usually a hierarchy of views in
the UI.
In the end, everything you see is a view.
Views have their properties and methods that allow developers to customize their appearance
and behaviour.
For instance, properties like text colour, background colour, and size can be modified to match
the desired design.
3.3 Fundamentals of UI Design
Views
3.3 Fundamentals of UI Design
Activity
An activity is a UI concept that usually represents a single screen in your application.
It generally contains one or more views, but it doesn’t have to.
An activity is pretty much like it sounds something that helps the user do one thing, which could be
viewing data, creating data, or editing data.
Most Android applications have several activities within them.
3.3 Fundamentals of UI Design
Activity
onCreate(Bundle) is where you initialize your activity.
Most importantly, here you will usually call setContentView(int) with a layout resource defining
your UI.
Using findViewById(int) to retrieve the widgets in that UI that you need to interact with
programmatically.
3.3 Fundamentals of UI Design
Fragment
Android Fragment is the part of activity, it is also known as sub-activity.
There can be more than one fragment in an activity.
Fragments represent multiple screen inside one activity.
• When a screen is large, it becomes difficult to manage
all of its functionality in a single activity.
• Fragments are like sub-activities, and an activity can
display one or more fragments on the screen at the
same time.
• When a screen is small, an activity is more likely to
contain just one fragment, and that fragment can be
the same one used within larger screens.
3.3 Fundamentals of UI Design
Intent
An intent generically defines an “intention” to do some work.
You can use intents to perform the following tasks:
Broadcast a message
Start a service
Launch an activity
Display a web page or a list of contacts
Dial a phone number or answer a phone call
Intents are not always initiated by your application, they’re also used by the system to notify
your application of specific events (such as the arrival of a text message).
3.3 Fundamentals of UI Design
Content Provider
Data sharing among mobile applications on a device is common.
Therefore, Android defines a standard mechanism for applications to share data (such as a
list of contacts) without exposing the underlying storage, structure, and implementation.
Through content providers, you can expose your data and have your applications use data
from other applications.
3.3 Fundamentals of UI Design
Content Provider
3.3 Fundamentals of UI Design
Service
Services in Android resemble services we see in Windows or other platforms.
They can perform long-running operations in the background. It does not provide a user interface.
For example, a service can handle network transactions, play music, perform file I/O, or
interact with a content provider, all from the background.
3.3 Fundamentals of UI Design
Service
Types of Services
Foreground Services
Background Services
Bound Services
3.3 Fundamentals of UI Design
Service
Types of Services
Foreground Services
A foreground service performs some operation that is noticeable to the user.
For example, an audio app would use a foreground service to play an audio track.
Foreground services must display a Notification.
Foreground services continue running even when the user isn't interacting with the app.
When you use a foreground service, you must display a notification so that users are
actively aware that the service is running.
3.3 Fundamentals of UI Design
Service
Types of Services
Background Services
A background service performs an operation that isn't directly noticed by the user.
For example, if an app used a service to compact its storage, that would usually be a
background service.
3.3 Fundamentals of UI Design
Service
Types of Services
Bound Services
A service is bound when an application component binds to it by calling bindService().
A bound service offers a client-server interface that allows components to interact with the
service, send requests, receive results, and even do so across processes with
interprocess communication (IPC).
A bound service runs only as long as another application component is bound to it.
3.4 Android Layouts
A layout defines the structure for a user interface in your app, such as in an activity.
All elements in the layout are built using a hierarchy of View and ViewGroup objects.
A View usually draws something the user can see and interact with.
A ViewGroup is an invisible container that defines the layout structure for View and other
ViewGroup objects.
3.4 Android Layouts
View objects are often called widgets and can be one of many subclasses, such as Button or
TextView.
The ViewGroup objects are usually called layouts and can be one of many types that provide
a different layout structure, such as LinearLayout or ConstraintLayout.
3.4 Android Layouts
Types of Layouts
1. Linear Layout
2. Absolute Layout
3. Frame Layout
4. Relative Layout
5. Table Layout
6. Constraint Layout
Linear Layout
This view group aligns all of its children in a single direction, either vertically or
horizontally.
The android:orientation attribute specifies the layout’s direction.
When the layout’s orientation is set to vertical, all child controls within organized in a
single column, and when the layout’s orientation is set to horizontal, all child controls
within in single row.
Linear Layout
Absolute Layout
Absolute Layout is based on the simple idea of placing each control at an absolute position.
We specify the exact x and y coordinates on the screen for each control.
This is not recommended for most UI development (in fact AbsoluteLayout is currently deprecated).
Since absolutely positioning every element on the screen makes an inflexible UI that is much more
difficult to maintain.
android:layout_x: It specifies X-Coordinate of the Views (Possible
values of this are in dp or px)
android:layout_y: It specifies Y-Coordinate of the Views (Possible
values of this are in dp or px)
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.
The purpose of FrameLayout is to allocate an area of screen.
We can add multiple children’s views and control their positions only by using gravity attributes in
FrameLayout.
Frame Layout
With android:layout_gravity, use the following constant values:
Bottom : Pushes the object to the bottom of its container.
Center : Pushes the object to the center of its container; both horizontal; and vertical axis.
center_horizontal : Pushes the object in the horizontal center of its container.
center_vertical : Pushes the object in the vertical center of its container.
End : Pushes the object to x-axis position at the end of its container.
Left : Pushes the object to the left of its container.
Right : Pushes the object to the right of its container.
Start : Pushes the object to x-axis position at the start of its container.
Top : Pushes the object to the top of its container.
Relative Layout
The Relative Layout is used to arrange the Child Views in a proper order which means arranging the
child objects relative to each other.
The position of each view can be specified as relative to sibling elements or relative to the parent.
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
android:layout_alignParentBottom
android:layout_above
If true, makes the bottom edge of this view match the bottom
Positions the bottom edge of this view above the given edge of the parent. Must be a boolean value, either "true" or
anchor view ID and must be a reference to another "false".
resource.
android:layout_alignParentEnd
android:layout_alignBottom
If true, makes the end edge of this view match the end edge
Makes the bottom edge of this view match the bottom of the parent. Must be a boolean value, either "true" or "false".
edge of the given anchor view ID and must be a reference
to another resource. android:layout_alignParentLeft
android:layout_alignLeft 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".
Makes the left edge of this view match the left edge of the
given anchor view ID and must be a reference to another android:layout_alignParentRight
resource.
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 Attributes
android:layout_alignTop
android:layout_alignParentStart
Makes the top edge of this view match the top edge of the
If true, makes the start edge of this view match the start
given anchor view ID and must be a reference to another
edge of the parent. Must be a boolean value, either "true"
resource.
or "false".
android:layout_below
android:layout_alignParentTop
Positions the top edge of this view below the given anchor
If true, makes the top edge of this view match the top
view ID and must be a reference to another resource.
edge of the parent. Must be a boolean value, either "true"
or "false".
android:layout_toEndOf
android:layout_alignRight
Positions the start edge of this view to the end of the given
anchor view ID and must be a reference to another
Makes the right edge of this view match the right edge of
resource.
the given anchor view ID and must be a reference to
another resource.
android:layout_alignStart android:layout_toRightOf
Makes the start edge of this view match the start edge of Positions the left edge of this view to the right of the given
the given anchor view ID and must be a reference to anchor view ID and must be a reference to another
another resource. resource.
Table Layout
A layout that arranges its children into rows and columns.
A TableLayout constist of a number of TableRow objects, each defining a row.
TableLayout container do not display border lines for their rows, columns or cells.
Each row has zero or more cells, each cell holds one View Object.
Row1
<TableLayout>
Row2 Col2
<TableRow> Row3 Col1
…
Row6
</TableRow>
</TableLayout>
Thank You
