How To Create Options Menus in Android Application

How To Create Options Menus 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

so now lets learn how to add Option menus in our android application.

• First start your eclipse and select new -> project and click next.
• Now fill with following details:
• Project name- OptionMenu
• Application name-OptionMenu
• package name-option.menu
• Minimum required SDK- select android 3.0
• tick on create custom laucher icon.
• Name the activity -Optionmenu
• tick on create project in workspace.

• In Config Launcher Icon window click Next and finally choose Blank Activity in Create Activity window and the click Next and then Finish.
• Now for creating menu we will use xml format to define menu item.so open.so for creating the xml file open the project OptionMenu-> res-> menu and right click on menu sub-folder and select the new file name it as mainmenu.xml.

• Now open the mainmenu.xml file and add the following xml lines in the file.

1:    <menu xmlns:android="http://schemas.android.com/apk/res/android">  
2:      <item android:id="@+id/facebook"   
3:        android:title="@string/facebook"   
4:        android:icon="@drawable/facebook">  
5:      </item>  
6:      <item android:id="@+id/wordpress"   
7:        android:title="@string/wordpress"   
8:        android:icon="@drawable/wordpress">  
9:      </item>  
10:      <item android:id="@+id/google"  
11:         android:title="@string/google"  
12:         android:icon="@drawable/google" android:showAsAction="ifRoom">  
13:      </item>  
14:    </menu>  

• Now let's understand the details of above mainmenu.xml lines.
• At line 1,we have added first menu item in which we have given title and icon for the menu.
• Title is defined in the string.xml file.
• Icon image is given in the drawable folder.
• Similarly we have added three menu item in th emainmenu.xml file.
• At line 12 ,android:showAsAction="ifRoom"  is added which means it will appear in the action bar to provide quick access.
• Now open the strings.xml file by clicking res-> values-> strings.xml and the few lines to it so that it finally look like this.In the file given below we have added the three Title string for the menu like Facebook, Google., WordPress. 

1:  <resources>  
2:    <string name="app_name">OptionMenu</string>  
3:    <string name="hello_world">Hello world!</string>  
4:    <string name="menu_settings">Settings</string>  
5:    <string name="title_activity_main">MainActivity</string>  
6:    <string name="facebook">facebook</string>  
7:    <string name="wordpress">wordpress</string>  
8:    <string name="google">google</string>  
9:  </resources>  

• Now to inflate the menu item we need to add the following lines to MainActivity.java

1:   @Override  
2:    public boolean onCreateOptionsMenu(Menu menu) {  
3:         MenuInflater inflater = getMenuInflater();  
4:      inflater.inflate(R.menu.mainmenu, menu);  
5:      return true;  
6:    }  

• As we have defined images for the menu icon so there is a need to add image for the menu.so we will use 32x32 pixels images for the icon you can copy the image from here .

wordpress

facebook

google

• Now your project is 70 % ready now run the project through the emulator.

• you can easily see that ,when you press menu button ,two menu item will appear on the screen,that is Facebook and WordPress while third item Google appear on the action bar.But when you click on the menu item it doesnot react anyway and disappear.So to make it active we need to add few more lines to  MainActivity.java
• Now open the MainActivity.java and add few more lines to it so that final code look like this.

1:  package option.Menu;  
2:  import android.os.Bundle;  
3:  import android.app.Activity;  
4:  import android.view.Menu;  
5:  import android.view.MenuInflater;  
6:  import android.view.MenuItem;  
7:  import android.widget.Toast;  
8:  public class MainActivity extends Activity {  
9:    @Override  
10:    public void onCreate(Bundle savedInstanceState) {  
11:      super.onCreate(savedInstanceState);  
12:      setContentView(R.layout.activity_main);  
13:    }  
14:    @Override  
15:    public boolean onCreateOptionsMenu(Menu menu) {  
16:         MenuInflater inflater = getMenuInflater();  
17:      inflater.inflate(R.menu.mainmenu, menu);  
18:      return true;  
19:    }  
20:    @Override  
21:    public boolean onOptionsItemSelected(MenuItem item) {  
22:      // Handle item selection  
23:      switch (item.getItemId()) {  
24:        case R.id.facebook:  
25:           Toast.makeText(this,"you hava selected the facebook",Toast.LENGTH_SHORT);  
26:           return true;  
27:        case R.id.wordpress:  
28:              Toast.makeText(this,"you hava selected the wordpress",Toast.LENGTH_SHORT).show();  
29:          return true;  
30:        case R.id.google:  
31:              Toast.makeText(this,"you hava selected the google",Toast.LENGTH_SHORT).show();  
32:          return true;  
33:        default:  
34:          return super.onOptionsItemSelected(item);  
35:      }  
36:    }  
37:       }  

• Here in the Mainactivity.java we have add many lines so let's understand it:
• At line 4-import android.view.Menu for the foundation of menu.
• At line 5-android.view.MenuInflater for inflating the menu from xml format.
• At line 6-android.view.MenuItem ,an interface for direct access to previously created menu item.
• At line 7-android.widget.Toast for a view containing little message for the user.
• At line 15-public boolean onCreateOptionsMenu(Menu menu), this method is overrides for specifying the option menu for the item.
• At line 16-MenuInflater inflater = getMenuInflater() ,create the inflator Menuinflator object which contain our inflated menu object.
• At line 17-inflater.inflate(R.menu.mainmenu, menu) ,inside inflate() method we are providing the path to the mainmenu.xml file.
• At line 21-public boolean onOptionsItemSelected(MenuItem item), when user selected the option menu it will passes the menuitem selected.
• At line 23-switch (item.getItemId()) ,it will handle the selected menu item by its id.
• At line 26-return true , when it successfully handles the menu item.
• At line 34-return super.onOptionsItemSelected(item) ,if nothing matches by default it will return false.
• Now our project is ready and when we will run this ,every meny item will response.
• And when you will click the facebook menu item it will show the message.