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.

    <item

        android:id = "@+id/time"

        android:title = "Time"

        android:icon = "@drawable/clock"

        android:showAsAction="ifRoom|withText">

    </item>

    <item

        android:id = "@+id/share"

        android:title = "Share"

        android:icon = "@drawable/share"

        android:showAsAction="ifRoom|withText">

    </item>

- Add below code to display menu.

    <item

        android:id = "@+id/defaultDialog"

        android:title = "Default Dialog"

        android:showAsAction = "never">

    </item>

    <item

        android:id = "@+id/customDialog"

        android:title = "Custom Dialog"

        android:showAsAction = "never">

    </item>

Step - 3 Create following classes to set tabs.

- TabModel.java: Write a method to get tab name.

    public String getTabName() {

        return tabName;

    }

- TabTitles.java: 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;

    }

- Tabs.java: 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.

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="This is an example of custom dialog."

        android:textStyle="bold"

        android:background="#343434"

        android:gravity="center"

        android:padding="50dp"

        android:textSize = "20sp">

    </TextView>

Step - 5: Apply the code to set tabs in Action Bar in ActionBarDemoActivity.java

- Initialize the tabs.

    Tabs.initTabTitles();

- Add tabs in Action Bar

    ActionBar actionBar = getActionBar();                         

    for (int i = 0; i < Tabs.getCount(); i++) {                   

        actionBar.addTab(actionBar.newTab().setText(              

                Tabs.getTab(i).getTabName()).setTabListener(this));

    }                                                             

    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);   // Do not forget to add this line, otherwise tabs won't displayed.

    actionBar.setDisplayShowHomeEnabled(true);                    

- Add Options Menu in Action Bar

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        MenuInflater inflater = getMenuInflater();

        inflater.inflate(R.menu.main_menu, menu);

        return true;

    }

- Derive below @Override method

    @Override

    public boolean onOptionsItemSelected(MenuItem item) {

        int action = item.getItemId();

- Open dialog for menu option Share

    Intent sharingIntent = new Intent(Intent.ACTION_SEND);

    sharingIntent.setType("text/html");

    sharingIntent.putExtra(android.content.Intent.EXTRA_TEXT, Html

            .fromHtml(""));

    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);

    builder.setCustomTitle(view);

    builder.show();