23 Oct 2012

How to create Context Menu(Floating Menu) in Android Application


In Android application, menus are the common user interface components which gives user a dynamic user experience. The other details about menus are:
  • android.view.Menu is class which provides the functionality of menu.
  • Till the Android version 2.3 , dedicated menu hardware button is provided for the menu option.
  • After Android version 3.0 and higher, no dedicated button is provided but instead another ways are provided according to type of menu to access the menu.
  • There are three types of Menus or action used in all version of menus.
    1. Option menu and action bar-It is presented by action bar as a combination of on-screen action bar and overflow options.
    2. Context menu and contextual action mode-It is presented by contextual action mode for enabling the menu and selected item.
    3. Pop up menu
Context menu
Lets learn how to create context menu in in Android application.
  • First start your eclipse and select new -> project and click next.
  • Now fill with following details:
    • Project name- ContextMenu
    • Application name-ContextMenu
    • package name-context.menu
    • Minimum required SDK- select android 3.0
    • tick on create custom laucher icon.
    • Name the activity -Context_menu
    • tick on create project in workspace.

  • Now after doing this open the context_menu.xml you will see the following code.
  •  <RelativeLayout 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" >  
       <TextView  
         android:layout_width="wrap_content"  
         android:layout_height="wrap_content"  
         android:layout_centerHorizontal="true"  
         android:layout_centerVertical="true"  
         android:text="@string/hello_world"  
         tools:context=".Context_menu" />  
     </RelativeLayout>  
    



  • Just replace the codein context_menu.xml with the code given below.here we have added the grid view to the linear layout.
  •  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
      android:orientation="vertical"  
      android:layout_width="fill_parent"  
      android:layout_height="fill_parent"  
      >  
     <GridView  
       android:id="@+id/grid"  
       android:layout_width="fill_parent"  
       android:layout_height="fill_parent"  
       android:numColumns="2"  
       android:columnWidth="100dp"  
       android:stretchMode="columnWidth"  
       android:gravity="center"/>  
     </LinearLayout>  
    

  • Now Open the MainActivity.java and replace the whole existing code with the given one.
  •  package context.menu;  
     import android.app.Activity;  
     import android.os.Bundle;  
     import android.view.ContextMenu;  
     import android.view.ContextMenu.ContextMenuInfo;  
     import android.view.MenuItem;  
     import android.view.View;  
     import android.widget.ArrayAdapter;  
     import android.widget.Toast;  
     import android.widget.GridView;  
     public class MainActivity extends Activity {  
       GridView gridView;  
       String[] listContent = {  
          "January",  
          "February",  
          "March",  
          "April",  
          "May",  
          "June",  
          "July",  
          "August",  
          "September",  
          "October",  
          "November",  
          "December"  
      };  
      /** Called when the activity is first created. */  
      @Override  
      public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.context_menu);  
        gridView = (GridView)findViewById(R.id.grid);  
        ArrayAdapter<String> adapter= new ArrayAdapter<String>(this,  
           android.R.layout.simple_list_item_1,  
           listContent);  
        gridView.setAdapter(adapter);  
        registerForContextMenu(gridView);   
      }  
      @Override  
      public void onCreateContextMenu(ContextMenu menu, View v,ContextMenuInfo menuInfo) {  
          super.onCreateContextMenu(menu, v, menuInfo);  
               menu.setHeaderTitle("Context Menu");  
               menu.add(0, v.getId(), 0, "Action 1");  
               menu.add(0, v.getId(), 0, "Action 2");  
          }  
      @Override  
          public boolean onContextItemSelected(MenuItem item) {  
             if(item.getTitle()=="Action 1"){function1(item.getItemId());}  
           else if(item.getTitle()=="Action 2"){function2(item.getItemId());}  
           else {return false;}  
          return true;  
          }  
      public void function1(int id){  
           Toast.makeText(this, "function 1 called", Toast.LENGTH_SHORT).show();  
      }  
      public void function2(int id){  
           Toast.makeText(this, "function 2 called", Toast.LENGTH_SHORT).show();  
      }  
     }   
    
  • Now in MainActivity.java we have added many lines so lets understand it:
    • android.view.ContextMenu -is a extension of menus for the context menus.
    • android.view.ContextMenu.ContextMenuInfo- is a interface gives additional info regarding the context menu.
    • android.view.MenuItem-an interface for direct access to previously created menu item.
    • android.view.View-for providing view to layout ,here grid view.
    • android.widget.ArrayAdapter-it is a concrete base adapter which is backed by an array of arbitrary objects.
    • android.widget.Toast-for a view containing little message for user.
    • the setAdapter() method sets custom adapter as source to for all item to be displayed in the grid.
    • To show context menu on long click most developer wants to callregisterForContextMenu(View) and overrideonCreateContextMenu(ContextMenu,View,ContextMenu.ContextMenu.ContextMenuInfo).
    • Now after overriding the function onCreateContextMenu() we have added to menu item ie. Action1 and Action2.
    • onContextItemSelected() is overrided for performing the appropriate operation.
  • Now lets learn the project ,after running the project you will see the grid view(image 1)  and then put a long click on  any item, then Context Menu item will appear and  you can press any option(image 2).
Context menu
image 1
Context menu
image 2

3 comments:

Translate