Android: Toolbar, Action Bar and Menu Items (including Spinner)

on
It's very easy to drag out a Toolbar when designing your interface but you can't just drop buttons into it. There is a more mystical way of construction to enter into. Toolbars hold a menu. The main toolbar that you see when you create an empty app is assigned Action Bar status in the onCreate method. 
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
You will also notice its menu being "inflated" later in the onCreateMenuOptionsMenu method. 
 getMenuInflater().inflate(R.menu.menu_main, menu);
The setting of the Toolbar as an Action Bar enables the following:
Once you set the toolbar as an activity's app bar, you have access to the various utility methods provided by the v7 appcompat support library's ActionBar class. This approach lets you do a number of useful things, like hide and show the app bar.

To use the ActionBar utility methods, call the activity's getSupportActionBar() method. This method returns a reference to an appcompat ActionBar object. Once you have that reference, you can call any of the ActionBar methods to adjust the app bar. For example, to hide the app bar, call ActionBar.hide(). (Use App Bar Utility Methods)
While the inflation adds the menu items from res/menu/menu_main.xml to the toolbar.

Adding a second toolbar

While you can freely add items to the primary toolbar, the question is how do we add toolbars and do all this for a secondary toolbar.

Step One: Create Your Menu

First create your menu and its items: 
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        tools:context="com.gylphi.anthonylevings.contextualmenuapp.MainActivity">
        <item
            android:id="@+id/bold"
            android:orderInCategory="200"
            android:title="B"
            app:showAsAction="always"/>
        <item
            android:id="@+id/italics"
            android:orderInCategory="300"
            android:title="I"
            app:showAsAction="always" />
        <item
            android:id="@+id/underline"
            android:orderInCategory="400"
            android:title="U"
            app:showAsAction="always" />
    <item
        android:id="@+id/spinner"
        android:orderInCategory="500"
        android:title="ActionBar Spinner"
        app:actionViewClass="android.widget.Spinner"
        android:background="#ff00"
        app:showAsAction="always" />
    </menu>
There are two types of item here. The first is a regular type of item with a simple title. The second has an Action View Class, which enables more sophisticated actions from the toolbar.

Handling the Simple Menu Items

After inflating our menu: 
Toolbar secondToolbar = (Toolbar) findViewById(R.id.toolbar2);
secondToolbar.inflateMenu(R.menu.formatting_toolbar);
We can handle the simple items in the following way: 
 secondToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_settings:
                        return true;
                    case R.id.bold:
                        Log.d("type", "bold");
                        return true;
                    case R.id.italics:
                        Log.d("type", "italics");
                        return true;
                    case R.id.underline:
                        Log.d("type", "underline");
                        return true;

                }
                return true;
            }

        });

Handling the Action View Class Item

The Spinner is accessed a little differently: 
 MenuItem itemM = secondToolbar.getMenu().findItem(R.id.spinner);
 Spinner spinner = (Spinner) itemM.getActionView();
It can then be set up with an Array Adapter: 
ArrayAdapter adapter = ArrayAdapter.createFromResource(this, R.array.font_sizes, android.R.layout.simple_spinner_dropdown_item);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
See previous post on XML and Android for more detail and the accompanying XML that is being accessed here.

Finally we can add a listener to the spinner. 
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

            @Override

            public void onItemSelected(AdapterView adapterView, View view, int i, long l) {

                Log.d("Select", "You chose " + adapterView.getSelectedItem().toString());
            }

            @Override
            public void onNothingSelected(AdapterView adapterView) {

            }
        });
And all should be working as expected.

Comments

Post a Comment