Module 3

Exploring User Interface Screen Elements

By:
Mitul Patel
 Topics to be covered
• Introducing Android Views and Layouts
• Displaying Text with TextView
• Retrieving Data From Users
• Using Buttons, Check Boxes and Radio Groups
• Getting Dates and Times from Users,
• Using Indicators to Display and Data to Users
• Adjusting Progress with SeekBar
• Providing Users with Options and Context Menus
• Handling User Events
• Working with Dialogs
• Working with Styles
• Working with Themes.
 The Android View
• The Android SDK has a Java package named android.view.
• This package contains a number of interfaces and classes related
to drawing on the screen.
• View object refers to one of the classes within this package:
Android.view.View
• The View class is the basic user interface building block within
Android.
• It represents a rectangular portion of the screen.The View class
servers as the base class for nearly all the user interface controls
and layouts within the Android SDK.
Commonly used Views
View Class Hierarchy
 The Android Controls
• The Android SDK contains a Java package named
android.widget.
• When we refer to controls, we are typically referring to a class
within this package.
• The Android SDK includes classes to draw most common
objects, including ImageView, FrameLayout, EditText and
Button classes.
• All these controls are derived from the View class.
 The Android Controls
• User Interface Controls can be static or programmatically.
• Each control you want to be able to access programmatically
must have a unique identifier specified using the android:id
attribute.
• You use this identifier to access the control with the
findViewById() method in your Activity class.

TextView tv = (TextView) findViewById(R.id.textview01);

 The Android Layout
• Found in android.widget package.
• It is a View object but it doesn’t actually draw anything
specific on the screen. Instead it is a parent container for
organizing other controls(children).
• Each type of layout control draws its children using particular
rules.
• For instance, the LinearLayout controls draw its child controls
in a single horizontal row or a single vertical column.
• Details will be in Module 4.
 Displaying Text with TextView

• A user interface element that displays text to the user.

 Creating Contextual Links in Text
• andorid:autoLink => By using this attribute, android can controls
whether links(such as urls, emails, phone and address) are
automatically found and converted to clickable links.
1. android:autoLink=”none”
2. android:autoLink=”email”
3. android:autoLink=”phone”
4. android:autoLink=”web”
5. android:autoLink=”map”
6. android:autoLink=”all”
android:autoLink=”email”
 Retrieving Data from Users with Text Fields
EditText
• In Android, EditText is a standard entry widget in android
apps.
• EditText is a subclass of TextView with text editing
operations. We often use EditText in our applications in order
to provide an input or text field, especially in forms. The most
simple example of EditText is Login or Sign-in form.
 Using EditText Controls
To retrieve data entered through Android EditText we
do the following:

activity_main.xml
 Checking User Inputs with Input Filters
• Sometimes requirement comes in a way when one needs to
restrict characters to be entered in Edit Text. Scenario can be
“username should be greater than 6 characters”, “accepts
only decimal number with 2 digits after fraction”, etc.
Helping the User with Autocompletion

AutoCompletionTextView
 Adapter in Android
• In Android, Adapter is a bridge
between UI component and
data source that helps us to fill
data in UI component. It holds
the data and send the data to
an Adapter view then view can
takes the data from
the adapter view and shows the
data on different views like
as ListView, GridView, Spinner e
tc
 ArrayAdapter In Android
• Whenever we have a list of single items which is backed by an
Array, we can use ArrayAdapter. For instance, list of phone
contacts, countries or names.
“MainActivity.java” for
AutoCompletionTextView
 MultiAutoCompleteTextView
• One most important difference
between MultiAutoCompleteTextView and AutoCompleteTextView
is that AutoCompleteTextView can hold or select only single value
at single time but MultiAutoCompleteTextView can hold multiple
string words value at single time. These all values are separated by
comma(,).
MultiAutoCompleteTextView Example
Giving Users Choices Using Spinner Controls
• It can be used to display the multiple options to the user in which
only one item can be selected by the user.
• Android spinner is like the drop down menu with multiple values
from which the end user can select only one value.
• Android spinner is associated with AdapterView. So you need to
use one of the adapter classes with spinner..
Giving Users Choices Using Spinner Controls
 File: MainActivity.java
The code to display item on the spinner
and perform event handling
 User Selections with Buttons and Switches
• Using Basic Buttons
• Using Checkbox and ToggleButton Controls
• Using RadioGroup and RadioButton
 Using Basic Buttons
• A basic Button is often used to perform some sort of action,
such as submitting a form or confirming a selection.
• A basic Button control can contain a text or image label.
• The android.widget.Button class provides a basic Button
implementation in the Android SDK.
• Common Button Text such as “Yes”,”No”,”OK”,”Cancel” or
“Submit”.
 A Button Listener
• A button won’t do anything, other than animate, without
some code to handle the click event.
 ImageButton
• A button with its primary label as an image is an ImageButton.
• An ImageButton is, for most purposes, almost exactly like a basic
button.
• Click actions are handled in the same way. The primary difference
is that you can set its src attribute to be an image
 Checkbox Control
• The check box button is often
used in lists of items where the
user can select multiple items.
• The Android check box contains a
text attribute that appears to the
side of the check box.
• This is used in a similar way to
the label of a basic button. In
fact, it’s basically a TextView next
to the button.
 Checkbox Control
• In Android, CheckBox is a type of two state button either unchecked or
checked in Android. Or you can say it is a type of on/off switch that can
be toggled by the users.
• You should use checkbox when presenting a group of selectable options
to users that are not mutually exclusive. CompoundButton is the parent
class of CheckBox class.
• In android there is a lot of usage of check box. For example, to take
survey in Android app we can list few options and allow user to choose
using CheckBox.
• The user will simply checked these checkboxes rather than type their
own option in EditText. Another very common use of CheckBox is as
remember me option in Login form.
Listener on Checkbox
Example
 ToggleButton
• A Toggle Button is similar to a check box in behavior but is usually used to show or
alter the on or off state of something. Like the CheckBox, it has a state (checked or
not).
• Also like the check box, the act of changing what displays on the button is handled
for us.
• Unlike the CheckBox, it does not show text next to it.
• Instead, it has two text fields. The first attribute is textOn, which is the text that
displays on the button when its checked state is on. The second attribute is
textOff, which is the text that displays on the button when its checked state is off.
The default text for these is “ON” and “OFF,” respectively.
• The most simple example of ToggleButton is doing on/off in sound, Bluetooth,
wifi, hotspot etc
ToggleButton (On/Off)
 Switch (On/Off)

• In Android, Switch is a two-state toggle switch widget that can select

between two options.
• It is used to display checked and unchecked state of a button providing
slider control to user.
• Switch is a subclass of CompoundButton. It is basically an
off/on button which indicate the current state of Switch.
• It is commonly used in selecting on/off in Sound, Bluetooth, WiFi etc.
Switch (On/Off)
 ToggleButton Vs Switch In Android
• ToggleButton allow the users to change the setting between
two states like turn on/off your wifi, Bluetooth etc from your
phone’s setting menu.
• Since, Android 4.0 version ( API level 14) there is an another
kind of ToggleButton called Switch which provide the user
slider control.
 RadioButton and RadioGroup
• RadioButton are mainly used together in
a RadioGroup.
• In RadioGroup checking the one
radio button out of several radio button added in
it will automatically unchecked all the others.
• It means at one time we can checked only one
radio button from a group of radio buttons which
belong to same radio group.
• The most common use of radio button is in Quiz
Android App code.
RadioGroup and RadioButton(Example)
 DatePicker

• In Android, DatePicker is a widget

used to select a date. It allows to
select date by day, month and year
in your custom UI (user interface).
• If we need to show this view as a
dialog then we have to use a
DatePickerDialog class.
• For selecting time Android also
provides timepicker to select time
 Methods of DatePicker

• getDayOfMonth(): to get the selected day of the month from

a date picker.
• getMonth():to get the selected month from a date picker
• getYear():to get the selected year from a date picker.
• getFirstDayOfWeek():to get the first day of the week.
• setSpinnersShown(boolean shown) : to set whether
the spinner of the date picker in shown or not
setSpinnersShown(boolean shown) for DatePicker
DatePicker Example in Android Studio
DatePicker Example 2 in Android Studio
 TimePicker

• In Android, TimePicker is a widget used for selecting the time

of the day in either AM/PM mode or 24 hours mode.
• The displayed time consist of hours, minutes and clock
format.
• If we need to show this view as a Dialog then we have to use
a TimePickerDialog class.
 Methods of TimePicker
1. setCurrentHour(Integer currentHour)
2. setCurrentMinute(Integer currentMinute)
3. getCurrentHour()
4. getCurrentMinute()
5. setIs24HourView(Boolean is24HourView)
6. is24HourView()
7. setOnTimeChangedListener(TimePicker.OnTimeChangedListener
onTimeChangedListener):
Example of TimePicker in Android Studio
Example2 of TimePickerDialog in Android Studio
 Indicating Progress with ProgressBar
• In Android, ProgressBar is used to
display the status of work being done
like analyzing status of work or
downloading a file etc.
• In Android, by default a progress
bar will be displayed as a spinning
wheel but If we want it to be displayed
as a horizontal bar then we need to use
style attribute as horizontal.
• It mainly use
the “android.widget.ProgressBar” class.
 Important Methods Used In ProgressBar
1. getMax() – returns the maximum value of progress bar
2. getProgress() – returns current progress value
Example
 Adjusting Progress with Seek Bars
• In Android, SeekBar is an extension of ProgressBar that adds a
draggable thumb, a user can touch the thumb and drag left or
right to set the value for current progress.
• SeekBar is one of the very useful user interface element in
Android that allows the selection of integer values using a natural
user interface. An example of SeekBar is your device’s brightness
control and volume control
 Listener To Notify The Changes In SeekBar:

• SeekBar.OnSeekBarChangeListener is a listener used as

a callback that notifies client when the progress level of
seekbar has been changed.
• seekBarInstanceVariable.setOnSeekBarChangeListener(new O
nSeekBarChangeListener() {…}
– This method is used to notify the user changes/actions in the
SeekBar.
 Methods Needs To Be Implemented
1. public void onProgressChanged (SeekBar
seekBar, int progresValue, boolean fromUser) {…} –
This listener method will be invoked if any change is made in the SeekBar.
2. public void onStartTrackingTouch(SeekBar seekBar) {…} –
This listener method will be invoked at the start of user’s touch event.
Whenever a user touch the thumb for dragging this method will
automatically called.
3. public void onStopTrackingTouch(SeekBar seekBar) {…} –
This listener method will be invoked at the end of user touch event.
Whenever a user stop dragging the thump this method will be
automatically called.
Example
 Displaying Rating Data
with RatingBar
• Although the SeekBar is useful for allowing a user to set a
value, such as the volume, the RatingBar has a more specific
purpose: showing ratings or getting a rating from a user.
• By default, this progress bar uses the star paradigm with five
stars by default. A user can drag across this horizontal to set a
rating
RatingBar Example
 Showing Time Passage with Chronometer

• In Android, Chronometer is a class that implements a simple

timer. Chronometer is a subclass of TextView. This class helps
us to add a timer in our app
Chronometer Example
Chronometer
Example
 Displaying the Time
• Displaying the time in an application is often not necessary
because Android devices have a status bar to display the
current time. However, there are two clock controls available
to display this information: the DigitalClock and AnalogClock
controls.
Analog and Digital Clock
 Playing Video with VideoView
• In Android, VideoView is used to display
a video file.
• It can load images from various sources
(such as content providers or resources)
taking care of computing its
measurement from the video so that it
can be used for any layout manager,
providing display options such as scaling
and tinting.
 MediaController In VideoView

• MediaController is a class which is used to provide the controls

for the video playback. If a video is simply played using the
VideoView class then the user will not be given any control over
the playback of the video which will run until the end of the video
is reached.
• This issue can be addressed by attaching an instance of the
MediaController class to the VideoView instance.
• The Media Controller will then provide a set of controls allowing
the user to manage the playback (such as seeking
backwards/forwards and pausing in the video timeline).
Example
 Encouraging Action(Menus)
• To prompt users to take a particular action.
• Menus were from API Level 1 to API Level 11
• From API Level 11,menus have been replaced with
the ActionBar that represents actions to users.
• API Level 21 added a generalized version of an
ActionBar called a ToolBar.
 Types of Menus
• Options Menu:
• This menu is usually found at the top of your
application and in it, you should place actions that
affect the application as a whole. These could be the
application’s settings or a search box.
• Contextual Menu:
• This menu appears when a user performs a long click
on one of your UI elements.
• Popup Menu:
• Android Popup Menu displays the menu below the
anchor text if space is available otherwise above the
anchor text. It disappears if you click outside the
popup menu.
 ToolBars
• The toolbar was introduced from Android Lollipop when
Material Design came into existence.
• Before Toolbar we were using ActionBar, the position of
ActionBar was fix at the top of the screen.
• But in case of Toolbar, it is more flexible; you can place
Toolbar anywhere in the Activity. The toolbar is useful for
displaying App Icon, Title, Navigation Menu, etc.
 Toolbars
• The key functions of the app bar are as follows:
• A dedicated space for giving your app an identity and
indicating the user's location in the app.
• Access to important actions in a predictable way, such as
search.
• Support for navigation and view switching (with tabs or drop-
down lists).
 Using Toolbar as ActionBar
To use Toolbar as an ActionBar, first ensure the AndroidX support library is added
to your application build.gradle (Module:app) file:

Second, let's disable the theme-provided ActionBar. The easiest way is to have your theme
extend from Theme.AppCompat.NoActionBar (or the light variant) within the res/values/styles.xml file:
 Using Toolbar as ActionBar
Now you need to add a Toolbar to your Activity layout file
MyActivity.java for Toolbar
res/menu/menu_main.xml which is inflated above in onCreateOptionsMenu
 Reusing the Toolbar

In many apps, the same toolbar can be used across multiple activities or in
alternative layout resources for the same activity. In order to easily reuse
the toolbar, we can leverage the layout include tag as follows. First, define
your toolbar in a layout file in res/layout/toolbar_main.xml:
<include /> tag to load the toolbar into our activity layout XML:

access the Toolbar by the include id instead:

Styling the Toolbar

create the custom styles

in res/values/styles.xml with:
 Dialogs

• A dialog is a small window that prompts the user to

make a decision or enter additional information. A
dialog does not fill the screen and is normally used
for modal events that require users to take an action
before they can proceed.
 AlertDialog

• Alert Dialog in an android UI prompts a small window to make

decision on mobile screen. Sometimes before making a decision it
is required to give an alert to the user without moving to next
activity. To solve this problem alert dialog came into practise. For
example you have seen this type of alert when you try to exit the
App and App ask you to confirm exiting.
Example
Example
 ProgressDialog
• Android Progress Dialog is a UI which
shows the progress of a task like you
want user to wait until the previous
lined up task is completed and for that
purpose you can use progress dialog.
The best example is you see
when downloading or uploading any
file.
ProgressDialog

RingProgress
ProgressDialog
 Styles and Themes

• Styles and themes on Android allow you to separate the details of your app design from
the UI structure and behavior, similar to stylesheets in web design.

• A style is a collection of attributes that specify the appearance for a single View. A style
can specify attributes such as font color, font size, background color, and much more.

• A theme is a collection of attributes that's applied to an entire app, activity, or view

hierarchy—not just an individual view. When you apply a theme, every view in the app or
activity applies each of the theme's attributes that it supports. Themes can also apply
styles to non-view elements, such as the status bar and window background.

• Styles and themes are declared in a style resource file in res/values/, usually named
styles.xml.
Styles and Themes
 Create and apply a style

To create a new style or theme, open your project's res/values/styles.xml file

You can apply the style to a view as follows:

 Apply a style as a theme

• You can create a theme the same way you create styles. The
difference is how you apply it: instead of applying a style with the
style attribute on a view, you apply a theme with the
android:theme attribute on either the <application> tag or an
<activity> tag in the AndroidManifest.xml file.
 Dark theme

• Dark theme is available in Android 10 (API

level 29) and higher. It has many benefits:
• Can reduce power usage by a significant
amount (depending on the device’s screen
technology).
• Improves visibility for users with low vision
and those who are sensitive to bright light.
• Makes it easier for anyone to use a device
in a low-light environment.
Support Dark theme in your app
THANK YOU