Mad Unit Ii-1

MOBILE APPLICATION DEVELOPMENT
UNIT II: ANDROID UI DESIGN
Objective: To understand the basic concepts of user interface related to

app development.
GUI for Android: activities lifecycle–Android v7 support library –Intent:

Intent object – Intent filters– Adding categories – Linking activities – User
Interface design components–Basic Views – Picker Views – List View –
Specialized Fragment– Gallery and Image View – Image Switcher – Grid
View, Options Menu – Context Menu – Clock View –Web view–Recycler
View.
GUI for Android

Activities lifecycle
 In android, Activity represents a single screen with a user interface

(UI) of an application and it will acts an entry point for users to
interact with an app.
 The android apps will contain multiple screens and each screen of our
application will be an extension of Activity class.
 By the help of activity, you can place all your UI components or
widgets in a single screen.
P.Nivetha Page 1
 From the multiple activities in android app, one activity can be
marked as a main activity and that is the first screen to appear when
we launch the application.
Android Activity Lifecycle
In android, Activity class have 7 callback methods to describe how
the activity will behave at different stages.
Android Activity Lifecycle Callback Methods
 In android, an activity goes through a series of states during its
lifetime.
 By using callback methods we can get the activity transitions
between the states.
 Android system initiates its program within an Activity starting with a
call on onCreate() callback method. There is a sequence of callback
methods that start up an activity and a sequence of callback methods
that tear down an activity.
P.Nivetha Page 2
Android Activity Lifecycle methods
Android Activity Lifecycle Diagram
Generally, in android activity class uses different callback methods
like onCreate(), onStart(), onPause(), onRestart(), onResume(), onStop() and
onDestroy() to go through a different stages of activity life cycle.
Following is the pictorial representation of the Android Activity Life cycle
which shows how Activity will behave in different stages using callback
methods.
P.Nivetha Page 3
Whenever the user trying to leave an activity like switching from one
app to another app, the system will use callback methods to dismantle the
activity completely or partially to resume the activity from where the user
left off.
Based on our requirements we can implement the activity in the
android app using the callback method and it’s not necessary to use all
callback methods in each android application.
P.Nivetha Page 4
Android Activity Lifecycle Example

activity_main.xml
<? xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout xmlns:android="http://sche
mas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="example.javatpoint.com.activitylifecycle.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
P.Nivetha Page 5
MainActivity.java
package example.activitylifecycle;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.d("lifecycle","onCreate invoked");
}
@Override
protected void onStart() {
super.onStart();
Log.d("lifecycle","onStart invoked");
}
@Override
protected void onResume() {
super.onResume();
Log.d("lifecycle","onResume invoked");
}
@Override
protected void onPause() {
super.onPause();
Log.d("lifecycle","onPause invoked");
}
P.Nivetha Page 6
@Override
protected void onStop() {
super.onStop();
Log.d("lifecycle","onStop invoked");
}
@Override
protected void onRestart() {
super.onRestart();
Log.d("lifecycle","onRestart invoked");
}
@Override
protected void onDestroy() {
super.onDestroy();
Log.d("lifecycle","onDestroy invoked");
}
}
P.Nivetha Page 7
Android v7 support library

The Android Support Library package contains several libraries that
can be included in your application. Each of these libraries supports a
specific range of Android platform versions and set of features.
v4 Support Libraries
These libraries include the largest set of APIs compared to the
other libraries, including support for application components, user
interface features, accessibility, data handling, network connectivity, and

programming utilities.
Some Specific Component included:
1.v4 compat library
Provides compatibility wrappers for a number of framework APIs.
The Gradle build script dependency identifier for this library is as

follows:
com.android.support:support-compat:28.0.0
2. v4 core-utils library
Provides a number of utility classes, such
as AsyncTaskLoader and PermissionChecker.
P.Nivetha Page 8

follows:
com.android.support:support-core-utils:28.0.0
3. V4 core-ui library
Implements a variety of UI-related components, such
as ViewPager, NestedScrollView, and ExploreByTouchHelper.

follows:
com.android.support:support-core-ui:28.0.0
4. v4 media-compat library
Backports portions of the media framework,
including MediaBrowser and MediaSession.

follows:
com.android.support:support-media-compat:28.0.0
5.v4 fragment library
Adds support for Android fragments.
The Gradle build script dependency identifier for this library is as follows:
com.android.support:support-fragment:28.0.0
P.Nivetha Page 9
v7 Support Libraries
The v7 support library includes both compatibility libraries and
additional features.
The v7 support library includes all the v4 support libraries, so you
don't have to add those separately. A dependency on the v7 support
library is included in every new Android Studio project, and new activities
in your project extend from AppCompatActivity.
This library adds support for the Action Bar user interface design
pattern.
This library includes support for material design user interface
implementations.
Components - Material Design
Some Specific Component included:
1.v7 card view library

Provides the CardView class, a view that lets you show information
inside cards.
P.Nivetha Page 10
com.android.support:cardview-v7:28.0.0
2. v7 grid layout library
Includes the GridLayout class, which allows you to arrange UI elements
using a grid of rectangular cells
com.android.support:gridlayout-v7:28.0.0
P.Nivetha Page 11
3. v7 media router library
Provides MediaRouter and related media classes that support

Google Cast.
com.android.support:mediarouter-v7:28.0.0
P.Nivetha Page 12
4. v7 palette library
Implements the Palette class, which lets you extract prominent
colors from an image.
com.android.support:palette-v7:28.0.0
P.Nivetha Page 13
5. v7 recycler view library
Provides the RecyclerView class, a view for efficiently displaying
large data sets by providing a limited window of data items.
6.v7 Preference Support Library
Provides APIs to support preference objects in app settings.
P.Nivetha Page 14
com.android.support:preference-v7:28.0.0
P.Nivetha Page 15
Intent
Intent is a messaging object which is used to request an action from

another app component such as activities, services, broadcast receivers,
and content providers.
Intents will help us to maintain the communication between app
components from the same application as well as with the components of
other applications.
Usage of Android Intents:
P.Nivetha Page 16
Building an Intent Object
Intent object contains the information required to determine which
component to start and the information about the action to be performed
by the recipient component.
The primary information contained in an Intent is the following:
1. Component Name
It defines the name of the component to start and by using the
component name android system will deliver intent to the specific app
component defined by the component name.
In case if we didn’t define component name then the android system

will decide which component should receive intent based on other intent
information such as action, data, etc.
2.Action
It defines the name of the action to be performed to start an activity.
The following are some of the common actions to start an activity.
P.Nivetha Page 17
3. Data
It specifies a type of data to an intent filter. When we create an intent,
it’s important to specify the type of data (MIME type) in addition to its URI.
4. Category
In, the android category is optional for intents and it specifies the
additional information about the type of component that should handle an
intent.
We can specify a category for intent by using addCategory().
The above properties (Component Name, Action, Data, and Category) will
represent the characteristics of an intent.
P.Nivetha Page 18
Android Intent Types
There are two types of intents available in android,
1. Explicit Intents
 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.
 By using explicit intents we can send or share data/content from

one activity to another activity based on our requirements.
 To create an Explicit Intent, we need to define the component
name for an Intent object.
Syntax:
Intent i = new Intent(getApplicationContext(), ActivityTwo.class);

startActivity(i);
P.Nivetha Page 19
2. Implicit Intents
 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.
For example, by using implicit intents we can request another app to show
the location details of the user or etc.
P.Nivetha Page 20
Syntax:
Intent intent=new Intent(Intent.ACTION_VIEW);

intent.setData(Uri.parse("https://www.google.co.in/"));
startActivity(intent);
P.Nivetha Page 21
Intent Filter
Intent Filter are the components which decide the behavior of
an intent. The Intent is about the navigation of one activity to another, that
can be achieve by declaring intent filter. We can declare an Intent Filter for
an Activity in manifest file.
Intent Filter in Manifest File
P.Nivetha Page 22
Elements in Intent Filter:
There are following three elements in an intent filter:
1. Action
2. Data
3. Category
Note: Every intent filter must contain action element in it. Data and
category element is optional for it.
1. Action:
It represent an activities action, what an activity is going to do. It is
declared with the name attribute as given below
<action android:name = "string" />
An Intent Filter element must contain one or more action element.

Action is a string that specifies the action to perform. You can declare your
own action as given below. But we usually use action constants defined by
Intent class.
<intent-filter . . . >
<action android:name="com.example.project.SHOW_CURRENT" />
<action android:name="com.example.project.SHOW_RECENT" />
<action android:name="com.example.project.SHOW_PENDING" />
...
</intent-filter>
P.Nivetha Page 23
There are few common actions for starting an activity like ACTION_VIEW
ACTION_VIEW: This is used in an Intent with startActivity(). This helps when
you redirect to see any website, photos in gallery app or an address to view
in a map app.
There are more actions similar to above like, ACTION_SEND,
ACTION_MAIN, ACTION_WEB_SEARCH and many more.
2. <category>
This attribute of Intent filter dictates the behavior or nature of an

Intent.
There is a string which contains some additional information about
the intent which will be handled by a component.
The syntax of category is as follows:
<category android:name="string" />
BROWSABLE – Browsable category, activity allows itself to be opened with

web browser to open the reference link provided in data.
LAUNCHER – Launcher category puts an activity on the top of stack,
whenever application will start, the activity containing this category will be
opened first.
<intent-filter . . . >
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
...
</intent-filter>
P.Nivetha Page 24
3.<data>
There are two forms in which you can pass the data, using
URI(Uniform Resource Identifiers) or MIME type of data.
The syntax of data attribute is as follows:
<data android:scheme="string"
android:host="string"
android:port="string"
android:path="string"
android:pathPattern="string"
android:pathPrefix="string"
android:mimeType="string" />
This specifies the format of data associated with an Intent which you use
with component. As explained in above code snippet, data passed through
Intent is a type of URI. Check the below given table for better clarification
ACTION DATA MEANING
Opens phone
Intent.ACTION_CALL tel:phone_number application and calls
phone number
Opens phone
application and dials
Intent.ACTION_DIAL tel:phone_number
(but doesn’t call)
phone_number
P.Nivetha Page 25
Adding Categories
Following table lists down various important Android Intent Standard

Categories. You can check Android Official Documentation for a complete
list of Categories:
S.No Categories & Description
CATEGORY_APP_BROWSER
1
Used with ACTION_MAIN to launch the browser application.
CATEGORY_APP_CALCULATOR
2
Used with ACTION_MAIN to launch the calculator application.
CATEGORY_APP_CALENDAR
3
Used with ACTION_MAIN to launch the calendar application.
CATEGORY_APP_CONTACTS
4
Used with ACTION_MAIN to launch the contacts application.
CATEGORY_APP_EMAIL
5
Used with ACTION_MAIN to launch the email application.
CATEGORY_APP_GALLERY
6
Used with ACTION_MAIN to launch the gallery application.
P.Nivetha Page 26
CATEGORY_APP_MAPS
7
Used with ACTION_MAIN to launch the maps application.
CATEGORY_APP_MARKET
8
This activity allows the user to browse and download new applications.
CATEGORY_APP_MESSAGING
9
Used with ACTION_MAIN to launch the messaging application.
CATEGORY_APP_MUSIC
10
Used with ACTION_MAIN to launch the music application.
CATEGORY_BROWSABLE
11 Activities that can be safely invoked from a browser must support this
category.
CATEGORY_CAR_DOCK
12
An activity to run when device is inserted into a car dock.
CATEGORY_DEFAULT
13 Set if the activity should be an option for the default action (center
press) to perform on a piece of data.
CATEGORY_DESK_DOCK
14
An activity to run when device is inserted into a car dock.
P.Nivetha Page 27
CATEGORY_DEVELOPMENT_PREFERENCE
15
This activity is a development preference panel.
CATEGORY_FRAMEWORK_INSTRUMENTATION_TEST
16
To be used as code under test for framework instrumentation tests.
CATEGORY_HOME
17 This is the home activity, that is the first activity that is displayed when
the device boots.
CATEGORY_INFO
18
Provides information about the package it is in.
CATEGORY_LAUNCHER
19
Should be displayed in the top-level launcher.
CATEGORY_OPENABLE
20 Used to indicate that a GET_CONTENT intent only wants URIs that can
be opened with ContentResolver.openInputStream.
CATEGORY_PREFERENCE
21
This activity is a preference panel.
CATEGORY_TAB
22
Intended to be used as a tab inside of a containing TabActivity.
P.Nivetha Page 28
Linking Activities
Android calling one activity from another activity example
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
tools:context=".MainActivity">
<TextView
android:id="@+id/editText"
android:text="First Activity"
android:textAlignment="center"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="parent"
P.Nivetha Page 29
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
<Button
android:id="@+id/btn1"
android:text="Go to News Screen"
android:onClick="newsScreen"
app:layout_constraintTop_toBottomOf="@+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>
Mainactivity.java
package com.example.intent2;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
P.Nivetha Page 30
import android.view.View;
public class MainActivity extends AppCompatActivity {
@Override
public void newsScreen(View view) {
Intent i = new Intent(getApplicationContext(), MainActivity2.class);
startActivity(i);
}
}
activity_main2.xml
<androidx.constraintlayout.widget.ConstraintLayout
P.Nivetha Page 31
tools:context=".MainActivity2">
<TextView
android:id="@+id/editText"
android:text="Second Activity"
android:textAlignment="center"
android:textSize="28sp"
app:layout_constraintHorizontal_bias="0.0"
P.Nivetha Page 32
<Button
android:id="@+id/btn2"
android:text="Go to Home Screen"
android:onClick="homeScreen"
app:layout_constraintTop_toBottomOf="@+id/editText" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity2.java
import android.content.Intent;
P.Nivetha Page 33
public class MainActivity2 extends AppCompatActivity {
@Override
setContentView(R.layout.activity_main2);
public void homeScreen(View view) {
Intent i = new Intent(getApplicationContext(), MainActivity.class);
startActivity(i);
P.Nivetha Page 34
Output:
P.Nivetha Page 35
User Interface design Components
In Android app, end user interacts with screen which is called user
interface.
This interface can be designed with the help of many controls which
are called views in Android.
Views
A view is an object that draws something on the screen with which

user can interact. A view is a widget that has an appearance on screen
Example of views are Buttons, EditText, TextViews etc.
The View class is the parent for a large hierarchy of visual controls,
widgets, like
Views can be Classified as
 Buttons, EditText, TextViews,etc

 Views are classified as:
 display text (TextView class), edit text (EditText class)
 buttons (Button class), menus, other controls scrollable (ScrollView,
RecyclerView)
 show images (ImageView) subclass of View class
Widgets are displayed only if they are added to the display layout.
ViewGroup
The ViewGroup is a subclass of View and it will act as a base class

for layouts and layouts parameters.
P.Nivetha Page 36
The ViewGroup will provide an invisible containers to hold other Views

or ViewGroups and to define the layout properties. They are Generally
Called layouts.
Android Layout Types
We have a different type of layouts available in android to implement

user interface for our android applications with different designs based on
our requirements.
Following are the commonly used layouts in android applications to

implement required designs.
 Linear Layout
 Relative Layout
 Frame Layout
 Table Layout
 Web View
 List View
 Grid View
Android Layout Attributes
In android, like layout width and layout height we have a different

type of attributes available for View and View Group objects to define the
appearance of layouts based on our requirements.
The following are some of the common layout attributes used in the
android application.
P.Nivetha Page 37
Attribute Description
android:id It is used to uniquely identify the view

and ViewGroups
android:layout_width It is used to define the width for View and

ViewGroup elements in a layout
android:layout_height It is used to define the height for View

and ViewGroup elements in a layout
android:layout_marginLeft It is used to define the extra space in the

left side for View and ViewGroup
elements in a layout
android:layout_marginRight It is used to define the extra space in right

side for View and ViewGroup elements in
layout
android:layout_marginTop It is used to define the extra space on top

for View and ViewGroup elements in
layout
android:layout_marginBottom It is used to define the extra space in the

bottom side for View and ViewGroup
P.Nivetha Page 38
elements in a layout
android:paddingLeft It is used to define the left side padding

layout files
android:paddingRight It is used to define the right side padding

layout files
android:paddingTop It is used to define padding for View and

ViewGroup elements in layout files on top
side
android:paddingBottom It is used to define the bottom side

padding for View and ViewGroup
elements in layout files
android:layout_gravity It is used to define how child Views are

positioned
P.Nivetha Page 39
Basic Views
The View is a base class for all UI components in android. Following are
the some of common View subclasses that will be used in android
applications.
 Text View
 Edit Text
 Button
 Checkbox
 Radio Button
 Image Button
 Spinner
1. Text View
Text View is a user interface control that is used to set and

display the text to the user based on our requirements.
The Text View control will act as like label control and it won’t
allow users to edit the text.
Android TextView Attributes
The following are some of the commonly used attributes related to Text
View control in android applications.
android: id It is used to uniquely identify the control
P.Nivetha Page 40
android:width It makes the TextView be exactly this many pixels wide.
android:height It makes the TextView be exactly this many pixels tall.
android:text It is used to display the text.
android:textColor It is used to change the color of the text.
android:textSize It is used to specify the size of the text.
android:textStyle It is used to change the style (bold, italic, bolditalic) of text.
android:textAllCaps It is used to present the text in all CAPS
android:typeface It is used to specify the Typeface (normal, sans, serif,

monospace) for the text.
android:textColorHighlight It is used to change the color of text selection highlight.
android:textColorLink It is used to change the text color of links.
android:fontFamily It is used to specify the fontFamily for the text.
P.Nivetha Page 41
android:editable If we set, it specifies that this TextView has an input method.
2. EditText
Edit Text is a user interface control which is used to allow the user to
enter or modify the text.
While using Edit Text control in our android applications, we need to
specify the type of data the text field can accept using the input
Type attribute.
Android Edit Text Attributes

The following are some of the commonly used attributes related to Edit Text control in
android applications.
android:id It is used to uniquely identify the control
android:gravity It is used to specify how to align the text like left, right,
center, top, etc.
P.Nivetha Page 42
android:background It is used to set the background color for edit text control
android:width It makes the TextView be exactly this many pixels wide.
android:height It makes the TextView be exactly this many pixels tall.
android:textAllCaps It is used to present the text in all CAPS
android:typeface It is used to specify the Typeface (normal, sans, serif,

monospace) for the text.
android:textColorHighlight It is used to change the color of text selection highlight.
android:fontFamily It is used to specify the fontFamily for the text.
android:editable If we set false, EditText won't allow us to enter or modify the

text
3. Button
In android, Button is a user interface control that is used to perform an

action whenever the user clicks or tap on it.
Generally, Buttons in android will contain a text or an icon or both and

perform an action when the user touches it.
P.Nivetha Page 43
Android Button Control Attributes

Following are the some of commonly used attributes related to Button control in
android:gravity It is used to specify how to align the text like left, right,
center, top, etc.
android:text It is used to set the text.
android:textColor It is used to change the color of text.
android:textStyle It is used to change the style (bold, italic, bolditalic) of

text.
android:background It is used to set the background color for button control.
android:padding It is used to set the padding from left, right, top and
bottom.
android:drawableBottom It’s drawable to be drawn to the below of text.
P.Nivetha Page 44
android:drawableRight It’s drawable to be drawn to the right of text.
android:drawableLeft It’s drawable to be drawn to the left of the text.
4.Check box
In android, CheckBox is a two-states button that can be either

checked (ON) or unchecked (OFF) and it will allow users to toggle between
the two states (ON / OFF) based on the requirements.
Generally, we can use multiple CheckBox controls in android

application to allow users to select one or more options from the set of
values.
Android CheckBox Control Attributes

The following are some of the commonly used attributes related to CheckBox control in
android:checked It is used to specify the current state of checkbox
android:gravity It is used to specify how to align the text like left, right, center, top, etc.
android:text It is used to set the text for a checkbox.
P.Nivetha Page 45
android:textSize It is used to specify the size of text.
android:background It is used to set the background color for checkbox control.
android:padding It is used to set the padding from left, right, top and bottom.
android:onClick It’s the name of the method to invoke when the checkbox clicked.
android:visibility It is used to control the visibility of control.
4. Radio Button
Radio Button is a two-states button that can be either checked or
unchecked and it’s the same as CheckBox control, except that it will allow
only one option to select from the group of options.
Android RadioButton Control Attributes
Following are the some of commonly used attributes related to RadioButton control in
P.Nivetha Page 46
android:checked It is used to specify the current state of radio button
android:gravity It is used to specify how to align the text like left, right, center, top,
etc.
android:text It is used to set the text for the radio button.
android:background It is used to set the background color for radio button control.
android:padding It is used to set the padding from left, right, top and bottom.
android:onClick It’s the name of the method to invoke when the radio button clicked.
android:visibility It is used to control the visibility of control.
P.Nivetha Page 47
5. Image Button
In android, Image Button is a user interface control that is used to

display a button with an image and to perform an action when a user clicks
or taps on it.
Android ImageButton Control Attributes

Following are some of the commonly used attributes related to ImageButton control in android
applications.
android:src It is used to specify the source file of an image
android:background It is used to set the background color for an image button control.
android:padding It is used to set the padding from left, right, top and bottom of the
image button.
android:baseline It is used to set the offset of the baseline within the view.
P.Nivetha Page 48
6. Spinner
In android, Spinner is a view that allows a user to select one value

from the list of values. The spinner in android will behave same as a
dropdown list in other programming languages.
Picker Views
In android, Date Picker is a control that will allow users to select the
date by a day, month and year in our application user interface.
If we use Date Picker in our application, it will ensure that the users
will select a valid date.
Following is the pictorial representation of using a datepicker control in

Generally, in android DatePicker available in two modes, one is to show the

complete calendar and another one is to show the dates in spinner view.
P.Nivetha Page 49
Android DatePicker Control Attributes
The following are some of the commonly used attributes related

to DatePicker control in android applications.
android:datePickerMode It is used to specify datepicker mode either

spinner or calendar
android:background It is used to set the background color for the date

picker.
android:padding It is used to set the padding for left, right, top or

bottom of the date picker.
Android Date Picker Example
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr
oid"
android:layout_width="match_parent" android:layout_height="match_par
ent">
<DatePicker
P.Nivetha Page 50
android:id="@+id/datePicker1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp" />
<Button
android:id="@+id/button1"
android:layout_below="@+id/datePicker1"
android:layout_marginLeft="100dp"
android:text="Get Date" />
<TextView
android:id="@+id/textView1"
android:layout_below="@+id/button1"
android:layout_marginTop="10dp"
android:textStyle="bold"
android:textSize="18dp"/>
</RelativeLayout>
MainActivity.java
package com.lane.datepickerexample;
import android.support.v7.app.AppCompatActivity;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.TextView;

P.Nivetha Page 51
DatePicker picker;
Button btnGet;
TextView tvw;
@Override
tvw=(TextView)findViewById(R.id.textView1);
picker=(DatePicker)findViewById(R.id.datePicker1);
btnGet=(Button)findViewById(R.id.button1);
btnGet.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tvw.setText("Selected Date: "+ picker.getDayOfMonth()+"/"+
(picker.getMonth() + 1)+"/"+picker.getYear());
}
});
}
}
P.Nivetha Page 52
ListView
In android, ListView is a ViewGroup that is used to display the list of
scrollable of items in multiple rows and the list items are automatically
inserted to the list using an adapter.
Generally, the adapter pulls data from sources such as an array or

database and converts each item into a result view and that’s placed into
the list.
Following is the pictorial representation of listview in android

applications.
Android Adapter
In android, Adapter will act as an intermediate between the data sources

and adapter views such as ListView, Gridview to fill the data into adapter
views..
P.Nivetha Page 53
Generally, in android we have a different types of adapters available to

fetch the data from different data sources to fill the data into adapter views,
those are
Adapter Description
ArrayAdapter It will expects an Array or List as input.
CurosrAdapter It will accepts an instance of cursor as an input.
SimpleAdapter It will accepts a static data defined in the resources.
BaseAdapter It is a generic implementation for all three adapter types

and it can be used for ListView, Gridview or Spinners
based on our requirements
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/
res/android"
android:orientation="vertical">
<ListView
android:id="@+id/userlist"
android:layout_height="wrap_content" >
P.Nivetha Page 54
</ListView>
</LinearLayout>
MainActivity.java
package com.lane.listview;
import android.widget.ArrayAdapter;
import android.widget.ListView;

private ListView mListView;
private ArrayAdapter aAdapter;
private String[] users = { "Suresh Dasari", "Rohini
Alavala", "Trishika Dasari", "Praveen Alavala", "Madav
Sai", "Hamsika Yemineni"};
@Override
mListView = (ListView) findViewById(R.id.userlist);
aAdapter = new ArrayAdapter(this,
android.R.layout.simple_list_item_1, users);
mListView.setAdapter(aAdapter);
}
}
P.Nivetha Page 55
Specialized 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 screens inside one activity.
 Android fragment lifecycle is affected by activity lifecycle because
fragments are included in activity.
 Each fragment has its own life cycle methods that is affected by
activity life cycle because fragments are embedded in activity.

 The Fragment Manager class is responsible to make interaction
between fragment objects.
 Following is the example of defining a multiple fragments in single

activity for the tablet design to display the details of an item which we
selected in the app, but separated for mobile design.
P.Nivetha Page 56
Android Fragment Lifecycle
Following are the list of methods which will perform during the
lifecycle of fragment in android applications.
P.Nivetha Page 57
Method Description
onAttach() It is called when the fragment has been associated

with an activity.
onCreate() It is used to initialize the fragment.
onCreteView() It is used to create a view hierarchy associated with

the fragment.
onActivityCreated() It is called when the fragment activity has been

created and the fragment view hierarchy
instantiated.
onStart() It is used to make the fragment visible.
onResume() It is used to make the fragment visible in an activity.
onPause() It is called when fragment is no longer visible and it

indicates that the user is leaving the fragment.
onStop() It is called to stop the fragment using the onStop()

method.
onDestoryView() The view hierarchy associated with the fragment is

being removed after executing this method.
P.Nivetha Page 58
Method Description
onDestroy() It is called to perform a final clean up of the

fragments state.
onDetach() It is called immediately after the fragment

disassociated from the activity.
Android Fragment Example
activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context="example.javatpoint.com.fragmentexample.MainActivity">
<fragment
android:id="@+id/fragment1"
android:name="example.javatpoint.com.fragmentexample.Fragment1"
android:layout_width="0px"
android:layout_weight="1"
/>
<fragment
P.Nivetha Page 59
android:id="@+id/fragment2"
android:name="example.javatpoint.com.fragmentexample.Fragment2"
android:layout_width="0px"
android:layout_weight="1"
/>
</LinearLayout>
fragment_fragment1.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#F5F5DC"
tools:context="example.javatpoint.com.fragmentexample.Fragment1">
<TextView
android:text="@string/hello_blank_fragment" />
</FrameLayout>
P.Nivetha Page 60
fragment_fragment2.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#F0FFFF"
tools:context="example.javatpoint.com.fragmentexample.Fragment2">
<TextView
android:text="@string/hello_blank_fragment" />
</FrameLayout>
Main Activity.class
package example.javatpoint.com.fragmentexample;
@Override
}
}
P.Nivetha Page 61
Fragment1.java
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_fragment1, container, false);
}
}
P.Nivetha Page 62
Fragment2.java
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
public class Fragment2 extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_fragment2, container, false);
}
P.Nivetha Page 63
Output:
P.Nivetha Page 64
GridView
In android, Grid View is a ViewGroup that is used to display items in
a two dimensional, scrollable grid and grid items are automatically inserted
to the gridview layout using a list adapter.
Generally, the adapter pulls data from sources such as an array or

database and converts each item into a result view and that’s placed into
the list.
Following is the pictorial representation of GridView in android

applications.
Note:: Once Again Write about The Android Adapter
GridView Example
activity_main.xml
P.Nivetha Page 65
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/gridView1"
android:numColumns="auto_fit"
android:gravity="center"
android:columnWidth="50dp"
android:stretchMode="columnWidth"
android:layout_height="fill_parent" >
</GridView>
MainActivity.java
package com.example.androidgridviewexample;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.TextView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
public class MainActivity extends Activity
GridView grid;
static final String[] letters = new String[]
P.Nivetha Page 66
{ "C", "C++", "VB", "JAVA", ".NET","PYT", "C#", "RUBY", "SQL"};
@Override
public void onCreate(Bundle savedInstanceState)
grid = (GridView) findViewById(R.id.gridView);
ArrayAdapter<Object> adapter = new ArrayAdapter<Object>(this,
android.R.layout.simple_list_item_1, letters);
grid.setAdapter(adapter);
grid.setOnItemClickListener(new OnItemClickListener()
{
public void onItemClick(AdapterView<?> parent, View v, int position, long
id)
{
Toast.makeText(getApplicationContext(),((TextView) v).getText(),
Toast.LENGTH_SHORT).show();
});
}
}
P.Nivetha Page 67
OUTPUT:
P.Nivetha Page 68
Options Menu
In android, Options Menu is a primary collection of menu items for

an activity and it is useful to implement actions that have a global impact
on the app, such as Settings, Search, etc.
Following is the pictorial representation of using Options Menu in

our android applications.
Android Options Menu Attributes

Following are the some of commonly used attributes related to options
menu control in android applications.
android:id It is used to uniquely identify an element in

application.
P.Nivetha Page 69
android:icon It is used to set the item's icon from the

drawable folder.
android:title It is used to set the item's title
android:showAsAction It is used to specify how the item should appear

as an action item in the app bar.
Activity_main.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@+id/about_us_id"
android:title="About"
android:showAsAction="always"/>
<item
android:id="@+id/settings_id"
android:title="Settings"
<item
android:id="@+id/Share_id"
P.Nivetha Page 70
android:title="Share"
<item
android:id="@+id/Help_id"
android:title="Help"
</menu>
MainActivity.java
package com.example.menudemo;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends Activity
@Override
protected void onCreate(Bundle savedInstanceState)
{
P.Nivetha Page 71
@Override
public boolean onCreateOptionsMenu(Menu menu)
getMenuInflater().inflate(R.menu.main_menu, menu);
return true;
@Override
public boolean onOptionsItemSelected(MenuItem item)
Toast.makeText(this, "Selected Item ID: "+item.getItemId(), 0).show();

switch (item.getItemId())
case R.id.about_us_id:
return true;
case R.id.settings_id:
return true;
case R.id.Share_id:
return true;
case R.id.Help_id:
return true;
default:
P.Nivetha Page 72
return super.onOptionsItemSelected(item);
OUTPUT:
P.Nivetha Page 73
P.Nivetha Page 74
Context Menu
In android, Context Menu is like a floating menu and that appears
when the user performs a long press or click on an element and it is useful
to implement actions that affect the selected content or context frame.
The android Context Menu is more like the menu which displayed on
right-click in Windows or Linux.
Following is the pictorial representation of using Context Menu in

our android applications.
Activity_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/call"
android:title="Call" />
<item android:id="@+id/sms"
android:title="SMS" />
</menu>
P.Nivetha Page 75
MainActivity.java
package example.javatpoint.com.contextmenu;
import android.view.ContextMenu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.ListView;

ListView listView;
String contacts[]={"Ajay","Sachin","Sumit","Tarun","Yogesh"};
@Override
listView=(ListView)findViewById(R.id.listView);
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.
R.layout.simple_list_item_1,contacts);
listView.setAdapter(adapter);
// Register the ListView for Context menu
registerForContextMenu(listView);
}
@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMe
nu.ContextMenuInfo menuInfo)
{
P.Nivetha Page 76
super.onCreateContextMenu(menu, v, menuInfo);
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.menu_main, menu);
menu.setHeaderTitle("Select The Action");
}
@Override
public boolean onContextItemSelected(MenuItem item){
if(item.getItemId()==R.id.call){
Toast.makeText(getApplicationContext(),"calling code",Toast.LENGTH_L
ONG).show();
}
else if(item.getItemId()==R.id.sms){
Toast.makeText(getApplicationContext(),"sending sms code",Toast.LEN
GTH_LONG).show();
}else{
return false;
}
return true;
} }
Output:
P.Nivetha Page 77
P.Nivetha Page 78
Clock View
The android.widget.AnalogClock and android.widget.DigitalClock

classes provides the functionality to display analog and digital clocks.
Analog and digital clocks are used for display the time in android
application.
1. Analog clock: Analog clock is a subclass of View class. It represents a
circular clock. Around the circle, numbers 1 to 12 appear to represent
the hour and two hands are used to show instant of the time- shorter
one for the hour and longer is for minutes.
2. Digital clock: Digital clock is subclass of TextView Class and uses
numbers to display the time in “HH:MM” format.
For Example
P.Nivetha Page 79
Activity_main.xml

<RelativeLayout
<AnalogClock
android:layout_height="wrap_content" />
<DigitalClock
android:textSize="25dp"
android:layout_height="wrap_content" />
</RelativeLayout>
MainActivity.java
package org.geeksforgeeks.navedmalik.analogdigital;
P.Nivetha Page 80
@Override
protected void onCreate(Bundle savedInstanceState)
{
}
}
P.Nivetha Page 81
Web view
In android, WebView is an extension of View class and it is used to show

the static HTML web pages content or remote web pages content with URL
in android applications as a part of our activity layout.
Generally, in android, WebView will act as an embedded browser to

include the web pages content in our activity layout and it won’t contain
any features of normal browsers, such as address bar, navigation controls,
etc.
Following is the pictorial representation of WebView in android

applications.
Generally, in android WebView is useful to include and show the content of

other web pages.
P.Nivetha Page 82
Android WebView Example
activity_main.xml

<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webview"
android:layout_height="fill_parent" />
MainActivity.java
package com.webview;
import android.webkit.WebView;

@Override
WebView wv = (WebView) findViewById(R.id.webview);
String customHtml = "<html><body><h1>Hello, AbhiAndroid</h1>" +
"<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>" +
"<p>This is a sample paragraph of static HTML In Web view</p>" +
"</body></html>";
wv.loadData(customHtml, "text/html", "UTF-8");
}
}
P.Nivetha Page 83
Output:
P.Nivetha Page 84
Recycler View
The RecyclerView class extends the ViewGroup class and
implements ScrollingView interface. It is introduced in Marshmallow.
It is an advanced version of the ListView with improved performance
and other benefits.
RecyclerView is mostly used to design the user interface with the fine-
grain control over the lists and grids of android application.
If you want to use a RecyclerView, you will need to work with the
following:
 RecyclerView.Adapter - To handle the data collection and bind it to

the view
 LayoutManager - Helps in positioning the items
 ItemAnimator - Helps with animating the items for common
operations such as Addition or Removal of item
Recycler View provides these built-in layout managers:
 LinearLayoutManager shows items in a vertical or horizontal scrolling

list.
 GridLayoutManager shows items in a grid.
 StaggeredGridLayoutManager shows items in a staggered grid.
P.Nivetha Page 85
Gallery and Image view
In Android, Gallery is a view that can show items in a center-locked,

horizontal scrolling list. Thus, the user can select a view, and then the view
selected by the user is displayed in the center of the horizontal list.
Functioning of Gallery View

The user will have an 'n' number of items in a horizontal fashion, and
the selected item will be located at the center of the horizontal list.
The Adapter can be used to add "n" number of items since it serves
as a link between the user interface and the data source.
Note: Use of Gallery view now is deprecated.
Attributes of Gallery View
Some of the attributes of Gallery view are given below:
 id: Used to give Gallery view a distinct identity.
 padding: Used to give the padding in Gallery view(from all sides: top,
bottom, right, left).
 paddingTop: Used to give the padding on a Gallery's top side.
 paddingBottom: Used to give the padding on a Gallery's bottom side.
 paddingLeft: Used to give the padding on a Gallery's left side.
 paddingRight: Used to give the padding on a Gallery's right side.
P.Nivetha Page 86
 background: Used to create a Gallery's backdrop(background), and In
the background, we have a choice between the colors(from colors.xml)
and images(from drawable).
 animationDuration: Used to specify how long a transition animation
should run for.

Note: Time duration is in milliseconds.
 unselectedAlpha: Used to make the things that aren't selected have an
alpha value(It must be in float value).
 spacing: Using this In a Gallery, we can adjust the spacing between
items(in a horizontal scroll manner).
activity_main.xml
<LinearLayout
android:background="#fff"
android:orientation="vertical"
<ImageView
P.Nivetha Page 87
android:id="@+id/imageView"
android:layout_height="200dp"
android:scaleType="fitXY" />
<Gallery
android:id="@+id/languagesGallery"
android:animationDuration="2000"
android:padding="10dp"
android:spacing="5dp"
android:unselectedAlpha="50" />
</LinearLayout>
MainActivity.java
import android.widget.Gallery;
import android.widget.ImageView;
Gallery simpleGallery;
P.Nivetha Page 88
CustomizedGalleryAdapter customGalleryAdapter;
ImageView selectedImageView;
int[] images = {
R.drawable.python,
R.drawable.javascript,
R.drawable.java,
R.drawable.python,
R.drawable.r,
R.drawable.python,
R.drawable.javascript,
R.drawable.python,
R.drawable.r,
R.drawable.javascript
};
@Override
simpleGallery = (Gallery) findViewById(R.id.languagesGallery);
selectedImageView = (ImageView) findViewById(R.id.imageView);
// initialize the adapter

customGalleryAdapter = new
CustomizedGalleryAdapter(getApplicationContext(), images);
// set the adapter for gallery

simpleGallery.setAdapter(customGalleryAdapter);
P.Nivetha Page 89
// Let us do item click of gallery and image can be identified by its

position
simpleGallery.setOnItemClickListener((parent, view, position, id) -> {
// Whichever image is clicked, that is set in the
selectedImageView
// position will indicate the location of image
selectedImageView.setImageResource(images[position]);
});
}
}
CustomizedGalleryAdapter
import android.content.Context;
import android.widget.BaseAdapter;
import android.widget.Gallery;
public class CustomizedGalleryAdapter extends BaseAdapter {
private final Context context;

private final int[] images;
public CustomizedGalleryAdapter(Context c, int[] images) {

context = c;
this.images = images;
}
// returns the number of images, in our example it is 10

public int getCount() {
return images.length;
}
P.Nivetha Page 90
// returns the Item of an item, i.e. for our example we can get the
image
public Object getItem(int position) {
return position;
}
// returns the ID of an item

public long getItemId(int position) {
return position;
}
// returns an ImageView view

public View getView(int position, View convertView, ViewGroup parent)
{
// position argument will indicate the location of image
// create a ImageView programmatically
ImageView imageView = new ImageView(context);
// set image in ImageView

imageView.setImageResource(images[position]);
// set ImageView param

imageView.setLayoutParams(new Gallery.LayoutParams(200, 200));
return imageView;
}
}
P.Nivetha Page 91
Output:
P.Nivetha Page 92
Image Switcher
In android, ImageSwitcher is a specialized view switcher that will
provide a smooth transition animation effect to the images while switching
from one image to another.
In order to use image switcher, we need to implement image switcher

Component in .Xml File.
The setFactory() method of ImageSwitcher provide implementation
of ViewFactory interface. ViewFactory interface implements its
unimplemented method and returns an ImageView.
The ImageSwitcher class is having different methods available, those are
Method Description
setImageDrawable This method is used to set a new drawable on the next

ImageView in the switcher.
setImageResource This method is used to set a new image on the

ImageSwitcher with the given resource id.
setImageURI This method is used to set a new image on the

ImageSwitcher with the given Uri.
P.Nivetha Page 93
ImageSwitcher Example
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andr
oid"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageSwitcher android:id="@+id/imgSw"
android:layout_height="250dp"/>
<Button
android:id="@+id/btnPrevious"
android:layout_below="@+id/imgSw"
android:text="Previous" android:layout_marginLeft="100dp" />
<Button
android:id="@+id/btnNext"
android:layout_alignBottom="@+id/btnPrevious"
android:layout_toRightOf="@+id/btnPrevious"
android:text="Next" />
</RelativeLayout>
P.Nivetha Page 94
MainActivity.java
package com.imageswitcherexample;
import android.widget.Button;
import android.widget.ImageSwitcher;
import android.widget.ViewSwitcher;

private Button previousbtn, nextbtn;
private ImageSwitcher imgsw;
private int[] images = {R.drawable.bangkok,R.drawable.bangkok2};
private int position = 0;
@Override
previousbtn = (Button)findViewById(R.id.btnPrevious);
nextbtn = (Button)findViewById(R.id.btnNext);
imgsw = (ImageSwitcher) findViewById(R.id.imgSw);
imgsw.setFactory(new ViewSwitcher.ViewFactory() {
@Override
public View makeView() {
ImageView imgVw= new ImageView(MainActivity.this);
imgVw.setImageResource(images[position]);
return imgVw;
}
});
imgsw.setInAnimation(this, android.R.anim.slide_in_left);
imgsw.setOutAnimation(this, android.R.anim.slide_out_right);
P.Nivetha Page 95
previousbtn.setOnClickListener(new View.OnClickListener() {
@Override
if(position>0)
position--;
else if(position<0)
position = 0;
imgsw.setImageResource(images[position]);
}
});
nextbtn.setOnClickListener(new View.OnClickListener() {
@Override
if(position<images.length)
position++;
if(position>=images.length)
position = images.length-1;
imgsw.setImageResource(images[position]);
}
});
}
}
P.Nivetha Page 96
Output:
P.Nivetha Page 97

Mad Unit Ii-1

Uploaded by

Copyright:

Available Formats

Mad Unit Ii-1

Uploaded by

Document Information

Original Title

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

Mad Unit Ii-1

Uploaded by

Copyright:

Available Formats

MOBILE APPLICATION DEVELOPMENT

UNIT II: ANDROID UI DESIGN

Objective: To understand the basic concepts of user interface related to

GUI for Android: activities lifecycle–Android v7 support library –Intent:

GUI for Android

 In android, Activity represents a single screen with a user interface

interact with an app.

 By the help of activity, you can place all your UI components or

widgets in a single screen.

 From the multiple activities in android app, one activity can be

we launch the application.

Android Activity Lifecycle

In android, Activity class have 7 callback methods to describe how

the activity will behave at different stages.

Android Activity Lifecycle Callback Methods

 In android, an activity goes through a series of states during its

between the states.

 Android system initiates its program within an Activity starting with a

call on onCreate() callback method. There is a sequence of callback

methods that start up an activity and a sequence of callback methods

that tear down an activity.

Android Activity Lifecycle methods

Android Activity Lifecycle Diagram

Generally, in android activity class uses different callback methods

like onCreate(), onStart(), onPause(), onRestart(), onResume(), onStop() and

onDestroy() to go through a different stages of activity life cycle.

Following is the pictorial representation of the Android Activity Life cycle

Based on our requirements we can implement the activity in the

callback methods in each android application.

Android Activity Lifecycle Example

<? xml version="1.0" encoding="utf-8"?>

public class MainActivity extends Activity {

Android v7 support library

can be included in your application. Each of these libraries supports a

specific range of Android platform versions and set of features.

These libraries include the largest set of APIs compared to the

other libraries, including support for application components, user

interface features, accessibility, data handling, network connectivity, and

Some Specific Component included:

1.v4 compat library

Provides compatibility wrappers for a number of framework APIs.

The Gradle build script dependency identifier for this library is as

as AsyncTaskLoader and PermissionChecker.

The Gradle build script dependency identifier for this library is as

Implements a variety of UI-related components, such

as ViewPager, NestedScrollView, and ExploreByTouchHelper.

The Gradle build script dependency identifier for this library is as

Backports portions of the media framework,

including MediaBrowser and MediaSession.

The Gradle build script dependency identifier for this library is as

5.v4 fragment library

Adds support for Android fragments.

The v7 support library includes both compatibility libraries and

The v7 support library includes all the v4 support libraries, so you

don't have to add those separately. A dependency on the v7 support

in your project extend from AppCompatActivity.

This library includes support for material design user interface

Components - Material Design

Some Specific Component included: