Android Toolbars: 1 2 3 4 5 6
In the previous lesson, you added a menu item to your toolbar. In this lesson, you'll learn how to add an icon for a menu item.
Right-click the res > drawable folder in the Explorer area on the left of Android Studio. From the menu that appears, select New > Vector Asset:
When you click on Vector Asset, you'll see the Configure Vector Asset dialogue box appear:
Notice the highlighted button in the image above. Click this button to see lots of icons you can choose from:
Select an icon that reflects what your menu item will do. We've gone for a smiley-face for our favourites menu item:
Although the Size says 24dp by 24dp, you can change this. Select the Override checkbox and the size text boxes will activate. Type a new size for your icon. We'll leave ours on 24, though.
Click the Next button to see what folder your icon is going in to:
Now click the Finish button to add the image to your drawable folder.
You can now use this drawable as an icon for your toolbar.
With your favourites_page menu item still selected, click on the icon property. Click the Pick a Resource button again to bring up the Resources dialogue box. You should see your new icon there, in the drawable section:
Click OK and your properties area should look like this:
If you want to change the colour of a Vector Asset, double click the XML file in the drawable folder. You should see something like this:
A vector image is one built with paths. The path data connects series of points. Contrast this with a bitmap where images are built from a series of dots on a grid. So you can't change the path data without change the image. But you can change the fill colours.
For the smiley-face we've chosen the first two paths in the XML file are for the eyes. The third set of points are for the mouth and the circle. (There is no fill for the background.) You can change the hexadecimal values from #000000 to anything you like. Click the black colour squares in the margins to bring up a colour dialogue box. Select some new colour for your vector shape.
You're not quite ready to test it out, though, as the icon won't show until we add some code later.
Let's add two more menu items.
Try to do these two yourself.
Add a new menu item to your layout. Change the ID to web_page. Set the title for your web string resource via the Resources dialogue box. Set the showAsAction to ifRoom. Add a new Vector Asset to your drawable folder, choosing any icon you like. Set the icon property to your new drawable. Your Properties area might then look something like this:
And your layout might look like this:
Add a third menu item to your layout. Change the ID to settings. Set the title to your settings_page string resource via the Resources dialogue box. Set the showAsAction to never. Because this menu item will never appear on the toolbar, you don't need an icon. Your Properties area might then look something like this:
Your layout will look something like this one:
We'll add one more menu item - Share. Let's add this via XML.
Click on the Text tab at the bottom to see the XML:
Here's the XML for our menu:
Notice that for each menu item you've added in Design view, there is a corresponding item tag. All those properties you added got turned into the XML you see in the image above.
To add a share item, we can use something called a ShareActionProvider. This is a built-in class that you can add with XML. Copy and paste the following, just below the end </menu> tag:
The new XML is this line:
It starts with app:actionProviderClass. The ShareActionProvider is a widget from the v7 support library, which means that it should work on older devices. You don't need to add an icon because ShareActionProvider will insert one for you.
Click back on the Design tab and your layout should look like this:
Now that we have all our menu items in place, we can switch to the Java code. We'll start that in the next lesson below.