Course Code : CA- CCTP-7

Course Title : - Mobile

Application Development
Using Android
UNIT II – ANDROID UI DESIGN

UNIT - II ANDROID UI DESIGN

1
MS. DIPALI B. TAWAR
 Introduction
Android UI designing can be done either in XML or programmatically in
application. But the Android UI designer mostly prefer XML for defining UI
because it separate the presentation from the code and makes easier to visualize,
manage, edit and debug the App.
The basic building block for user interface is a View object which is created from
the View class and occupies a rectangular area on the screen and is responsible for
drawing and event handling. View is the base class for widgets, which are used to
create interactive UI components like buttons, text fields, etc. A view is considered
a building block for a proper User Interface created from the view class.
A view can also be defined as a small rectangular box in Android development that
responds to the user inputs, for example, buttons, checkboxes, etc. Basically, a
View is what a user sees and interacts with.
The ViewGroup is a subclass of View and provides invisible container that hold
other Views or other ViewGroups and define their layout properties.
At third level we have different layouts which are subclasses of ViewGroup class
and a typical layout defines the visual structure for an Android user interface.

UNIT - II ANDROID UI DESIGN

MS. DIPALI B. TAWAR
2
 Layout in Android
▪Layout are used to define the actual UI(User interface) of
our application. It holds all the elements (i.e. views) or the
tools that we want to use in our application.
▪For example, TextView, Button and other UI elements.
▪A layout may contain any type of widgets such as buttons,
labels, textboxes, and so on.

UNIT - II ANDROID UI DESIGN

MS. DIPALI B. TAWAR
3
 Android Layout Types
Sr.No. Layout Description
LinearLayout is a view group that aligns all children in
1 Linear Layout
a single direction, vertically or horizontally.
RelativeLayout is a view group that displays child
2 Relative Layout
views in relative positions.
TableLayout is a view that groups views into rows and
3 Table Layout
columns.
AbsoluteLayout enables you to specify the exact
4 Absolute Layout
location of its children.
The FrameLayout is a placeholder on screen that you
5 Frame Layout
can use to display a single view.
ListView is a view group that displays a list of
6 List View
scrollable items.
GridView is a ViewGroup that displays items in a
7 Grid View
two-dimensional, scrollable grid.

UNIT - II ANDROID UI DESIGN

4
MS. DIPALI B. TAWAR
 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
their are other attributes which are specific to that layout.
Sr.No. Attribute Description
This is the ID which uniquely
1 android:id
identifies the view.
2 android:layout_width This is the width of the layout.
3 android:layout_height This is the height of the layout
This is the extra space on the top
4 android:layout_marginTop
side of the layout.
This is the extra space on the
5 android:layout_marginBottom
bottom side of the layout.

UNIT - II ANDROID UI DESIGN

5
MS. DIPALI B. TAWAR
 Cont.….Layout Attributes
Sr.No. Attribute Description
This is the extra space on the left side of the
6 android:layout_marginLeft
layout.
This is the extra space on the right side of the
7 android:layout_marginRight
layout.
8 android:layout_gravity This specifies how child Views are positioned.
This specifies how much of the extra space in
9 android:layout_weight
the layout should be allocated to the View.
10 android:layout_x This specifies the x-coordinate of the layout.
11 android:layout_y This specifies the y-coordinate of the layout.

12 This is the width of the layout.

android:layout_width
13 android:paddingLeft This is the left padding filled for the layout.

UNIT - II ANDROID UI DESIGN

6
MS. DIPALI B. TAWAR
 Cont.….Layout Attributes
Sr.No. Attribute Description
This is the right padding filled for the
14 android:paddingRight
layout.

15 android:paddingTop This is the top padding filled for the layout.

This is the bottom padding filled for the

16 android:paddingBottom
layout.

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).

UNIT - II ANDROID UI DESIGN

7
MS. DIPALI B. TAWAR
 Units of Measurement

Unit Description
dp Density-independent pixel. 1 dp is equivalent to one pixel on
a 160 dpi screen.
sp Scale-independent pixel. This is similar to dp and is
recommended for specifying font sizes
pt Point. A point is defined to be 1/72 of an inch, based on the
physical screen size.
px Pixel. Corresponds to actual pixels on the screen

UNIT - II ANDROID UI DESIGN

8
MS. DIPALI B. TAWAR
 Optimizing layouts

There are some of the guidelines for creating

efficient layouts.
•Avoid unnecessary nesting
•Avoid using too many Views
•Avoid deep nesting

UNIT - II ANDROID UI DESIGN

9
MS. DIPALI B. TAWAR
 Widgets
A widget is a small gadget or control of your android
application placed on the home screen. Widgets can be very
handy as they allow you to put your favourite applications
on your home screen in order to quickly access them. You
have probably seen some common widgets, such as music
widget, weather widget, clock widget e.t.c
Widgets could be of many types such as information
widgets, collection widgets, control widgets and hybrid
widgets. Android provides us a complete framework to
develop our own widgets.

UNIT - II ANDROID UI DESIGN

10
MS. DIPALI B. TAWAR
 Cont.…..Widgets
1. Information Widgets:
•Information widgets typically display a few crucial information elements and
track how that information changes over time. Good examples for information
widgets are weather widgets, clock widgets or sports score tracking widgets.
Touching information widgets typically launches the associated app and opens a
detailed view of the widget information.
2. Control Widgets:
Collection widgets specialize in displaying multiple elements of the same type,
such as a collection of pictures from a gallery app, a collection of articles from a
news app or a collection of emails/messages from a communication app.
Collection widgets can scroll vertically.
Collection widgets typically focus on the following use cases:
•Browsing the collection
•Opening an element of the collection to its detail view in the associated app for
consumption
•Interacting with elements such as marking them done

UNIT - II ANDROID UI DESIGN

11
MS. DIPALI B. TAWAR
 Cont.….Widgets
3. Control Widgets:
The main purpose of a control widget is to display often-used functions, so that the
user can trigger right from the home screen without having to open the app first. You
can think of them as remote controls for an app. An example of a control widget is a
home control widget that lets users turn lights on or off in different rooms of a house.
Interacting with a control widget may or may not open an associated detail view in
the app. This depends on whether the control widget's function outputs any data, such
as in the case of a search widget.
4. Hybrid widgets:
While some widgets tend to gravitate towards one of the types in the preceding
sections (information, collection, or control), many widgets in reality are hybrids that
combine elements of different types.
A music player widget is primarily a control widget, but also keeps the user informed
about what track is currently playing. It essentially combines a control widget with
elements of an information widget type. When planning your widget, design around
one of the base types and add elements of other types if needed.

UNIT - II ANDROID UI DESIGN

12
MS. DIPALI B. TAWAR
 Widget - XML file
In order to create an application widget, first thing you need is
AppWidgetProviderInfo object, which you will define in a separate widget XML file.
In order to do that, right click on your project and create a new folder called xml. Now
right click on the newly created folder and create a new XML file. The resource type
of the XML file should be set to AppWidgetProvider.
Widget - Layout file
Now you have to define the layout of your widget in your default XML file. You can
drag components to generate auto xml.
Widget - Java file
After defining layout, now create a new JAVA file or use existing one, and extend it
with AppWidgetProvider class and override its update method as follows.
In the update method, you have to define the object of two classes which are
PendingIntent and RemoteViews. Its syntax is −
PendingIntent pending=PendingIntent.getActivity(context,0,intent,0);
RemoteViews views = new RemoteViews(context.getPackageName(),
R.layout.activity_main);

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 13

 Cont.…..Widgets
In the end you have to call an update method updateAppWidget() of the
AppWidgetManager class. Its syntax is −
appWidgetManager.updateAppWidget(currentWidgetId,views);

Sr.No. Method Name Description

1 onDeleted(Context context, int[] appWidgetIds)
2 onDisabled(Context context)
3 onEnabled(Context context)
4 onReceive(Context context, Intent intent)
This is called when an instance of
AppWidgetProvider is deleted.
This is called when the last instance of
AppWidgetProvider is deleted
This is called when an instance of
AppWidgetProvider is created.
It is used to dispatch calls to the various
methods of the class

UNIT - II ANDROID UI DESIGN

14
MS. DIPALI B. TAWAR
 Intent

Android uses Intent for communicating between the components of an

Application and also from one application to another application.
Intent are the objects which is used in android for passing the
information among Activities in an Application and from one app to
another also. Intent are used for communicating between the
Application components and it also provides the connectivity between
two apps.
It is generally used with startActivity() method to invoke activity,
broadcast receivers etc.
The dictionary meaning of intent is intention or purpose. So, it can be
described as the intention to do action.

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 15

Intent Types

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 16

 Explicit Intent:

•Explicit Intents are used to connect the application

internally.
•In Explicit we use the name of component which will be
affected by Intent. For Example: If we know class name then
we can navigate the app from One Activity to another
activity using Intent. In the similar way we can start a
service to download a file in background process.
Explicit Intent work internally within an application to
perform navigation and data transfer. The below given code
snippet will help you understand the concept of Explicit
Intents

UNIT - II ANDROID UI DESIGN

17
MS. DIPALI B. TAWAR
 Implicit Intent

•In Implicit Intents we do need to specify the name of the

component. We just specify the Action which has to be
performed and further this action is handled by the
component of another application.
•The basic example of implicit Intent is to open any web page

UNIT - II ANDROID UI DESIGN

18
MS. DIPALI B. TAWAR
 Toast in Android
Andorid Toast can be used to display information for the
short period of time. A toast contains message to be
displayed quickly and disappears after sometime.
The android.widget.Toast class is the subclass of
java.lang.Object class.
We can also create custom toast.
Toast class
Toast class is used to show notification for a particular
interval of time. After sometime it disappears. It doesn't
block the user interaction.

UNIT - II ANDROID UI DESIGN

19
MS. DIPALI B. TAWAR
 Constants of Toast class
There are only 2 constants of Toast class which are given below.
Constant Description
public static final int LENGTH_LONG displays view for the long duration of time.
public static final int LENGTH_SHORT displays view for the short duration of time.

Methods of Toast class

The widely used methods of Toast class are given below.
Method Description
public static Toast makeText(Context context, makes the toast containing text and duration.
CharSequence text, int duration)
public void show() displays toast.
public void setMargin (float horizontalMargin, changes the horizontal and vertical margin
float verticalMargin) difference.

UNIT - II ANDROID UI DESIGN

20
MS. DIPALI B. TAWAR
 Events Handling
•Events are a useful way to collect data about a user's interaction with
interactive components of Applications. Like button presses or screen touch etc.
•There are following three concepts related to Android Event Management −
•Event Listeners − An event listener is an interface in the View class that contains
a single callback method. These methods will be called by the Android framework
when the View to which the listener has been registered is triggered by user
interaction with the item in the UI.
•Event Listeners Registration − Event Registration is the process by which an
Event Handler gets registered with an Event Listener so that the handler is called
when the Event Listener fires the event.
•Event Handlers − When an event happens and we have registered an event
listener for the event, the event listener calls the Event Handlers, which is the
method that actually handles the event.

UNIT - II ANDROID UI DESIGN

21
MS. DIPALI B. TAWAR
 Event Listeners and Event
Event Handler
Handlers Event Listener & Description

OnClickListener()
onClick() This is called when the user either clicks or touches or focuses upon any widget like button, text, image etc.
You will use onClick() event handler to handle such event.
OnLongClickListener()
onLongClick() This is called when the user either clicks or touches or focuses upon any widget like button, text, image etc. for
one or more seconds. You will use onLongClick() event handler to handle such event.
OnFocusChangeListener()
onFocusChange() This is called when the widget looses its focus ie. user goes away from the view item. You will use
onFocusChange() event handler to handle such event.
OnFocusChangeListener()
onKey() This is called when the user is focused on the item and presses or releases a hardware key on the device. You
will use onKey() event handler to handle such event.
OnTouchListener()
onTouch() This is called when the user presses the key, releases the key, or any movement gesture on the screen. You will
use onTouch() event handler to handle such event.
OnMenuItemClickListener()
onMenuItemClick() This is called when the user selects a menu item. You will use onMenuItemClick() event handler to handle such
event.
onCreateContextMenuItemListener()
onCreateContextMenu()
This is called when the context menu is being built(as the result of a sustained "long click)
UNIT - II ANDROID UI DESIGN
22
MS. DIPALI B. TAWAR
 Adapter in Android
•Adapter is a bridge between UI component and data source that helps us
to fill data in UI component. It holds the data and send the data to
an Adapter view then view can takes the data from the adapter view and
shows the data on different views like
as ListView, GridView, Spinner etc. For more customization in Views
we uses the base adapter or custom adapters.
•To fill data in a list or a grid we need to implement Adapter. Adapters
acts like a bridge between UI component and data source. Here data
source is the source from where we get the data and UI components are
list or grid items in which we want to display that data.

UNIT - II ANDROID UI DESIGN

23
MS. DIPALI B. TAWAR
Conceptual Diagram of
Adapter

UNIT - II ANDROID UI DESIGN

24
MS. DIPALI B. TAWAR
 Adapters In Android
There are the some commonly used Adapter in Android used to fill the
data in the UI components.
1) BaseAdapter – It is parent adapter for all other adapters. BaseAdapter
is a common base class of a general implementation of an Adapter that
can be used in ListView, GridView, Spinner etc. Whenever we need a
customized list in a ListView or customized grids in
a GridView we create our own adapter and extend base adapter in that.
Base Adapter can be extended to create a custom Adapter for displaying
a custom list item. ArrayAdapter is also an implementation of
BaseAdapter.
2) ArrayAdapter - Whenever we have a list of single items which is
backed by an Array, we can use ArrayAdapter. For instance, list of
phone contacts, countries or names.

UNIT - II ANDROID UI DESIGN

25
MS. DIPALI B. TAWAR
 Cont.….Adapters in Android
3. Custom ArrayAdapter In Android:
It is used whenever we need to display a custom list. ArrayAdapter is also an implementation
of BaseAdapter, so if we want more customization then we can create a custom adapter and
extend ArrayAdapter in that. Since array adapter is an implementation of BaseAdapter, so
we can override all the function’s of BaseAdapter in our custom adapter.
4. SimpleAdapter In Android:
It is an easy adapter to map static data to views defined in your XML file. In Android
SimpleAdapter is an easy Adapter to map static data to views defined in
an XML file(layout). In Android we can specify the data backing to a list as an ArrayList
of Maps(i.e. hashmap or other). Each entry in a ArrayList is corresponding to one row of a
list.
The Map contains the data for each row. Here we also specify an XML file(custom list
items file) that defines the views which is used to display the row, and a mapping from
keys in the Map to specific views.
Whenever we have to create a custom list we need to implement custom adapter. As we
discuss earlier ArrayAdapter is used when we have a list of single item’s backed by an
Array. So if we need more customization in a ListView or a GridView we need to
implement simple adapter.

UNIT - II ANDROID UI DESIGN

26
MS. DIPALI B. TAWAR
 Cont.….Adapters in Android
5. Custom SimpleAdapter In Android:
It is used whenever we need to display a customized list and needed to
access the child items of the list or grid. Whenever we have to create a
custom list we need to implement custom adapter. As we discuss earlier
ArrayAdapter is used when we have a list of single item’s backed by an
Array. So if we need customization in a ListView or a GridView we
need to implement simple Adapter but when we need more
customization in list or grid items where we have many view’s in a list
item and then we have to perform any event like click or any other event
to a particular view then we need to implement a custom adapter who
fulfills our requirement’s and quite easy to be implemented.
BaseAdapter is the parent adapter for all other adapters so if we extends
a SimpleAdapter then we can also override the base adapter’s function in
that class.

UNIT - II ANDROID UI DESIGN

27
MS. DIPALI B. TAWAR
 Menu
•Android Option Menus are the primary menus of android.
They can be used for settings, search, delete item etc.
•We are inflating the menu by calling the inflate() method
of MenuInflater class. To perform event handling on menu
items, you need to
override onOptionsItemSelected() method of Activity
class.
There are 3 types of menus in Android:
1.Option Menu
2.Context Menu
3.Pop-up Menu

UNIT - II ANDROID UI DESIGN

28
. DIPALI B. TAWAR
 Options Menu
•The options menu is the primary
collection of menu items for an
activity. It's where we should place
actions that have a overall impact
on the app, such as Search,
Compose Email and Settings.
•The Options Menu is a collection
of options for an activity. It has a
set of items that are useful to
perform actions. It helps us to
combine multiple actions together.

UNIT - II ANDROID UI DESIGN

MS. DIPALI B. TAWAR
29
 Context Menu

•A contextual menu is a
floating menu. It appears
only when the users
long-press an element or
right clicks on that. It
generally affects the select
• Its position is not fixed and
usually appears just beside
the element you did a long
press. ed element.

UNIT - II ANDROID UI DESIGN

MS. DIPALI B. TAWAR
30
 PopUp Menu

•Pop-Up menu is a menu that

displays a list of items in a
popup window. A pop-up
menu appears below the
view by default, in case there
is no space, it appears above
it.
•A popup menu displays a list
of items in a vertical list that
is anchored(sticked) to the
view that invoked the menu.

UNIT - II ANDROID UI DESIGN

MS. DIPALI B. TAWAR
31
 Fragments
A Fragment is a piece of an activity which enable more modular activity
design. It will not be wrong if we say, a fragment is a kind of sub-activity.
•A fragment has its own layout and its own behaviour with its own life cycle
callbacks.
•You can add or remove fragments in an activity while the activity is running.
•You can combine multiple fragments in a single activity to build a multi-pane
UI.
•A fragment can be used in multiple activities.
•Fragment life cycle is closely related to the life cycle of its host activity which
means when the activity is paused, all the fragments available in the activity
will also be stopped.
•A fragment can implement a behavior that has no user interface component.

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 32

 Cont.…..
We can create fragments by extending Fragment class and
we can insert a fragment into our activity layout by declaring
the fragment in the activity's layout file, as
a <fragment> element.
Prior to fragment introduction, we had a limitation because
we can show only a single activity on the screen at one given
point in time. So, we were not able to divide device screen
and control different parts separately. But with the
introduction of fragment, we got more flexibility and
removed the limitation of having a single activity on the
screen at a time. Now we can have a single activity, but each
activity can comprise of multiple fragments which will have
their own layout, events and complete life cycle.

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 33

Fragment Life Cycle

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 34

 Cont.…..
The list of methods which we can override in our fragment class −
Method Description
onAttach() The fragment instance is associated with an activity instance. The
fragment and the activity is not fully initialized. Typically, we get in this
method a reference to the activity which uses the fragment for further
initialization work.

onCreate() The system calls this method when creating the fragment. We should
initialize essential components of the fragment that we want to retain
when the fragment is paused or stopped, then resumed.

onCreateView() The system calls this callback when it's time for the fragment to draw its
user interface for the first time. To draw a UI for your fragment, you
must return a View component from this method that is the root of your
fragment's layout. You can return null if the fragment does not provide a
UI.

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 35

 Cont.…..
Method Description

onActivityCreated() The onActivityCreated() is called after the onCreateView() method when the
host activity is created. Activity and fragment instance have been created as
well as the view hierarchy of the activity. At this point, view can be accessed
with the findViewById() method. example. In this method you can instantiate
objects which require a Context object.

onStart() The onStart() method is called once the fragment gets visible.

onResume() Fragment becomes active.

onPause() The system calls this method as the first indication that the user is leaving the
fragment. This is usually where you should commit any changes that should
be persisted beyond the current user session.`

onStop() Fragment going to be stopped by calling onStop()

onDestroyView() Fragment view will destroy after call this method

onDestroy() onDestroy() called to do final clean up of the fragment's state but Not
guaranteed to be called by the Android platform.

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 36

 How to use Fragments?
This involves number of simple steps to create Fragments.
•First of all, decide how many fragments we want to use in an activity.
For example, let's we want to use two fragments to handle landscape and
portrait modes of the device.
•Next based on number of fragments, create classes which will extend
the Fragment class. The Fragment class has above mentioned callback
functions. We can override any of the functions based on our
requirements.
•Corresponding to each fragment, we will need to create layout files in
XML file. These files will have layout for the defined fragments.
•Finally modify activity file to define the actual logic of replacing
fragments based on your requirement.

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 37

 Types of Fragments
Basically, fragments are divided as three stages as shown
below
•Single frame fragments − Single frame fragments are using
for hand hold devices like mobiles, here we can show only
one fragment as a view.
•List fragments − fragments having special list view is
called as list fragment
•Fragments transaction − Using with fragment transaction.
we can move one fragment to another fragment.

UNIT - II ANDROID UI DESIGN MS. DIPALI B. TAWAR 38