Android Option Menus and BaseActivities

Today we’re going to cover a couple things including one of the features that differentiates Android from it’s biggest competitor, iOS.  This feature is the Menu button. The Menu button enables you to load an Options Menu which allows users to access basic activity actions and navigation options.  Let’s take a look at how you accomplish this functionality.

The first thing you have to do to add your Options Menu is create a new XML resource.  This resource will contain the content of our actual menu.  res –>New –> Folder.   res -> layout ->right click -> New –> Other -> Android XML File. -> Next.  Menu should be preselected as the Resource Type which means you just need to put in a File name. Name the file "options_menu".  You’ll be taken to the graphic menu editor.  Click Add and pick Item.  This will create a new menu item.  We’re fine with the default id but we need to set the Title.  To do so, click the Browse button to the right of the Title textbox.  We’re going to need new String resources so clickNew String.  In the String textbox, enter “Activity One” and in the New R.string textbox enter “menu_one”.  When that is done, click Ok and then Ok again.  You need to add one more item so repeat that procedure and name the second item "Activity Two" and "menu_two".  Now we’re ready to put that menu into an Activity.

Here, you need to override the onCreateOptoinsMenu method from the Activity class.  To do this easily, place your cursor at the closing curly brace at the end of the onCreate method. You should now have the following code in our class:

   1:  @Override

   2:  public boolean onCreateOptionsMenu(Menu menu) {

   3:      // TODO Auto-generated method stub

   4:      return super.onCreateOptionsMenu(menu);

   5:  }

Here you’re going to get rid of the call to super.onCreateOptionsMenu and inflate the options_menu we just created.  This is done by getting an instance of MenuInflacter from our Activity and passing in the id of the menu like so:

   1:  @Override

   2:  public boolean onCreateOptionsMenu(Menu menu) {

   3:      MenuInflater inflater = getMenuInflater();

   4:      inflater.inflate(R.menu.options_menu, menu);

   5:      return true;

   6:  }

Now if you load your application (hit Ctrl+F11) and click the Menu button on the emulator (or a device) you should see your options menu appear:

This is great but now you need to actually handle clicking these menu buttons.  To do so, you need to override another method in our MenuActivity.  This time you’ll add onOptionsItemSelected:

   1:  @Override

   2:  public boolean onOptionsItemSelected(MenuItem item) {

   3:      // TODO Auto-generated method stub

   4:      return super.onOptionsItemSelected(item);

   5:  }

The MenuItem that is sent into this method has an ItemId that will match one of your two menu options so we’ll check to see if they are equal and do something different depending on which one it is.  In the example below, you’ll send an Intent if the user clicks "Activity Two" and do nothing if they click "Activity One":

   1:  @Override

   2:  public boolean onOptionsItemSelected(MenuItem item) {

   3:      switch (item.getItemId()) {

   4:      case R.id.item1:

   5:          return true;

   6:      case R.id.item2:

   7:          startActivity(new Intent(getApplicationContext(),

   8:                  ActivityTwo.class));

   9:          return true;

  10:      default:

  11:          return super.onContextItemSelected(item);

  12:      }

  13:  }

This is a very simple options menu but should give you an example of the sort of things you can do.  Before I move on, I’d like to point out how to add icon’s to your options menu items. To do so, you need to know the name of an image file you have in one of our drawable folders.  You know that by default there is an image named ic_launcher.png in your drawable folders so you’ll use that.  In the Icon textbox enter "@drawable/ic_launcher" then save your changes and rerun the application.  Now when you tap Menu you should see (depending on where you put the icon):

Now you can move all of your menu code out of MenuActivity and into BaseActivity.  I’ve added code to the onClick for menu item1 so that it will load MenuActivity.  I’ve also made the current activity finish after triggering the load of a new activity:

   1:  public abstract class BaseActivity extends Activity {

   2:      @Override

   3:      public boolean onCreateOptionsMenu(Menu menu) {

   4:          MenuInflater inflater = getMenuInflater();

   5:          inflater.inflate(R.menu.options_menu, menu);

   6:          return true;

   7:      }

   8:      @Override

   9:      public boolean onOptionsItemSelected(MenuItem item) {

  10:          switch (item.getItemId()) {

  11:          case R.id.item1:

  12:              startActivity(new Intent(getApplicationContext(),

  13:                      MenuActivity.class));

  14:              //End the current activity

  15:              finish();

  16:              return true;

  17:          case R.id.item2:

  18:              startActivity(new Intent(getApplicationContext(),

  19:                      ActivityTwo.class));

  20:              //End the current activity

  21:              finish();

  22:              return true;

  23:          default:

  24:              return super.onContextItemSelected(item);

  25:          }

  26:      }

  27:  }