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 – Listview –
Specialized Fragment– Gallery and Image View – Image Switcher – Grid
View, Options Menu – Context Menu – Clock View –Web view–Recycler
View.

UNIT -2

ANDROID GUI DESIGN

ANDROID ACTIVITY LIFE CYCLE:

1. Android Activity Lifecycle is controlled by 7 methods of
android.app.Activity class. The android Activity is the subclass of
ContextThemeWrapper class.
2. An activity is the single screen in android. It is like window or
frame of Java.
3. By the help of activity, you can place all your UI components or
widgets in a single screen.

Android Activity Lifecycle methods :

Method Description

onCreate called when activity is first created.

onStart called when activity is becoming visible to the user.

onResume called when activity will start interacting with the user.
 onPause called when activity is not visible to the user.

onStop called when activity is no longer visible to the user.

onRestart called after your activity is stopped, prior to start.

onDestroy called before the activity is destroyed.

Android Activity Lifecycle Example :

1. package example.javatpoint.com.activitylifecycle;
2.
3. import android.app.Activity;
4. import android.os.Bundle;
5. import android.util.Log;
6.
7. public class MainActivity extends Activity {
8.
9. @Override
10. protected void onCreate(Bundle savedInstanceState) {
11. super.onCreate(savedInstanceState);
12. setContentView(R.layout.activity_main);
13. Log.d("lifecycle","onCreate invoked");
14. }
15. @Override
16. protected void onStart() {
17. super.onStart();
18. Log.d("lifecycle","onStart invoked");
19. }
20. @Override
21. protected void onResume() {
22. super.onResume();
23. Log.d("lifecycle","onResume invoked");
24. }
25. @Override
26. protected void onPause() {
27. super.onPause();
28. Log.d("lifecycle","onPause invoked");
29. }
30. @Override
protected void onStop() {
31. super.onStop();
32. Log.d("lifecycle","onStop invoked");
33. }
 34. @Override
35. protected void onRestart() {
36. super.onRestart();
37. Log.d("lifecycle","onRestart invoked");
38. }
39. @Override
40. protected void onDestroy() {
41. super.onDestroy();
42. Log.d("lifecycle","onDestroy invoked");
43. }
44.}

v7 Support Libraries :

There are several libraries designed to be used with Android 2.1 (API level
7) and higher. These libraries provide specific feature sets and can be
included in your application independently from each other.

v7 appcompat library :
This library adds support for the Action Bar user interface design
pattern. This library includes support for material design user
interface implementations.
Here are a few of the key classes included in the v7 appcompat
library:
● ActionBar - Provides an implementation of the action bar user
interface pattern. For more information on using the Action Bar,
see the Action Bar developer guide.
● AppCompatActivity - Adds an application activity class that can be
used as a base class for activities that use the Support Library
action bar implementation.
● AppCompatDialog - Adds a dialog class that can be used as a base
class for AppCompat themed dialogs.
● ShareActionProvider - Adds support for a standardized sharing
action (such as email or posting to social applications) that can be
included in an action bar.
v7 cardview library :
This library adds support for the CardView widget, which lets you show
information inside cards that have a consistent look on any app. These
cards are useful for material design implementations, and are used
extensively in layouts for TV apps.

v7 mediarouter library :
This library provides MediaRouter, MediaRouteProvider, and related media
classes that support Google Cast. In general, the APIs in the v7 mediarouter
library provide a means of controlling the routing of media channels and
streams from the current device to external screens, speakers, and other
destination devices.

v7 palette library :
The v7 palette support library includes the Palette class, which lets you
extract prominent colors from an image. For example, a music app could
use a Palette object to extract the major colors from an album cover, and
use those colors to build a color-coordinated song title card.

v7 recyclerview library :
The recyclerview library adds the RecyclerView class. This class provides
support for the RecyclerView widget, a view for efficiently displaying large
data sets by providing a limited window of data items.

v8 Support Library :

This library is designed to be used with Android 2.2 (API level 8) and
higher. This library provides specific feature sets and can be included in
your application independently from other libraries.

v8 renderscript library :
This library is designed to be used with Android (API level 8) and higher. It
adds support for the RenderScript computation framework. These APIs are
included in the android.support.v8.renderscript package.
v13 Support Library :

This library is designed to be used for Android 3.2 (API level 13) and
higher. It adds support for the Fragment user interface pattern with
the (FragmentCompat) class and additional fragment support classes.
For more information about fragments, see the Fragments developer
guide. For detailed information about the v13 Support Library APIs,
see the android.support.v13 package in the API reference.

v17 Leanback Library :

The android.support.v17.leanback package provides APIs to support

building user interfaces on TV devices. It provides a number of important
widgets for TV apps.

Annotations Support Library :

The Annotation package provides APIs to support adding annotation

metadata to your apps.

Design Support Library :

The Design package provides APIs to support adding material design
components and patterns to your apps.
The Design Support library adds support for various material design
components and patterns for app developers to build upon, such as
navigation drawers, floating action buttons (FAB), snackbars,
and tabs.

ANDROID INTENT :
Android Intent is the message that is passed between components such as
activities, content providers, broadcast receivers, services etc.It is generally
used with startActivity() method to invoke activity. The dictionary
meaning of intent is intention or purpose. So, it can be described as the
intention to do action.

The LabeledIntent is the subclass of android.content.Intent class.

 Android intents are mainly used to:

o Start the service

o Launch an activity
o Display a web page
o Display a list of contacts
o Broadcast a message
o Dial a phone call etc.

There are two types of intents in android: implicit and explicit.

IMPLICIT INTENT:
Implicit Intent doesn't specifiy the component. In such case, intent
provides information of available components provided by the
system that is to be invoked.
EXAMPLE:

Intent intent=new Intent(Intent.ACTION_VIEW);
intent.setData(Uri.parse("http://www.javatpoint.com"));
startActivity(intent);

EXPLICIT INTENT:
Explicit Intent specifies the component. In such case, intent provides
the external class to be invoked.
EXAMPLE:
Intent i = new Intent(getApplicationContext(), ActivityT
wo.class);
startActivity(i);

ANDROID INTENT FILTERS :

An intent filter is an expression in an app's manifest file that
specifies the type of intents that the component would like to
receive.

An intent filter is an instance of the IntentFilter class. Intent filters

are helpful while using implicit intents. It is not going to be handled
in java code, we have to set it up in AndroidManifest.xml. Android
 must know what kind of intent it is launching so intent filters give the
information to android about intent and actions.

<intent-filter android:icon="drawable resource"

               android:label="string resource"
               android:priority="integer" >
  ...
</intent-filter>
CATEGORIES IN INTENT:
Syntax:
<category android:name="string" />
Adds a category name to an intent filter. See Intents and Intent
Filters for details on intent filters and the role of category
specifications within a filter.

ANDROID UI COMPONENTS:
A View is an object that draws something on the screen that the user can
interact with and a ViewGroup is an object that holds other View (and
ViewGroup) objects in order to define the layout of the user interface.
S.No. UI Control & Description

1 TextView :
This control is used to display text to the user.

2 EditText :
EditText is a predefined subclass of TextView that includes rich
editing capabilities.

3 AutoCompleteTextView :
The AutoCompleteTextView is a view that is similar to EditText,
except that it shows a list of completion suggestions
automatically while the user is typing.

4 Button :
A push-button that can be pressed, or clicked, by the user to
perform an action.

5 ImageButton :
 An ImageButton is an AbsoluteLayout which enables you to
specify the exact location of its children. This shows a button
with an image (instead of text) that can be pressed or clicked by
the user.

6 CheckBox :
An on/off switch that can be toggled by the user. You should use
check box when presenting users with a group of selectable
options that are not mutually exclusive.

7 ToggleButton :
An on/off button with a light indicator.

8 RadioButton :
The RadioButton has two states: either checked or unchecked.

9 RadioGroup :
A RadioGroup is used to group together one or more
RadioButtons.

10 ProgressBar :
The ProgressBar view provides visual feedback about some
ongoing tasks, such as when you are performing a task in the
background.

11 Spinner :
A drop-down list that allows users to select one value from a set.

12 TimePicker :
The TimePicker view enables users to select a time of the day, in
either 24-hour mode or AM/PM mode.

13 DatePicker :
The DatePicker view enables users to select a date of the day.
Then finally create an instance of the Control object and capture it from the
layout,
FOR (I.E)
TextView myText = (TextView) findViewById(R.id.text_id);

VIEWS:
View is a basic building block of UI (User Interface) in android. A
view is a small rectangular box that responds to user inputs. Eg:
EditText, Button, CheckBox, etc.

View is the basic building block of UI(User Interface) in android.

View refers to the android.view.View class, which is the super
class for all the GUI components
like TextView, ImageView, Button etc.

View class extends Object class and

implements Drawable.Callback, KeyEvent.Callback and AccessibilityE
ventSource.View can be considered as a rectangle on the screen that
shows some type of content.

ANDROID PICKERS :

Android provides controls for the user to pick a time or pick a date
as ready-to-use dialogs. Each picker provides controls for selecting
each part of the time (hour, minute, AM/PM) or date (month, day,
year).

The DialogFragment manages the dialog lifecycle for you and allows

you to display the pickers in different layout configurations, such as
in a basic dialog on handsets or as an embedded part of the layout on
large screens.

Pickers can be useful in autofill scenarios by providing a UI that lets

users change the value of a field that stores date or time data.

For example, in a credit card form, a date picker would allow users to
enter or change the expiration date of their credit card.

ANDROID LIST VIEW :

Android ListView is a view which groups several items and display
them in vertical scrollable list. The list items are automatically
 inserted to the list using an Adapter that pulls content from a source
such as an array or database.

The ListView and GridView are subclasses of AdapterView and

they can be populated by binding them to an Adapter, which
retrieves data from an external source and creates a View that
represents each data entry.

An adapter actually bridges between UI components and the data

source that fill data into UI Component.

ListView Attributes :
S.No Attribute & Description

1 android:id
This is the ID which uniquely identifies the layout.

2 android:divider
This is drawable or color to draw between list items.

3 android:dividerHeight
This specifies height of the divider. This could be in px, dp, sp, in,
or mm.

4 android:entries
Specifies the reference to an array resource that will populate the
ListView.

5 android:footerDividersEnabled
When set to false, the ListView will not draw the divider before
each footer view. The default value is true.

6 android:headerDividersEnabled
When set to false, the ListView will not draw the divider after
each header view. The default value is true.
EXAMPLE :
ArrayAdapter adapter = new
ArrayAdapter<String>(this,R.layout.ListView,StringArray);
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);

ANDROID FRAGEMENTS :
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.

Specialized Fragment :
The Fragments API provides other subclasses that encapsulate some
of the more common functionality found in applications. These
subclasses are:
ListFragment – This Fragment is used to display a list of items
bound to a datasource such as an array or a cursor.
The ListFragment is very similar in concept and functionality to
the ListActivity; it is a wrapper that hosts a ListView in a
Fragment.
DialogFragment – This Fragment is used as a wrapper around a
dialog. The Fragment will display the dialog on top of its Activity.
The DialogFragment is a Fragment that is used to display a
dialog object inside of a Fragment that will float on top of the
Activity's window.
PreferenceFragment – This Fragment is used to show
Preference objects as lists. To help manage preferences, the
Fragments API provides the PreferenceFragment subclass.
The PreferenceFragment is similar to the PreferenceActivity – it
will show a hierarchy of preferences to the user in a Fragment.
GALLERY VIEW :
In Android, Gallery is a view that can show items in a center-locked,
horizontal scrolling list, and hence the user can able to select a view, and
then the user-selected view will be shown in the center of the Horizontal
list. “N” number of items can be added by using the Adapter. The adapter is
a bridging component between the UI component and the data source.

METHODS IN GALLERY VIEW:

setAnimationDuration(int) -To set the duration for how long a

transition animation should run .
setSpacing(int) - To set the spacing between items in a Gallery.
setUnselectedAlpha(float) - To set the alpha on the items that are not
selected.
ANDROID IMAGE VIEW :
In Android, ImageView class is used to display an image file in
application. Image file is easy to use but hard to master in Android,
because of the various screen sizes in Android devices.
An android is enriched with some of the best UI design widgets that
allows us to build good looking and attractive UI based application.
ImageView class or android.widget.ImageView inherits
the android.view.View class which is the subclass of Kotlin.

XML Attribute Description

android:id To uniquely identify an image view.

android:src/
app:srcCompat To add the file path of the inserted image.

To provide a background color to the

android:background inserted image.

android:layout_width To set the width of the image.

android:layout_height To set the height of the image.

To add padding to the image from the left,

android:padding right, top, or bottom of the view.

To re-size the image or to move it in order

android:scaleType to fix its size.
IMAGE SWITCHER :

Android image switcher provides an animation over images to

transition from one image to another. In order to use image switcher,
we need to implement ImageSwitcher component in .xml file.

The setFactory() method of ImageSwitcher provide implementation

of ViewFactory interface. ViewFactory interface implements its
unimplemented method and returns an ImageView.

<ImageSwitcher
android:id="@+id/imageSwitcher1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
</ImageSwitcher>

Source code:
private ImageSwitcher imageSwitcher;
imageSwitcher =
(ImageSwitcher)findViewById(R.id.imageSwitcher1);

imageSwitcher.setImageResource(R.drawable.ic_launcher);
imageSwitcher.setFactory(new ViewFactory() {
public View makeView() {
ImageView myView = new ImageView(getApplicationContext());
return myView;
}
}
Android Grid View :

Android GridView shows items in two-dimensional scrolling grid

(rows & columns) and the grid items are not necessarily
predetermined but they automatically inserted to the layout using
a ListAdapter.
The ListView and GridView are subclasses of AdapterView and
they can be populated by binding them to an Adapter, which
retrieves data from an external source and creates a View that
represents each data entry.

S.No Attribute & Description

android:id
1
This is the ID which uniquely identifies the layout.

android:columnWidth
2 This specifies the fixed width for each column. This could be in px,
dp, sp, in, or mm.

android:gravity
3 Specifies the gravity within each cell. Possible values are top,
bottom, left, right, center, center_vertical, center_horizontal etc.
 android:horizontalSpacing
4 Defines the default horizontal spacing between columns. This
could be in px, dp, sp, in, or mm.

android:numColumns

5 Defines how many columns to show. May be an integer value,

such as "100" or auto_fit which means display as many columns
as possible to fill the available space.

android:stretchMode
Defines how columns should stretch to fill the available empty
space, if any. This must be either of the values −

6 ● none − Stretching is disabled.

● spacingWidth − The spacing between each column is
stretched.
● columnWidth − Each column is stretched equally.
● spacingWidthUniform − The spacing between each column
is uniformly stretched..

android:verticalSpacing
7 Defines the default vertical spacing between rows. This could be
in px, dp, sp, in, or mm.

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

GridView gridview = (GridView) findViewById(R.id.gridview);

gridview.setAdapter(new ImageAdapter(this));
}
}

ANDROID OPTIONS MENU:

 Android Option Menus are the primary menus of android. They can
be used for settings, search, delete item etc. Here, we are going to see
two examples of option menus. First, the simple option menus and
second, options menus with images.

Here, 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.

Attribute Description

android:id It is used to uniquely identify an element in application.

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:showAs It is used to specify how the item should appear as an action

Action item in the app bar.

In android, to define options menu, we need to create a new

folder menu inside of our project resource directory (res/menu/) and add
a new XML (options_menu.xml) file to build the menu.
Following is the example of defining a menu in XML file
(menu_example.xml).
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/mail"
        android:icon="@drawable/ic_mail"
        android:title="@string/mail" />
    <item android:id="@+id/upload"
        android:icon="@drawable/ic_upload"
        android:title="@string/upload"
        android:showAsAction="ifRoom" />
    <item android:id="@+id/share"
        android:icon="@drawable/ic_share"
        android:title="@string/share" />
</menu>

JAVA SOURCE CODE :

package com.tutlane.optionsmenu;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle; import android.view.Menu;
import android.view.MenuItem; import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override public boolean onCreateOptionsMenu(Menu menu)
{ getMenuInflater().inflate(R.menu.options_menu, menu);
return true; }
@Override
public boolean onOptionsItemSelected(MenuItem item)
{ Toast.makeText(this, "Selected Item: " +item.getTitle(),
Toast.LENGTH_SHORT).show();
switch (item.getItemId()) {
case R.id.search_item: // do your code
return true;
R.id.upload_item: // do your code
return true;
case R.id.copy_item: // do your code
return true;
case R.id.print_item: // do your code
return true;
case R.id.share_item: // do your code
return true;
case R.id.bookmark_item: // do your code
return true;
default:
return super.onOptionsItemSelected(item); }
}}
ANDROID 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 an actions that effect the selected content or
context frame.
The android Context Menu is more like the menu which displayed on
right click in Windows or Linux.
In android, the Context Menu offers an actions that effect a specific
item or context frame in the UI and we can provide a context menu
for any view. The context menu won’t support any item shortcuts and
item icons.
JAVA SOURCE CODE:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Button btn = (Button) findViewById(R.id.btnShow);
registerForContextMenu(btn);
}
@Override
public void onCreateContextMenu(ContextMenu menu, View
v,ContextMenu.ContextMenuInfo menuInfo)
{
super.onCreateContextMenu(menu, v, menuInfo);
menu.setHeaderTitle("Context Menu");
menu.add(0, v.getId(), 0, "Upload");
menu.add(0, v.getId(), 0, "Search");
menu.add(0, v.getId(), 0, "Share");
menu.add(0, v.getId(), 0, "Bookmark");
}
@Override
public boolean onContextItemSelected(MenuItem item)
{ Toast.makeText(this, "Selected Item: " +item.getTitle(),
Toast.LENGTH_SHORT).show();
return true;
}
}
CLOCK VIEW IN ANDROID:

The android.widget.AnalogClock and android.widget.DigitalCloc
k classes provides the functionality to display analog and digital
clocks.Android analog and digital clocks are used to show time in
android application.

Android AnalogClock is the subclass of View class.

Android DigitalClock is the subclass of TextView class. Since Android

API level 17, it is deprecated. You are recommended to
use TextClock Instead.

XML CODE:

<AnalogClock
android:id="@+id/analogClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="136dp"
android:layout_marginTop="296dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<DigitalClock
android:id="@+id/digitalClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/analogClock1"
android:layout_centerHorizontal="true"
android:layout_marginLeft="176dp"
android:layout_marginTop="84dp"
android:text="DigitalClock"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

JAVA CODE:
1. package example.javatpoint.com.analogdigital;
 2.
3. import android.support.v7.app.AppCompatActivity;
4. import android.os.Bundle;
5.
6. public class MainActivity extends AppCompatActivity {
7.
8. @Override
9. protected void onCreate(Bundle savedInstanceState) {
10. super.onCreate(savedInstanceState);
11. setContentView(R.layout.activity_main);
12. }
13. }

WEB VIEW:

Android WebView is used to display web page in android. The web

page can be loaded from same application or URL. It is used to
display online content in android activity.

Android WebView uses webkit engine to display web page.

The android.webkit.WebView is the subclass of AbsoluteLayout class.

The loadUrl() and loadData() methods of Android WebView class

are used to load and display web page.

Example:

1. WebView mywebview = (WebView) findViewById(R.id.webView1);
2. mywebview.getSettings().setJavaScriptEnabled(true);
3. mywebview.loadUrl("http://www.github.com/");

RECYCLER VIEW :
● RecyclerView is the ViewGroup that contains the views
corresponding to your data. It's a view itself, so you
add RecyclerView into your layout the way you would add any other
UI element.
● Each individual element in the list is defined by a view holder object.
When the view holder is created, it doesn't have any data associated
with it. After the view holder is created, the RecyclerView binds it to
 its data. You define the view holder by
extending RecyclerView.ViewHolder.
● The RecyclerView requests those views, and binds the views to their
data, by calling methods in the adapter. You define the adapter by
extending RecyclerView.Adapter.

TO IMPLEMENT RECYCLER VIEW THIS THREE ARE NEEDED,

1. The Card Layout: The card layout is an XML layout which will be

treated as an item for the list created by the RecyclerView.
2. The ViewHolder: The ViewHolder is a java class that stores the
reference to the card layout views that have to be dynamically
modified during the execution of the program by a list of data
obtained either by online databases or added in some other way.
3. The Data Class: The Data class is a custom java class that acts as a
structure for holding the information for every item of the
RecyclerView.