Saturday, January 17, 2015

Android beginner tutorial Part 51 Context Menu

In this tutorial we are going to learn about Context menus in Android.

As I mentioned before, Context menus are menus that appear when the user performs a long-press. A long-press is a screen touch that lasts for 2 or more seconds. Context menus are common in applications on desktops - they appear on right clicks.

First go to activity_main.xml that is located in the res/layout/ folder. Here we add 2 TextView objects (make sure they are big enough), label them Example One and Example Two. Give them ids as shown below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >

<TextView android:id="@+id/text_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Example One"
android:textSize="50sp"
/>

<TextView android:id="@+id/text_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Example Two"
android:textSize="50sp"
/>

</LinearLayout>

We are going to make them both react to long-presses. Moreover, well tell them to display different context menus when interacted with.

Go to MainActivity.java nad declare 6 identificator variables:

public static final int IDM_ONE = 101;
public static final int IDM_TWO = 102;
public static final int IDM_THREE = 103;
public static final int IDM_FOUR = 104;
public static final int IDM_FIVE = 105;
public static final int IDM_SIX = 106;

In the onCreate() function, find the two TextViews and call a method called registerForContextMenu() twice, passing each TextView to the function:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final TextView tOne = (TextView)findViewById(R.id.text_one);
final TextView tTwo = (TextView)findViewById(R.id.text_two);

registerForContextMenu(tOne);
registerForContextMenu(tTwo);
}

Now create a function called onCreateContextMenu(). Inside of it, after calling the super function, add a switch..case statement that checks what View is passed to the function. The View value is the View that the user has long-pressed on. We can compare its id to R.id.text_one and R.id.text_two and display different context menus like this:

@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v, menuInfo);

switch(v.getId()){
case R.id.text_one:
menu.setHeaderTitle("Example one context");
menu.add(Menu.NONE, IDM_ONE, Menu.NONE, "Item one");
menu.add(Menu.NONE, IDM_TWO, Menu.NONE, "Item two");
menu.add(Menu.NONE, IDM_THREE, Menu.NONE, "Item three");
break;
case R.id.text_two:
menu.setHeaderTitle("Example two context");
menu.add(Menu.NONE, IDM_FOUR, Menu.NONE, "Item four");
menu.add(Menu.NONE, IDM_FIVE, Menu.NONE, "Item five");
menu.add(Menu.NONE, IDM_SIX, Menu.NONE, "Item six");
break;
default:
break;
}
}

To add item selection listeners to these functions, override a onContextItemSelected() method and use a switch..case statement to check the ids of the selected item to display different messages:

@Override
public boolean onContextItemSelected(MenuItem item){
CharSequence message;
switch(item.getItemId()){
case IDM_ONE:
message = "First item selected";
break;
case IDM_TWO:
message = "Second item selected";
break;
case IDM_THREE:
message = "Third item selected";
break;
case IDM_FOUR:
message = "Fourth item selected";
break;
case IDM_FIVE:
message = "Fifth item selected";
break;
case IDM_SIX:
message = "Sixth item selected";
break;
default:
return super.onContextItemSelected(item);
}
Toast toast = Toast.makeText(this, message, Toast.LENGTH_SHORT);
toast.show();
return true;
}

Now we have 2 TextViews in our application that, when long-pressed on, display different Context menus, that react to item selection events.

Full code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.view.ContextMenu;
import android.view.ContextMenu.ContextMenuInfo;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity{

public static final int IDM_ONE = 101;
public static final int IDM_TWO = 102;
public static final int IDM_THREE = 103;
public static final int IDM_FOUR = 104;
public static final int IDM_FIVE = 105;
public static final int IDM_SIX = 106;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final TextView tOne = (TextView)findViewById(R.id.text_one);
final TextView tTwo = (TextView)findViewById(R.id.text_two);

registerForContextMenu(tOne);
registerForContextMenu(tTwo);
}

@Override
public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v, menuInfo);

switch(v.getId()){
case R.id.text_one:
menu.setHeaderTitle("Example one context");
menu.add(Menu.NONE, IDM_ONE, Menu.NONE, "Item one");
menu.add(Menu.NONE, IDM_TWO, Menu.NONE, "Item two");
menu.add(Menu.NONE, IDM_THREE, Menu.NONE, "Item three");
break;
case R.id.text_two:
menu.setHeaderTitle("Example two context");
menu.add(Menu.NONE, IDM_FOUR, Menu.NONE, "Item four");
menu.add(Menu.NONE, IDM_FIVE, Menu.NONE, "Item five");
menu.add(Menu.NONE, IDM_SIX, Menu.NONE, "Item six");
break;
default:
break;
}
}

@Override
public boolean onContextItemSelected(MenuItem item){
CharSequence message;
switch(item.getItemId()){
case IDM_ONE:
message = "First item selected";
break;
case IDM_TWO:
message = "Second item selected";
break;
case IDM_THREE:
message = "Third item selected";
break;
case IDM_FOUR:
message = "Fourth item selected";
break;
case IDM_FIVE:
message = "Fifth item selected";
break;
case IDM_SIX:
message = "Sixth item selected";
break;
default:
return super.onContextItemSelected(item);
}
Toast toast = Toast.makeText(this, message, Toast.LENGTH_SHORT);
toast.show();
return true;
}

}

Thanks for reading!

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.