Saturday, April 28, 2012

Action Bar with Tabs and Options Menu in Android

Action Bar

You can see the previous article Action Bar with Tabs to know about Action Bar. Here, we directly move on Options Menu.

Add Options Menu with Example

Step - 1: Create a xml file named main_menu.xml in /res/menu. If /menu directory is not available in /res, create it as /res/menu.
Step - 2: Display options for Date-Time and Share in Action Bar. Add below code in /res/menu/main_menu.xml.
        android:id = "@+id/time"
        android:title = "Time"
        android:icon = "@drawable/clock"
        android:id = "@+id/share"
        android:title = "Share"
        android:icon = "@drawable/share"
- Add below code to display menu.
        android:id = "@+id/defaultDialog"
        android:title = "Default Dialog"
        android:showAsAction = "never">
        android:id = "@+id/customDialog"
        android:title = "Custom Dialog"
        android:showAsAction = "never">
Step - 3 Create following classes to set tabs.
- Write a method to get tab name.
    public String getTabName() {
        return tabName;
- Write a method to get tab name, tab models and number of tabs respectively.
    public String getTabName() {
        return tabName;

    public TabModel getTabModels(int index) {
        return tabModels[index];

    public int getTabCount() {
        return tabModels.length;
- Wirte a method to add tab and their values.
    private static TabTitles[] tabTitles;

    public static void initTabTitles() {

        tabTitles = new TabTitles[] {

            new TabTitles("Android Platforms", new TabModel[] {
                    new TabModel("3.2"),
                    new TabModel("3.1"),
                    new TabModel("3.0"),
                    new TabModel("2.3.4"),
                    new TabModel("2.3.3"),
                    new TabModel("2.2"),
                    new TabModel("2.1"),
                    new TabModel("2.3"),
                    new TabModel("2.0"),
                    new TabModel("1.6"),
                    new TabModel("1.1")
            new TabTitles("Android Mobiles", new TabModel[] {
                    new TabModel("Samsung"),
                    new TabModel("HTC"),
                    new TabModel("LG"),
                    new TabModel("Motorola"),
                    new TabModel("Sony Ericsson"),
                    new TabModel("Acer"),
                    new TabModel("Micromax"),
Step - 4: Create custom_dialog.xml for displaying custom dialog and add below layout in it.
        android:text="This is an example of custom dialog."
        android:textSize = "20sp">
Step - 5: Apply the code to set tabs in Action Bar in
- Initialize the tabs.
- Add tabs in Action Bar
    ActionBar actionBar = getActionBar();                         
    for (int i = 0; i < Tabs.getCount(); i++) {                   
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);   // Do not forget to add this line, otherwise tabs won't displayed.
- Add Options Menu in Action Bar
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(, menu);
        return true;
- Derive below @Override method
    public boolean onOptionsItemSelected(MenuItem item) {
        int action = item.getItemId();
- Open dialog for menu option Share
    Intent sharingIntent = new Intent(Intent.ACTION_SEND);
    sharingIntent.putExtra(android.content.Intent.EXTRA_TEXT, Html
    startActivity(Intent.createChooser(sharingIntent, "Share using"));
- Open Default Dialog from menu
- Open Custom Dialog from menu
    AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
    LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.custom_dialog, null);

No comments:

Post a Comment