Pages

Saturday, September 29, 2012

Add Menu to Your Android Application...

Menus are most common user interface in many types of applications.To provide a familiar and consistent user experience you should use the Menu APIs to present the user actions and other options in your activity. I'll tell you how you can add Menu to your Android Application.

Application Overview

In this application I have created a Menu named COLOR which has a SubMenu, the list of colors. The background color of the screen as per selection of color from SubMenu.


1. Design Screen

Take a TextView control on the screen and set height and with of the control to MATCH_PARENT.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        <TextView
            android:id="@+id/screen"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout> 
The TextView in this program represent entire screen. On the selection of color from Menu the background color of TextView will change as well. 2. Write Class File  I'll add menu to the application programmatically. Take a look at below Java code of the Activity name MenuDemo.  
 package androidrises.menudemo;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Color;
import android.view.Menu;
import android.view.MenuItem;
import android.view.SubMenu;
import android.widget.TextView;

public class MenuDemo extends Activity {

 private static final int COLOR = 0;
 
 private static final int RED = Menu.FIRST;
 private static final int GREEN = RED+1;
 private static final int BLUE = GREEN+1;
 private static final int YELLOW = BLUE+1;
 TextView screen;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_menu_demo);
        
        screen = (TextView)findViewById(R.id.screen);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_menu_demo, menu);
        
        SubMenu sm = menu.addSubMenu("Color");
        
        sm.add(COLOR, RED, 0, "Red");
        sm.add(COLOR, BLUE, 1, "Blue");
        sm.add(COLOR, GREEN, 2, "Green");
        sm.add(COLOR, YELLOW, 3, "Yellow");

        return true;
    }
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
     // TODO Auto-generated method stub
     switch (item.getItemId()) {
  case RED:
   screen.setBackgroundColor(Color.RED);
   break;
  case BLUE:
   screen.setBackgroundColor(Color.BLUE);
   break;
  case YELLOW:
   screen.setBackgroundColor(Color.YELLOW);
   break;
  case GREEN:
   screen.setBackgroundColor(Color.GREEN);
   break;

  default:
   break;
  }
     return super.onOptionsItemSelected(item);
    }
}
This is the main Activity class where I have created Menu. Method onCreateMenu will add Manu to your application.

public boolean onCreateOptionsMenu(Menu menu) 
{
     getMenuInflater().inflate(R.menu.activity_menu_demo, menu);
        
     SubMenu sm = menu.addSubMenu("Color");
        
     sm.add(COLOR, RED, 0, "Red");
     sm.add(COLOR, BLUE, 1, "Blue");
     sm.add(COLOR, GREEN, 2, "Green");
     sm.add(COLOR, YELLOW, 3, "Yellow");
     return true;
}

SubMenu sm = menu.addSubMenu("Color") will create a Menu in which we can add some more Menu as SubMenu. sm.dd(int groupID, int itemID, int order, CharSequence title) will add an item to Menu sm.
First argument is group id that is item should be part of. This can be define group of items for batch state changes. You can set NONE if you don't want to put item as part of any group.
Second argument is item id which is unique. You can set NONE if you don't want to keep id for item.
Third argument is the order of the items you want to keep.
Fourth is the title of that Menu item.

This all will create a Menu named Color with SubMenu having four items as color names.

 public boolean onOptionsItemSelected(MenuItem item) {
        // TODO Auto-generated method stub
        switch (item.getItemId()) {
        case RED:
            screen.setBackgroundColor(Color.RED);
            break;
        case BLUE:
            screen.setBackgroundColor(Color.BLUE);
            break;
        case YELLOW:
            screen.setBackgroundColor(Color.YELLOW);
            break;
        case GREEN:
            screen.setBackgroundColor(Color.GREEN);
            break;

        default:
            break;
        }
        return super.onOptionsItemSelected(item);
    }

This method will execute on selection of item from the Menu.

onOptionsItemSelected(MenuItem item) is the method will execute on selection of Menu item and the item user have clicked, will pass to this method as parameter.

We can catch the id of that particular item as given below.
item.getItemId()

I have match id with all four ids I have created and in each case statement I have set the background color of the TextView as per item selected.

Thats it! You are done.

Screens:




   




No comments:

Post a Comment