Unit No.

3: UI Components and Layouts

Syllabus
3.1 Control Flow, Directory Structure
3.2 Components of a screen, Fundamental UI Design
3.3 Linear Layout; Absolute Layout; Frame Layout; Table Layout;
Relative Layout
Assignment 3
1)Develop Simple calculator using table Layout. 6M
2)List Eight Alignment attributes of relative layout. 2M
3)Explain Linear Layout and Absolute Layout. 4M
4)Explain Frame Layout, Table Layout and Relative Layout. 4M
5) Explain any four UI Components of android application. 4M
6) Explain Directory Structure. 4M
7)Write all Components of a screen. 4M
8) What is control flow? 2M
9)Write a program to display following output using
suitable layout.4M
10) Observe the following GUI and write an XML file using relative
layout to create the same.4M
11) Develop an android application to calculate age (Use Date Picker)
using following GUI.
3.1 Control Flow, Directory Structure
Control Flow
• Java Programing language can be used in development of android
apps. All resource files are combined together by AAPT [Android
Asset Packing Tool]. Resource files are like audio, video, images
other asset related files.
• AAPT2 parses the single resource file at time and generates an
intermediate binary file with flat extension. It is the base builder for
Android applications.
• Java files converted into .class files by Java compiler. The .class
files that are heavy weight to put into android. So, that one more
level of process will be taken place.
• The .class files are entered as input to DX tool. Basically, this is
a tool which will convert .class files to.dex files. That mean
Dalvik executable file. Those files are eligible to execute on
DVM (Dalvik Virtual Machine)
• After getting .dex files, packed them APK builder. Android IDE
or tools check and compile the dependencies, code, resource
data and generate on APK. APK file comprises all the content of
the app.
• Which is basically, Application Packaging? So, this packed files
kept into devices and that will be executed by DVM.
Main Components of Android
• Activities
• Services
• Content Providers
• Broadcast Receivers
Activities: They dictate the UI and handle the user interaction to the
smart phone screen.
• Single page user interface
• Most apps have multiple activities
• Callable from other apps (if you allow it).
Services:They handle background processing associated with an
application.
• No user interface
• Runs in background
• Started and stopped by activities
Content Provider:They handle data and database
management issues.
• Manages shared set of application data
• Data may be shared between apps or be private
• Performs data handling functions.
Broadcast Receivers:They handle communication
between android OS and application.
• Listens for system wide (intent) broadcasts
• Intent filter limits which intents cared about
• Similar to an interrupt handler
• Redirects to appropriate activity or service
Directory Structure
It is very important to know
about the basics of Android
Studio’s Directory/file
structure.
Some important
files/folders, and their
significance is explained
for the easy understanding
of the Android studio work
environment.
1) Manifests folder:
Every project in Android includes a manifest file, which is
AndroidManifest.xml, stored in the root directory of its project
hierarchy.
An AndroidManifest.xml file is generated inside manifest folder
by Android Studio when you create a project.
The manifest file is an important part of our app because it
defines the structure and metadata of our application, its
components, and its requirement.
This file contains the Activities, Content Providers,
configuration parameters of the project such as
permissions, services, additional libraries and determines
how they co-ordinate with each other and other
applications.
A manifest file also provides information to the OS and
Google Play store about your app.
2. Java folder: The Java folder contains the Java source
code files. These files are used as a controller for
controlled UI (Layout file).
It gets the data from the Layout file and after processing
that data output will be shown in the UI layout.
It works on the backend of an Android application. A
MainActivity.java is automatically created in this folder
by Android Studio.
All of your classes will be available here, and Android
Studio will even bund.
3. Res folder: It contains folders that help you separate
and sort the resources of your application.
Resources basically mean all the needed files except the
source code. For example, while developing an app, you
need to include resource files such as the app-logo,
photos, sounds, videos or animations.
Each file type should be added to its own folder to
comply with the Android development standards. le
together the package path.
4. drawable: The drawable folder contains graphics that can be
drawn to the screen. e.g. images files (png, jpg and gif), various
XML (clip drawable, insert drawable, layer list, level list, scale
drawable, shape draggable, state list, transition drawable), and
predetermined frame animations can be placed here:
• Bitmap file: Android supports bitmap files in three formats:
.png (preferred),
.jpg (acceptable),
.gif (discouraged).
• Nine-Patch file: A PNG nine-patch file with stretchable regions
to allow image resizing based on content.
• Layer list: An XML file that contains an array made up of other
drawables.
• State list: An XML file that is used for images that have
multiple or different states of appearance.
• Level list: An XML file that is used to display other drawables
that can be accessed based on the level requested through
setImageLevel().
• Transition drawable: An XML file that contains a drawable
that can be transitioned between two items.
• Inset drawable: An XML file that is used to place one drawable
inside the bounds of another drawable.
• Clip drawable: An XML file consisting of points that is used in
conjunction with another drawable to create a clipped objected.
• Scale drawable: An XML file that contains a drawable that
changes the dimension value of another drawable based on its
current value.
• Shape drawable :An XML file that contains the values of
geometric shape, color, size, and similar attributes.
5. layout: A layout defines the visual structure for a user
interface, such as the UI for an Android application.
This folder stores Layout files that are written in XML language.
You can add additional layout objects or widgets as child
elements to gradually build a View hierarchy that defines your
layout file.
activity_main.xml is automatically created in this folder by
Android Studio.
Layout folder may have multiple layout folders to handle
different devices.
This can be helpful when working with layouts that need to be
adjusted for devices with more or less screen space available.
6. mipmap: The mipmap folder contains the launcher icon files for the
app. A launcher icon is a graphic that represents your app to users. The
mipmap folder was introduced in Android 4.3.
Mipmap folder contains the Image Asset file that can be used in
Android Studio application. You can generate the following icon types
like Launcher icons, Action bar and tab icons, and Notification icons.
7. Values folder: The values folder contains XML files that contain
simple values, such as strings, integers, and colors. The values folder is
used to keep track of the values you will be using in your application.
To create applications with an easier maintenance cycle, it is highly
recommended to no longer hard-code values into your code. Instead,
place values in XML files inside of the values folder. When you create a
new project with Android Studio, the following XML files will be
generated automatically:
• colors.xml: The colors.xml file contains color resources of the Android
application. Different color values are identified by a unique name that
can be used in the Android application program.
• strings.xml:The strings.xml file contains string resources of the Android
application. The different string value is identified by a unique name that
can be used in the Android application program. This file also stores
string array by using XML language.
• styles.xml:The styles.xml file contains resources of the theme style in the
Android application. This file is written in XML language.
8. build.gradle(Module: app)/ Gradle Scripts: .apk files are built using
the gradle build system, which is integrated in the Android Studio. When
we start an app, the gradle build scripts are automatically created. If you
have special requirements for your project, you can specify these
requirements here. Here you can add dependencies what you need in your
Android application.
Other Directories/folders: Not all folders may be shown for your
resources but you can create other folders for other resources in your
application. Following list describes each folder name as well as what
should be stored in that folder.
1. animator XML files that define property animations.
2. anim XML files that define tween animations.
3. color XML files that define a state list of colors
4. menu XML files that define application menus.
5. raw Any files to save in their raw form. For example, sound and
video files are placed in the raw folder.
6. xml Any XML files that can be read at runtime.
7. font Font files with extensions such as ttf, otf, or ttc, or XML files.
3.2 Components of a screen, Fundamental UI Design
Components of a screen:
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. Screen components
are the essential building blocks of an Android application. These components
are loosely coupled by the application manifest file AndroidManifest.xml that
describes each component of the application and how they interact. 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
Main Action Bar:
Android Action Bar :Is a menu bar that runs across the top of the activity
screen in android. Android ActionBar can contain menu items which
become visible when the user clicks the “menu” button. In general an
ActionBar consists of the following four components:
App Icon: App branding logo or icon will be displayed here
View Control: A dedicated space to display Application title. Also
provides option to switch between views by adding spinner or tabbed
navigation
Action Buttons: Some important actions of the app can be added here .
Action Overflow: All unimportant action will be shown as a menu.
2. View and ViewGroups : An activity is consisting 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.
Types of layout there are many types of layout. Some of which
are listed below – There are many types of layout. Some of which
are listed below –
Linear Layout
Absolute Layout
Table Layout
Frame Layout
Relative Layout
3. Content Area: “The area on the mobile device displaying the
application content including the layout, data, and controls
called content area”. API allows you to provide a custom layout
for the content area normally occupied by the title and text
content
4. Split Action Bar: Since the action items share the action bar
real estate with the app icon and title, you might want to split the
action bar so that the action items appear at the bottom of the
screen. This will give them more space, and thus more items will
be visible to the user. If there is enough space, for example on
larger screens or in landscape mode, the action bar will not be
split.
Fundamental UI Design:
Views Views are the basic User Interface class for visual interface
elements (commonly known as controls or widgets). All User Interface
controls, and the layout classes, are derived from Views. The “views”
are the building blocks of a U.I design and composes of almost every
basic U.I element like TextViews, EditTexts, ImageViews etc. This
‘view’ however comes along with a few properties bundled to them like
id, width, height, margin, padding etc.
ViewGroups :View Groups are extensions of the View class that can
contain multiple child Views. By extending the ViewGroup class, you
can create compound controls that are made up of interconnected child
Views. The ViewGroup class is also extended to provide the layout
managers, such as LinearLayout, that help you compose User Interfaces.
Activities: Activities represent the window or screen being
displayed to the user. Activities are the Android equivalent of a
Form to display a User Interface you assign a View or layout to an
Activity. Android provides several common UI controls, widgets,
and layout managers.
3.3 Types of Layout
There are many types of layout. Some of which are listed below −
Linear Layout
Absolute Layout
Table Layout
Frame Layout
Relative Layout
1. Linear Layout: This 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.
• 2. AbsoluteLayout: The Absolute Layout enables you to specify the
exact location of its children. It can be declared like this.
• android:id This is the ID which uniquely identifies the layout.
• android:layout_x This specifies the x-coordinate of the view.
• android:layout_x This specifies the x-coordinate of the view.
• Public Constructors:
3. Table Layout: The Table Layout groups views into rows and columns.
It can be declared like this.
4 .Relative Layout: The Relative Layout enables you to specify how child views are
positioned relative to each other.

5. Frame Layout: The Frame Layout is a placeholder on screen that you can use to display a
single view. It can be declared like this.