1 of 58

Android Developer Fundamentals V2

Lesson 4

1

User Interaction

Android Developer Fundamentals V2

Menus and pickers

This work is licensed under a Creative Commons Attribution 4.0 International License.

Android Developer Fundamentals V2

Menus and pickers

This work is licensed under a Creative Commons Attribution 4.0 International License.

2 of 58

4.3 Menus and pickers

2

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

3 of 58

Contents

Overview
App Bar with Options Menu
Contextual menus
Popup menus
Dialogs
Pickers

3

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

4 of 58

Overview

4

Android Developer Fundamentals V2

5 of 58

Types of Menus

App bar with options menu
Context menu
Contextual action bar
Popup menu

5

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

6 of 58

Dialogs and pickers

Alert dialog
Date picker
Time picker

6

1

2

3

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

7 of 58

App Bar with Options Menu

7

Android Developer Fundamentals V2

8 of 58

What is the App Bar?

Bar at top of each screen—same for all devices (usually)

Nav icon to open navigation drawer
Title of current Activity
Icons for options menu items
Action overflow button for�the rest of the options menu

8

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

9 of 58

What is the options menu?

Appears in the right corner of the app bar (3)
For navigating to other activities and editing app settings

Action icons in the app bar for important items (1)
Tap the three dots, the "action overflow button" to see the options menu (2)

9

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

10 of 58

Adding Options Menu

10

Android Developer Fundamentals V2

11 of 58

Steps to implement options menu

XML menu resource (menu_main.xml)
onCreateOptionsMenu() to inflate the menu
onClick attribute or onOptionsItemSelected()
Method to handle item click

11

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

12 of 58

Create menu resource

Create menu resource directory
Create XML menu resource (menu_main.xml)
Add entry for each menu item (Settings and Favorites):

<item android:id="@+id/option_settings"

android:title="Settings" />

<item android:id="@+id/option_favorites"

android:title="Favorites" />

12

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

13 of 58

Inflate options menu

Override onCreateOptionsMenu() in Activity

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.menu_main, menu);

return true;

}

13

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

14 of 58

Add icons for menu items

Right-click drawable
Choose New > Image Asset
Choose Action Bar and Tab Items
Edit the icon name
Click clipart image, and click icon
Click Next, then Finish

14

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

15 of 58

Add menu item attributes

<item

android:id="@+id/action_favorites"

android:icon="@drawable/ic_favorite"

android:orderInCategory="30"

android:title="@string/action_favorites"

app:showAsAction="ifRoom" />

15

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

16 of 58

Override onOptionsItemSelected()

@Override

public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.action_settings:

showSettings();

return true;

case R.id.action_favorites:

showFavorites();

return true;

default:

return super.onOptionsItemSelected(item);

}

16

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

17 of 58

Contextual Menus

17

Android Developer Fundamentals V2

18 of 58

What are contextual menus?

Allows users to perform action on selected View
Can be deployed on any View
Most often used for items in RecyclerView, GridView, or other View collection

18

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

19 of 58

Types of contextual menus

Floating context menu—long-press on a View

User can modify View or use it in some fashion
User performs action on one View at a time

Contextual action mode—temporary action bar in place of or underneath app bar

Action items affect the selected View element(s)
User can perform action on multiple View elements at once

19

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

20 of 58

Floating Context Menu

20

Android Developer Fundamentals V2

21 of 58

Steps

Create XML menu resource file and assign appearance and position attributes
Register View using registerForContextMenu()
Implement onCreateContextMenu() in Activity to inflate menu
Implement onContextItemSelected() to handle menu item clicks
Create method to perform action for each context menu item

21

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

22 of 58

Create menu resource

Create XML menu resource (menu_context.xml)

<item

android:id="@+id/context_edit"

android:title="Edit"

android:orderInCategory="10"/>

<item

android:id="@+id/context_share"

android:title="Share"

android:orderInCategory="20"/>

22

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

23 of 58

Register a view to a context menu

In onCreate() of the Activity:

Register View.OnCreateContextMenuListener to View:

TextView article_text = findViewById(R.id.article);

registerForContextMenu(article_text);

23

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

24 of 58

Implement onCreateContextMenu() onCreateContextMenu() method

Specify which context menu

@Override

public void onCreateContextMenu(ContextMenu menu, View v,

ContextMenu.ContextMenuInfo menuInfo) {

super.onCreateContextMenu(menu, v, menuInfo);

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.menu_context, menu);

}

24

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

25 of 58

Implement onContextItemSelected() onCreateContextMenu() method

@Override

public boolean onContextItemSelected(MenuItem item) {

switch (item.getItemId()) {

case R.id.context_edit:

editNote();

return true;

case R.id.context_share:

shareNote();

return true;

default:

return super.onContextItemSelected(item);

}

25

The view

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

26 of 58

Contextual Action Bar

26

Android Developer Fundamentals V2

27 of 58

What is Action Mode?

UI mode that lets you replace parts of normal UI interactions temporarily
For example: Selecting a section of text or long-pressing an item could trigger action mode

27

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

28 of 58

Action mode has a lifecycle

Start it with startActionMode(), for example, in the listener
ActionMode.Callback interface provides lifecycle methods you override:
onCreateActionMode(ActionMode, Menu) once on initial creation
onPrepareActionMode(ActionMode, Menu) after creation and any time ActionMode is invalidated
onActionItemClicked(ActionMode, MenuItem) any time contextual action button is clicked
onDestroyActionMode(ActionMode) when action mode is closed

28

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

29 of 58

What is a contextual action bar?

Long-press on View shows contextual action bar

Contextual action bar with actions

Edit, Share, and Delete
Done (left arrow icon) on left side
Action bar is available until user taps Done

View on which long press triggers �contextual action bar

29

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

30 of 58

Steps for contextual action bar

Implement ActionMode.Callback interface to handle ActionMode lifecycle; include action for menu item click in onActionItemClicked() callback
Create method to perform action for each context menu item

Create XML menu resource file and assign icons for items
setOnLongClickListener() on View that triggers contextual action �bar and call startActionMode() to handle click

30

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

31 of 58

Use setOnLongClickListener

private ActionMode mActionMode;

In onCreate():

View view = findViewById(article);

view.setOnLongClickListener(new View.OnLongClickListener() {

public boolean onLongClick(View view) {

if (mActionMode != null) return false;

mActionMode =

MainActivity.this.startActionMode(mActionModeCallback);

view.setSelected(true);

return true;

}

});

31

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

32 of 58

Implement mActionModeCallback

public ActionMode.Callback mActionModeCallback =

new ActionMode.Callback() {

// Implement action mode callbacks here.

};

32

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

33 of 58

Implement onCreateActionMode

@Override

public boolean onCreateActionMode(ActionMode mode, Menu menu) {

MenuInflater inflater = mode.getMenuInflater();

inflater.inflate(R.menu.menu_context, menu);

return true;

}

33

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

34 of 58

Implement onPrepareActionMode

Called each time action mode is shown
Always called after onCreateActionMode, but may be called multiple times if action mode is invalidated

34

@Override

public boolean onPrepareActionMode(ActionMode mode, Menu menu) {

return false; // Return false if nothing is done.

}

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

35 of 58

Implement onActionItemClicked

Called when users selects an action
Handle clicks in this method

@Override

public boolean onActionItemClicked(ActionMode mode, MenuItem item) {

switch (item.getItemId()) {

case R.id.action_share:

// Perform action for the Share menu item.

mode.finish(); // Action picked, so close the action bar.

return true;

default:

return false;

}

35

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

36 of 58

Implement onDestroyActionMode

Called when user exits the action mode

@Override

public void onDestroyActionMode(ActionMode mode) {

mActionMode = null;

}

36

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

37 of 58

Popup Menu

37

Android Developer Fundamentals V2

38 of 58

What is a popup menu?

Vertical list of items anchored to a view
Typically anchored to a visible icon
Actions should not directly affect view content

Options menu overflow icon that opens options menu
In email app, Reply All and Forward relate to email message but don’t affect or act on message

38

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

39 of 58

Steps

Create XML menu resource file and assign appearance and position attributes
Add ImageButton for the popup menu icon in the XML activity layout file
Assign onClickListener to ImageButton
Override onClick() to inflate the popup and register it with onMenuItemClickListener()
Implement onMenuItemClick()
Create a method to perform an action for each popup menu item

39

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

40 of 58

Add ImageButton

<ImageButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/button_popup"

android:src="@drawable/@drawable/ic_action_popup"/>

40

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

41 of 58

Assign onClickListener to button

private ImageButton mButton = � (ImageButton) findViewById(R.id.button_popup);

In onCreate():

mButton.setOnClickListener(new View.OnClickListener() {

// define onClick

});

41

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

42 of 58

Implement onClick

@Override

public void onClick(View v) {

PopupMenu popup = new PopupMenu(MainActivity.this, mButton);

popup.getMenuInflater().inflate(

R.menu.menu_popup, popup.getMenu());

popup.setOnMenuItemClickListener(� new PopupMenu.OnMenuItemClickListener() {

// implement click listener.

});

popup.show();

}

42

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

43 of 58

Implement onMenuItemClick

public boolean onMenuItemClick(MenuItem item) {

switch (item.getItemId()) {

case R.id.option_forward:

// Implement code for Forward button.

return true;

default:

return false;

}

43

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

44 of 58

Dialogs

44

Android Developer Fundamentals V2

45 of 58

Dialogs

Dialog appears on top, interrupting flow of Activity
Requires user action to dismiss

45

DatePickerDialog

TimePickerDialog

AlertDialog

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

46 of 58

AlertDialog

AlertDialog can show:

Title (optional)
Content area
Action buttons

46

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation as it occurs, or an action before it occurs (as in discarding a draft). You can provide buttons in an alert to make a decision. For example, an alert dialog might require the user to click Continue after reading it, or give the user a choice to agree with an action by clicking a positive button (such as OK or Accept), or to disagree by clicking a negative button (such as Cancel).

Use the AlertDialog subclass of the Dialog class to show a standard dialog for an alert. The AlertDialog class allows you to build a variety of dialog designs. An alert dialog can have the following regions (refer to the diagram below):

Title: A title is optional. Most alerts don’t need titles. If you can summarize a decision in a sentence or two by either asking a question (such as, “Discard draft?”) or making a statement related to the action buttons (such as, “Click OK to continue”), don’t bother with a title. Use a title if the situation is high-risk, such as the potential loss of connectivity, and the content area is occupied by a detailed message, a list, or custom layout.
Content area: The content area can display a message, a list, or other custom layout.
Action buttons: You should use no more than three action buttons in a dialog, and most have only two.

47 of 58

Build the AlertDialog

Use AlertDialog.Builder to build alert dialog and set attributes:

public void onClickShowAlert(View view) {

AlertDialog.Builder alertDialog = new

AlertDialog.Builder(MainActivity.this);

alertDialog.setTitle("Connect to Provider");

alertDialog.setMessage(R.string.alert_message);

// ... Code to set buttons goes here.

47

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

The AlertDialog.Builder class provides the builder design pattern, which makes it easy to create an object from a class that has a lot of required and optional attributes and would therefore require a lot of parameters to build. Without this pattern, you would have to create constructors for combinations of required and optional attributes; with this pattern, the code is easier to read and maintain.

Use AlertDialog.Builder to build a standard alert dialog and set attributes on the dialog. Use setTitle() to set its title and setMessage() to set its message.

Note: If AlertDialog.Builder is not recognized as you enter it, you may need to add the following import statements to MainActivity.java:

import android.content.DialogInterface;

import android.app.AlertDialog;

The following creates the dialog object and sets the title (the string resource called alert_title) and message (the string resource called alert_message):

public void onClickShowAlert(View view) {

// Build the alert dialog.

AlertDialog.Builder alertDialog = new

AlertDialog.Builder(MainActivity.this);

// Set the dialog title.

alertDialog.setTitle("Connect to Provider");

// Set the dialog message.

alertDialog.setMessage(R.string.alert_message);

...

48 of 58

Set the button actions

alertDialog.setPositiveButton()
alertDialog.setNeutralButton()
alertDialog.setNegativeButton()

48

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

49 of 58

alertDialog code example

alertDialog.setPositiveButton(

"OK", newDialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {

// User clicked OK button.

}

});

Same pattern for setNegativeButton() and setNeutralButton()

49

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

50 of 58

Pickers

50

Android Developer Fundamentals V2

51 of 58

Pickers

51

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

52 of 58

Pickers use fragments

Use DialogFragment to show a picker
DialogFragment is a window that floats on top of Activity window

52

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

53 of 58

Introduction to fragments

A Fragment is like a mini-Activity within an Activity

Manages its own own lifecycle
Receives its own input events

Can be added or removed while parent Activity is running
Multiple fragments can be combined in a single Activity
Can be reused in more than one Activity

53

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

54 of 58

Creating a date picker dialog

Add a blank Fragment that extends DialogFragment and implements DatePickerDialog.OnDateSetListener
In onCreateDialog() initialize the date and return the dialog
In onDateSet() handle the date
In Activity show the picker and add method to use date

54

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers

55 of 58

Creating a time picker dialog

Add a blank Fragment that extends DialogFragment and implements TimePickerDialog.OnTimeSetListener
In onCreateDialog() initialize the time and return the dialog
In onTimeSet() handle the time
In Activity, show the picker and add method to use time

55

Android Developer Fundamentals V2

This work is licensed under a Creative Commons Attribution 4.0 International License.

Menus and pickers