DM461 Mobile Applications

Lecture 5 – Utility UI
Components

Dr. Amira Sayed A. Aziz

Faculty of Computers and Information Technology
Agenda

 Dialogs
 Tooltips
 Pickers
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.
Dialogs

 The Dialog class is the base class for dialogs, but you should avoid
instantiating Dialog directly. Instead, use one of the following subclasses:
 AlertDialog – A dialog that can show a title, up to three buttons, a list of
selectable items, or a custom layout.
 DatePickerDialog or TimePickerDialog – A dialog with a pre-defined UI that allows
the user to select a date or time.
 These classes define the style and structure for your dialog, but you should
use a DialogFragment as a container for your dialog. The DialogFragment
class provides all the controls you need to create your dialog and manage
its appearance, instead of calling methods on the Dialog object.
Dialogs
AlertDialog

 The AlertDialog class allows you to build a variety of dialog designs and is
often the only dialog class you'll need.
 The AlertDialog.Builder class provides APIs that allow you to create an
AlertDialog with these kinds of content, including a custom layout.

Title

Content area

Action buttons
AlertDialog
AlertDialog
AlertDialog

 There are three different action buttons you can add:

 Positive
 You should use this to accept and continue with the action (the "OK" action).
 Negative
 You should use this to cancel the action.
 Neutral
 You should use this when the user may not want to proceed with the action but
doesn't necessarily want to cancel. It appears between the positive and
negative buttons. For example, the action might be "Remind me later."
Dialogs with UI Controls
Tooltips

 A tooltip is a small descriptive message that appears near a view when

users long press the view or hover their mouse over it. This is useful when your
app uses an icon to represent an action or piece of information to save
space in the layout.
Tooltips
 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). Using these
pickers helps ensure that your users
can pick a time or date that is valid,
formatted correctly, and adjusted to
the user's locale. TimePickerDialog DatePickerDialog
Pickers

 To define a DialogFragment for a TimePickerDialog, you must:

1. Define the onCreateDialog() method to return an instance of
TimePickerDialog
2. Implement the TimePickerDialog.OnTimeSetListener interface to receive a
callback when the user sets the time.
 Time Picker

To display a TimePickerDialog
using DialogFragment, you
need to define a fragment
class that extends
DialogFragment and return a
TimePickerDialog from the
fragment's onCreateDialog()
method.
Time Picker

 Once you've defined a DialogFragment like the one shown above, you can
display the time picker by creating an instance of the DialogFragment and
calling show().
 Date Picker

To display a DatePickerDialog
using DialogFragment, you
need to define a fragment
class that extends
DialogFragment and return a
DatePickerDialog from the
fragment's onCreateDialog()
method.
Date Picker

 Once you've defined a DialogFragment like the one shown above, you can
display the date picker by creating an instance of the DialogFragment and
calling show().
Floating Action Button (FAB)

 A floating action button (FAB) is a

circular button that triggers the
primary action in your app's UI. This
page shows you how to add the
FAB to your layout, customize some
of its appearance, and respond to
button taps.
 Float Action Button

Creating a FAB

Implementing a
listner
Toast

 A toast provides simple feedback

about an operation in a small
popup. It only fills the amount of
space required for the message and
the current activity remains visible
and interactive. Toasts
automatically disappear after a
timeout.
Toast

 Alternatives to using toasts

 If your app is in the foreground, consider using a snackbar instead of using a
toast. Snackbars include user-actionable options, which can provide a better
app experience.
 If your app is in the background, and you want users to take some action, use a
notification instead.
 Use the makeText() method, which takes the following parameters:
1. The application Context.
2. The text that should appear to the user.
3. The duration that the toast should remain on the screen.
 The makeText() method returns a properly initialized Toast object.
Toast
Switching Between Activities

 In order to switch between Activities in Android you will need to follow these
steps:

1. Create the Activities

2. Add the Activities to the app’s Manifest
3. Create an Intent referencing the Activity class you want to switch to
4. Call the startActivity(Intent) method to switch to the Activity
5. Create a back button on the new Activity and call the finish() method on
an Activity when the back button is pressed
Switching Between Activities

 Intents are used in Android to request an action from other app

components such as Activities, Services, Broadcast Receivers or Content
Providers.

 The main use cases for Intents are:

 Starting an activity
 Starting a service
 Delivering a broadcast
Switching Between Activities

 Intent switchActivityIntent = new Intent(this, SecondActivity.class);

startActivity(switchActivityIntent);

 Inside the onCreate method, add an OnClickListener to the Button used for
going back to the previous Activity. When selected call the finish() method
will will remove the SecondActivity and take you back to the FirstActivity.
Pass Data Between Activities

 This is possible by providing data to the Intent used to transition between

Activities through the use of the putExtra(…) method.
References

 https://developer.android.com/develop/ui/views/components/dialogs
 https://developer.android.com/develop/ui/views/components/pickers
 https://learntodroid.com/how-to-switch-between-activities-in-android/
 https://www.tutorialspoint.com/how-to-switch-between-different-activities-
in-android