Mobile Application Development

Session: Spring 2021

Kaleem Nawaz Khan
Lecturer
Department of Computer Science

University of Engineering and Technology, Mardan

User Input Controls
ØUser interaction
ØMenus
ØOptions Menu
ØContext Menu
ØContextual Action Bar
ØPopup Menu
Menus
ØA menu is a set of options the user can select from to perform a function, such as
searching for information, saving information, editing information, or navigating to a
screen.
ØAndroid offers the following types of menus, which are useful for different situations
1. Options Menu
2. Context Menu
3. Contextual Action Bar
4. Popup Menu
Menus: Options Menu
ØAppears in the app bar and provides the primary options that affect using the app
itself.
ØExamples of menu options: Search to perform a search, Bookmark to save a link to a
screen, and Settings to navigate to the Settings screen.
ØThe app bar (also called the action bar) is a dedicated space at the top of each activity
screen.
ØWhen you create an activity from a template (such as Empty Template), an app bar is
automatically included for the activity
ØThe options menu in the app bar provides navigation to other activities in the app, or
the primary options that affect using the app itself — but not ones that perform an
action on an element on the screen
Menus: Options Menu
ØThe options menu appears in the right corner of the app bar. The app bar is split into
four different functional areas that apply to most apps:
1. Navigation button or Up button
2. Title
3. Action icons for the options menu
4. Overflow options menu
Menus: Options Menu
Adding the app bar
ØThe app bar is a general term for all of the items that appear under the status bar on
the screen
ØThe Toolbar is a widget that can be used to implement an app bar. It is currently the
favored way to implement an app bar
ØIn order to use Toolbar as the app bar for an activity, do one of the following:
ØStart your project with the Basic Activity template, which implements the Toolbar
ØAdd the support libraries: appcompat and design.
ØUse a NoActionBar theme and styles for the app bar and background.
ØAdd an AppBarLayout and a Toolbar to the layout.
ØAdd code to the activity to set up the app bar.
Menus: Options Menu
Adding the options menu
1. Create a Menu XML File
2. Add Items to Menu
3. Create Icons for Menu Items
4. Inflate Your Menu Resource
5. Detect User Interaction
6. Respond to Menu Item Selection
Menus: Options Menu
Example 1
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/about"
android:icon="@drawable/about"
android:title="About" />
<item android:id="@+id/help"
android:icon="@drawable/help"
android:title="Help" />
</menu>
Menus: Options Menu
import android.app.Activity; public boolean onOptionsItemSelected(MenuItem
import android.content.Intent; item) {
import android.os.Bundle; switch (item.getItemId()) {
import android.view.Menu; case R.id.about:
import android.view.MenuInflater; startActivity(new Intent(this, About.class));
import android.view.MenuItem; return true;
case R.id.help:
public class GreatAndroidAppActivity extends Activity { startActivity(new Intent(this, Help.class));
public void onCreate(Bundle savedInstanceState) { return true;
super.onCreate(savedInstanceState); default:
setContentView(R.layout.main);} return super.onOptionsItemSelected(item);
public boolean onCreateOptionsMenu(Menu menu) { }
MenuInflater inflater = getMenuInflater(); }
inflater.inflate(R.menu.my_options_menu, menu); }
return true;
}
Menus: Contextual Menu
ØUse a contextual menu to allow users to take an action on a selected view.
ØYou can provide a context menu for any View, but they are most often used for items
in a RecyclerView, GridView.
ØIt can be used for other view collections in which the user can perform direct actions
on each item.
Menus: Contextual Menu
Example 2
<LinearLayout <menu
xmlns:android="http://schemas.android.com/apk/res/andro xmlns:android="http://schemas.android.com/apk/r
id" es/android">
android:layout_width="fill_parent" <item android:id="@+id/option1"
android:layout_height="fill_parent" android:title="A Context Option" />
android:orientation="vertical" <item android:id="@+id/option2"
android:gravity="center" > android:title="Another Context Option" />
<TextView android:id="@+id/press" </menu>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:text="Long-press me" />
</LinearLayout>
 Menus: Contextual Menu
import android.view.ContextMenu; public boolean onContextItemSelected(MenuItem item) {
import android.view.MenuInflater; switch (item.getItemId()) {
import android.view.MenuItem; case R.id.option1:
import android.view.View; doOptionOne();
import android.view.ContextMenu.ContextMenuInfo; return true;
import android.widget.TextView; case R.id.option2:
import android.widget.Toast; doOptionTwo();
public class MyLovelyClass extends Activity { return true;
public void onCreate(Bundle savedInstanceState) { default:
super.onCreate(savedInstanceState); return false;}}
setContentView(R.layout.lovely_layout); private void doOptionOne() {
TextView pressView = (TextView)findViewById(R.id.press); Toast.makeText(this, "Option One Chosen...",
registerForContextMenu(pressView);} Toast.LENGTH_LONG).show();}
public void onCreateContextMenu(ContextMenu menu, View v, private void doOptionTwo() {
ContextMenuInfo menuInfo) { Toast.makeText(this, "Option Two Chosen...",
super.onCreateContextMenu(menu, v, menuInfo); Toast.LENGTH_LONG).show();
MenuInflater inflater = getMenuInflater(); }}
inflater.inflate(R.menu.lovely_context, menu);}
 Menus: Contextual Action Bar
ØA contextual action bar appears at the top of the screen to present actions the user can
perform on a view after long clicking the view
ØFollow these steps to create a contextual action bar
ØAn XML menu resource file for the menu items, and assign an icon to each one
ØSet the long-click listener to the view that should trigger the contextual action bar using the
setOnLongClickListener() method. Call startActionMode() within the
setOnLongClickListener() method when the user performs a long tap on the view.
ØImplement the ActionMode.Callback interface to handle the ActionMode lifecycle. Include
in this interface the action for responding to a menu item click in the onActionItemClicked()
callback method.
ØCreate a method to perform an action for each context menu item.
 Menus: Contextual Action Bar
Example 3
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/andro
id" xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"> <Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Contextual action bar"/>
</RelativeLayout>
<menu
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/notification” app:showAsAction="ifRoom"
android:icon="@drawable/ic_notifications_none_black_24dp”
android:title="@string/notification"/>
<item android:id="@+id/help” app:showAsAction="ifRoom"
android:icon="@drawable/ic_help_black_24dp"
android:title="@string/help"/>
<item android:id="@+id/setting” app:showAsAction="ifRoom"
android:icon="@drawable/ic_settings_black_24dp"
android:title="@string/setting"/>
<item android:id="@+id/logout” app:showAsAction="ifRoom"
android:icon="@drawable/ic_power_settings_new_black_24dp"
android:title="@string/logout"/>
</menu>
 Menus: Contextual Action Bar
public class MainActivity extends AppCompatActivity {
private ActionMode mActionMode;
Button contextualbtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contextualbtn = (Button)findViewById(R.id.btn)
contextualbtn.setOnLongClickListener(new
View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
if(mActionMode != null){return false;}
mActionMode =
MainActivity.this.startActionMode(mActionModeCallback);
v.setSelected(true);
return true; }});}
public ActionMode.Callback mActionModeCallback = new ActionMode.Callback()
{ @Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
MenuInflater inflater = mode.getMenuInflater();
inflater.inflate(R.menu.context_menu, menu);
return true;}
@Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
return false;}
@Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
switch (item.getItemId()){
case R.id.notification :
Toast.makeText(MainActivity.this,"Notification", Toast.LENGTH_SHORT).show();
mode.finish(); return true;
case R.id.help :
Toast.makeText(MainActivity.this,"Help",Toast.LENGTH_SHORT).show();
mode.finish(); return true;
 Menus: Popup Menu
ØA popup menu is typically used to provide an overflow of actions (similar to the
overflow action icon for the options menu)
ØFor example, the Gmail app uses a popup menu anchored to the overflow icon in the
app bar when showing an email message.
ØThe popup menu items Reply, Reply All, and Forward are related to the email
message, but don't affect or act on the message.
 Menus: Popup Menu
Example 4
<?xml version="1.0" encoding="utf-8"?> <menu
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android">
xmlns:android="http://schemas.android.com/apk/res/androi <item
d" android:id="@+id/item1"
tools:context="com.example.application.popupproject.MainA android:title=”Setting" />
ctivity"> <item
<ImageButton android:id="@+id/item2"
android:layout_width="wrap_content" android:title=”Favourite" />
android:layout_height="wrap_content" <item
android:id="@+id/button_popup" android:id="@+id/item3"
android:src="@drawable/ic_action_popup"/> android:title=”Setting" />
</android.support.constraint.ConstraintLayout> </menu>
 Menus: Popup Menu
private ImageButton mButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mButton = (ImageButton) findViewById(R.id.button_popup);
mButton.setOnClickListener(new View.OnClickListener() {
@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() {
public boolean onMenuItemClick(MenuItem item) {
// Perform action here
return true;} });
popup.show();//show the popup menu }
}); //close the setOnClickListener method }