UNIT 3
UI Components and
Layouts
Content:
3.1 - Components of android application
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.
Components of android application
• App components are the essential building blocks of an
Android app.
• Each component is an entry point through which the
system or a user can enter your app.
There are four types of app components:
• Activities
• Services
• Broadcast receivers
• Content providers
Activities
• An activity represents a single screen with a user interface,
in-short Activity performs actions on the screen.
• For example, an email application might have one activity that
shows a list of new emails, another activity to compose an
email, and another activity for reading emails.
• If an application has more than one activity, then one of them
should be marked as the Main activity that is presented when
the application is launched.
• An activity is implemented as a subclass
of Activity class as follows −
• public class MainActivity extends Activity { }
Services
• A service is a component that runs in the background to
perform long-running operations.
• For example, a service might play music in the background
while the user is in a different application.
A service is implemented as a subclass of Service class as follows
−
• public class MyService extends Service { }
Broadcast Receivers
• Broadcast Receivers simply respond to broadcast messages
from other applications or from the system.
• Broadcasts are generated by the system ex. Broadcasts
announcing that battery is low , pitcure has been captured,
screen has turned off etc.
• Broadcast receivers do not display user interface but they may
create status bar notification to alert the user.
• A broadcast receiver is implemented as a subclass
of BroadcastReceiver class and each message is broadcaster
as an Intent object.
• public class MyReceiver extends BroadcastReceiver
{ public void onReceive(context, intent){
}
}
Content Providers
• A content provider component supplies data from one
application to others on request.
• Through the content provider, other apps can modify the data
if the content provider allows it.
• A content provider is implemented as a subclass
of ContentProvider class and must implement a standard set
of APIs .
• public class MyContentProvider extends
ContentProvider {
public void onCreate(){
}
}
• Activities
Handle the user interaction to the smart phone screen.
• Services
They handle background processing associated with an
application.
• Broadcast Receivers
They handle communication between Android OS and
applications.
• Content Providers
They handle data and database management issues.
Control Flow
To build well designed app you need to have a proper
control flow as below:
• Step1: setup your workspace: Installation
• Step2: Write your app: create app(Tools)
• Step3: Build and Run: Run app
• Step4: Debug, profile, and test: app performance.
• Step5: Publish: Ready to release.
Android Application Directory Structure
• Some important files/folders, and understanding of
the Android studio work environment are shown in
figure.
• A project in android contains everything related to
your app.
• Whenever a new project is created in android
studio,it creates all the necessary structure required
for structuring your files.
Modules:
• A module is the collection of source file and build
settings that helps to divide the project into smaller
units of functionality.
• In above figure “app” folder represents a module in
the project.
• you can add number of modules to your project and
each module can be independently build, tested and
debugged.
There are different types of module
1. Android app module: it is the container for your App
source code, resource files and app level settings files.
2. dynamic feature module : it provides the users with
some features on demand.
3. Library module : it is the container for storing your
reusable code which you can use in other modules or import into
other projects.
4. Google Cloud module: it provides a container for Google
Cloud backend code. thus you can develop your backend using
Google Cloud Service and connect it to your app.
Project module contain three elements:
1.Manifests/
• The manifest file describe the essential information
about your app to the Android build tool the Android
operating system.
• It contains declaration of a package and also contains
the permissions required by the app and the
hardware and software features required to install
the app.
2. Java/
• The Java folder contains the Java source code files of
the application organized into packages.
• This is the main activity. it's the entry point of your
App.
• It’s always a good practice to break the source code
of the application into different packages based on its
core functionality.
3.Res/
• Resource folder is where all the external resources for
the application such as image, layout XML files, strings,
animations, audio files etc. are stored.
it contain the following sub folders
• Drawable :This contain the bitmap file to be used in the
program.
• Layout: It contains XML files that define the user
interface
• Menu : XML files that define menus for the application
• Mipmap: used for placing the app icon only
• Values: XML files that defines simple values such as
string, array, integers, dimensions, colour ,styles etc.
Gradle Scripts
• A gradle scripts are used to automate tasks.
• Android studio performs application builds in the
background without any intervention for the
developer.
• This build process is handled using the gradle
system.
Components of Screen
• A screen is the basic element of GUI which holds
the interface for the user.
• Android Screen contain the 4 components:
1. Activity
2. Layout
3. Views
4. ViewGroup
1. Activity:
• An activity is a single, focused thing that the user can do.
• Almost all activities interact with the user, so activity class
takes care of creating a window in which you can place your
UI.
2. Layout:
• It is a type of resource which gives the definition on what is
drawn on the screen or how elements are placed on the
device’s screen.
• It can also be a type of View class to organize other controls.
3. Views
• The basic building block for user interface is a View.
• View object is created from the View class and occupies a
rectangular area on the screen.
• It is responsible for drawing and event handling.
• Ex. Buttons, labels and text boxes.
4. ViewGroup
• The ViewGroup is a subclass of View and provides invisible
container that hold other Views or other ViewGroups and
define their layout properties.
Fundamental UI Design
• User interface is the one through which the user
interacts with the application Hence it plays vital role
in app development.
• Android provides a variety of pre built UI
components that allows us to build graphical user
interface for the app.
Layout/ Viewgroup: A layout defines the structure for
the user interface in the app.
Layout are built using a hierarchy of View and
ViewGroup objects.
Ex. Linear Layout, Frame Layout.
View: It is the base class for all visual components.
All the controls present in an android app are derived
from this class.
Activities: Activity is used for creating user interface.
Android App consists of several activities that exchange
data and information.
Fragments:
• This component encapsulates a
single piece of UI interface.
• It represents a behaviour of
user interface.
• We combine multiple fragments
in a single activity.
• Notifications Overview:
• A notification is a message
that android displays outside
your app’s.
• User can tap the notification
to open your app or take action
directly from the notification.
App Bar/ Action Bar:
The action bar is a dedicated bar at the top of each
screen that is generally persistent throughout the app.
It provides you several key function which are as
following −
1.App Icon
2.View control
3.Action buttons
4.Action overflow
• Viewpager:
• Android Viewpager is the
support library and it allows
the user to swipe left or right
to see an entirely new screen.
Layouts
• Android Layout is used to define the user interface that
holds the UI controls or widgets that will appear on the
screen of an android application or activity screen.
• Layouts are the containers which are used for laying all
other elements within them.
• Every application is a combination of View and
ViewGroup.
• All the elements in a layout are built using a hierarchy
of View and ViewGroup objects.
• Thus Layout defines the visual structure of the UI
Layout can be declared in 2 ways:
1.Declare UI elements in xml:
• Android provides a straightforward XML vocabulary.
• Use Android Studio's Layout Editor to build your XML
layout using a drag-and-drop interface.
2. Instantiate layout elements at runtime:
• app can create View and ViewGroup objects and
manipulate their properties programmatically.
Types of Layout
There are many types of layout.
• Linear Layout
• Absolute Layout
• Frame Layout
• Table Layout
• Relative Layout
1.Linear Layout
• Linear layout is further divided into horizontal and vertical
layout based on the orientation property.
• It means it can arrange views in a single column or in a
single row.
2.Absolute Layout
• Absolute Layout is used to design the custom layouts.
• In this layout you can specify the exact location of its
children by using x and y coordinates.
• Absolute layout are harder to maintain for different mobile
screen sizes than other types of layouts because we set
the exact location of a child view.
• Absolute layout is depreciated in Android 1.5
Absolute Layout
3.Frame Layout
Frame Layout will act as a placeholder on the screen and it is
used to hold a single child view.
Frame Layout should be used to host a single child view, as it
can be difficult to organize child views in a manner that is
scalable to various screen sizes without the children
overlapping.
you add several children to a Frame Layout and manage their
position by providing gravity to each child using the
android: layout gravity feature.
4.Table Layout
• Android Table Layout arranged groups of views into rows and
columns.
• You 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.
• Table Layout containers do not display border lines for their
rows, columns, or cells.
5.Relative Layout
• Relative Layout is a view group that displays child views in
relative positions.
• A Relative Layout is a very powerful utility for designing a
user interface because it can eliminate nested view groups
and keep your layout hierarchy flat, which improves
performance.
• If you find yourself using several nested Linear Layout
groups, you may be able to replace them with a single
Relative Layout.
Thank You
