Adding Icons and Menu Items to an Android Toolbar

Android Toolbars: 1 2 3 4 5 6

You now need to add some icons to the toolbar you added in the previous lesson. There's also a thing called the Overflow Menu. This is for items that won't fit on the toolbar. You'll then typically see three dots. Press the dots and you see a sub menu appear. This sub menu is the Overflow Menu. Let's see how to do that.

Items that go on your toolbars come from a separate XML file that is placed in a menu folder. You then attach the XML file to your toolbar using Java code.

First, we'll need the menu folder.

In the Explorer area on the left of Android Studio, right-click the res folder. From the menu that appears, select New > Android resource directory:

Menu showing Android resource directory item

When you get the dialogue box up, select menu from the Resources type dropdown:

New Resource Directory dialogue box

The Directory name box at the top will then change to menu:

Creating a menu directory in Android Studio

Click OK to create a menu folder inside of your res directory:

Android Studio Explorer showing a menu directory

Now right click your new menu folder. From the menu that appears, select New > Menu resource file:

Menu showing resource file item

When you get the New Resource File dialogue box up, type menu_items as the file name:

Adding a file name for a menu resource file

Click OK to create a new XML file in your menu folder:

A new XML menu resource file

The XML file will open up in Design view in your main coding area. It should look like this:

The Menu Design layout in Android Studio

Have a look on the left, though, and notice the Palette and the Component Tree. You can drag items from the Palette onto either your Component Tree or directly onto your toolbar.

Drag a Menu Item from the Palette to your Component Tree or toolbar:

Dragging a menu item to a Toolbar

Your Component Tree will then look like this:

Component Tree showing a menu and a menu item

And your layout will look like this:

Android layout showing a Toolbar and a menu item

Notice that the layout is showing the three dots for the Overflow Menu, and a menu item with the default name of item.

With your new menu item selected, have a look at the properties area on the right:

Properties area for an Android Toolbar

We'll need IDs for the menu items. Type favourites_page as the ID. For the title, click the Pick a Resource button to the right of the title area. Then select the favourites string resource you set up:

Adding a string value via the Resources dialogue box

Click OK and your layout will update with your new title:

Menu item with title property changed

The title will appear only if a menu item is pushed to the Overflow Menu. It is pushed to the Overflow Menu if there is not enough room on the toolbar. But only if you have specified this in the showAsAction property. Click inside of this property to see the following box appear:

The showAsAction property of a menu item

Select the one for ifRoom. This means that the item will appear on the toolbar if there is room for it, otherwise it will get pushed to the Overflow Menu. The never means that it will never appear on the toolbar but always on the Overflow Menu; always means it will always appear on the toolbar; withText means that the title you add will always be displayed. (The collpaseActionView item is used with something called an Action Layout. We won't be using these.)

Your properties area should look like this, so far:

Toolbar properties set

You'll probably want an icon to appear for your toolbar items. Instead of designing one yourself, there are lots of inbuilt ones you can use. You add these to the drawable folder as a Vector asset. You'll learn how to do that in the next lesson below.