Unit 2

User Interface Design

Activity:
An activity is each and every single screen in android. It is same as Frame or Window in Java.

Using activity, we can insert elements and place UI elements in a single screen.

Android Activity is the subclass of ContextThemeWrapper class. Below is the complete class hierarchy for
Activity.

Object

Context

ContextWrapper

ContextThemeWrapper

Activity

Android Activity Life Cycle controlled by total of 7 methods of android.app.Activity class.

 Activity Life Cycle

Activity Launched

onCreate()

onStart() onRestart()

User navigates to the onResume()

activity

App Process Activity Running

Killed

Another activity come into

the foreground
User Returns to the
Activity
Apps with higher priority
need memory onPause()

The Activity is no longer

visible
User Navigates to the
Activity
onStop()

The activity is finishing or being

destroyed by the system

onDestroy()

Activity
Destroyed
 The following callbacks, or events, are defined by the Activity class. It's not required that you use every
callback method. But it's crucial that you comprehend each one and put those into practice to make
sure your app operates as consumers would anticipate.

Sr. No. Callback & Description

1 onCreate()
This is the first callback and called when the activity is first created.
2 onStart()
This callback is called when the activity becomes visible to the user.
3 onResume()
This is called when the user starts interacting with the application.
4 onPause()
The paused activity does not receive user input and cannot execute any code
and called when the c activity is being resumed.
5 onStop()
This callback is called when the activity is no longer visible.
6 onDestroy()
This callback is called before the activity is destroyed by the system.
7 onRestart()
This callback is called when the activity restarts after stopping it.

Android Activity Lifecycle Example

File: MainActivity.java

package example.javatpoint.com.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");
}
@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");
}
}

Android Fragments:
Fragments are the part of activity or we can say it’s a sub-activity. This helps to represent multiple
screens in any activity.

Fragment lifecycle gets affected by activity lifecycle as fragments are embedded in activity only.
Just like Activity Manager, Fragment Manager is responsible for making interactions between fragment
objects.

Types of Fragments:

1. Single Fragment: Only one view displays on screen.

2. List Fragment: Fragments display in a list view from which user can selected their desired sub-
activity or fragments. We can consider Gmail as an example for list fragment display.
3. Fragment Transaction: User can make transition among multiple fragments at run time. User
can switch between fragments by switching on tabs.

Fragment LifeCycle:

The following callbacks, or events, are defined by the Fragment class. It's not required that you use
every callback method. But it's crucial that you comprehend each one and put those into practice to
make sure your app operates as consumers would anticipate.

Sr. No. Callback & Description

1 onAttach()
Called when fragment is attached with activity.
2 onCreate()
It is used to initialize the fragment.
3 onCreateView()
Creates and returns view hierarchy.
4 onActivityCreated(Bundle)
It is invoked after the completion of onCreate() method.
5 onViewStateRestored(Bundle)
It provides information to the fragment that all the saved state of fragment
view hierarchy has been restored.
6 onStart()
Makes the fragment visible.
7 onResume()
Makes the fragment interactive.
8 onPause()
It is called when fragment is no longer interactive.
9 onStop()
It is called when fragment is no longer visible.
10 onDestroyView()
It allows the fragment to clean up resources.
11 onDestroy()
It allows the fragment to do final clean-up of fragment state.
12 onDetach()
It is called immediately prior to the fragment no longer being associated
with its activity.
Android Layouts:
Layout is a view or interface which we design for our app, such as for an Activity. The elements in the
layout built using a hierarchy of View and ViewGroup. View is a place which user sees and using which
user interacts with application. ViewGroup is an invisible container which holds our view and other view
groups, as shown in below Fig:

ViewGroup

ViewGroup View View View

View View View

Types of Layouts

S.No. Layout & Description

1. Linear Layout
This layout aligns all the elements in a line, i.e, Horizontal or Vertical
2. Relative Layout
This layout shows all the elements at its relative position.
3. Table Layout
This layout group views in rows and columns.
4. Absolute Layout
This layout allows developer to give the exact location of elements.
5. Frame Layout
This layout works as a container for our view/ elements.
6. List View
This layout displays elements in a list form and make it as scrollable items.
7. Grid View
This layout displays elements in a form of grid and make it as scrollable elements.

1. Linear Layout: Linear Layout is a view group which aligns all the elements in a single direction,
horizontally or vertically. You can specify direction using orientation attribute
(android:orientation).
<LinearLayout>

</LinearLayout>
Horizontal Linear View

Vertical Linear View

2. Relative Layout: Relative Layout is a layout that holds the elements at their relative position. A
RelativeLayout is a very powerful utility for designing a user interface because it can eliminate
nested view groups and keep your layout hierarchy flat, which improves performance. If you
find yourself using several nested LinearLayout groups, you may be able to replace them with a
single RelativeLayout.
<LinearLayout>

</LinearLayout>

Relative Layout

3. Table Layout: Table Layout displays elements in rows and columns. It displays all children in
rows and columns with no borders between rows and columns or for each cell. For defining
rows we use “<TableRow> </TableRow>” tag.
<TableLayout>
<TableRow>
<EditText></EditText>
<EditText></EditText>
</TableRow>
</TableLayout>

Table Layout
4. Absolute Layout: Absolute Layout allows developer to specify exact location, i.e., X and Y
coordinates for its elements with the respect to the top-left corner at the top of the layout. This
layout is flexible and harder to maintain in different sizes of screen, that’s why it is highly not
recommended.

Absolute Layout

5. Frame Layout: A ViewGroup subclass called Android Framelayout is used to define the
arrangement of several views stacked on top of one another to create the appearance of a
single view screen. In general, FrameLayout is only a way to display a single view by blocking a
specific section of the screen.
<FrameLayout>

</FrameLayout>

Frame Layout
6. List View: List view displays elements in the form of list with scrollable items. As subclasses of
AdapterView, ListView and GridView can be filled with data by attaching them to an Adapter,
which builds a View for each data entry and pulls data from an external source.
Example:
ArrayAdapter adapter = new ArrayAdapter<String>(this,R.layout.ListView,StringArray);
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);

ITEM 1

ITEM 1

ITEM 1

ITEM 1

ITEM 1

ITEM 1

ITEM 1
7. Grid View: Grid view displays elements in form of grid with scrollable items. One kind of
AdapterView that shows things in a scrolling, two-dimensional grid is called a GridView. This grid
layout inserts items from either an array or a database. This data is displayed using the adapter,
and GridView is joined with the adapter using the setAdapter() method. The major job of the
GridView adapter is to retrieve data from an array or database and add it to the relevant item
that will be shown in GridView. The GridView structure looks like this. Both Java and Kotlin
programming languages will be used to develop this project for Android.
<GridView>

</GridView>

Grid View
Layout Attributes:

S.No. Attribute and It’s Description

1 android:id
This is the ID which uniquely 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
4 android:layout_marginTop
This is the extra space on the top side of the layout.
5 android:layout_marginBottom
This is the extra space on the bottom side of the layout.
6 android:layout_marginLeft
This is the extra space on the left side of the layout.
7 android:layout_marginRight
This is the extra space on the right side of the layout.
8 android:layout_x
This specifies the x-coordinate of the layout.
9 android:layout_y
This specifies the y-coordinate of the layout.
10 android:layout_width
This is the width of the layout.
11 android:paddingLeft
This is the left padding filled for the layout.
12 android:paddingRight
This is the right padding filled for the layout.
13 android:paddingTop
This is the top padding filled for the layout.
14 android:paddingBottom
This is the bottom padding filled for the layout.

UI (User Interface) Elements:

A View is a place which draws something on screen using which user can interact with and ViewGroup is
a container that holds views to define the layout of user interface.

When creating your interface, make an effort to select interface pieces that are predictable and
consistent. Users have grown accustomed to particular features functioning in a certain way, whether
they realize it or not. Choosing to employ such elements when it makes sense will contribute to task
completion, efficiency, and satisfaction.

Interface Elements includes:

1. Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles,
text fields, date field
Input Controls:
S.No Input Control & It’s Description Examples
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 Spinner/DropDown
A drop-down list that allows users to select one
value from a set.
 11 TimePicker
The TimePicker view enables users to select a time
of the day, in either 24-hour mode or AM/PM
mode.

12 DatePicker
The DatePicker view enables users to select a date
of the day.

2. Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons.
S. No. Input Control & It’s Description Examples
1 Search Field
A search box allows users to enter a
keyword or phrase (query) and submit
it to search the index with the
intention of getting back the most
relevant results. Typically search fields
are single-line text boxes and are
often accompanied by a search
button.
2 Breadcrumb
Breadcrumbs allow users to identify
their current location within the
system by providing a clickable trail of
proceeding pages to navigate by.
3 Pagination
Pagination divides content up
between pages, and allows users to
skip between pages or go in order
through the content.
 4 Tags
Tags allow users to find content in the
same category. Some tagging systems
also allow users to apply their own
tags to content by entering them into
the system.

5 Sliders
A slider, also known as a track bar,
allows users to set or adjust a value.
When the user changes the value, it
does not change the format of the
interface or other info on the screen.

6 Icons
An icon is a simplified image serving
as an intuitive symbol that is used to
help users to navigate the system.
Typically, icons are hyperlinked.

7 Image Carousel
Image carousels allow users to browse
through a set of items and make a
selection of one if they so choose.
Typically, the images are hyperlinked.

3. Information Components: tooltips, icons, progress bar, notifications, message boxes, modal
windows

S. No. Elements & It’s Description Examples

1 Notifications
A notification is an update message
that announces something new for the
user to see. Notifications are typically
used to indicate items such as, the
successful completion of a task, or an
error or warning message.
2 Progress Bars
A progress bar indicates where a user is
as they advance through a series of
steps in a process. Typically, progress
bars are not clickable.

3 Tool Tips
A tooltip allows a user to see hints
when they hover over an item
indicating the name or purpose of the
item.

4 Message Boxes
A message box is a small window that
provides information to users and
requires them to take an action before
they can move forward.