Adding Vector Assets in Android Studio

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:

Vector Assest menu in Android Studio

When you click on Vector Asset, you'll see the Configure Vector Asset dialogue box appear:

Android Studio Configure Vector Asset dialogue box

Notice the highlighted button in the image above. Click this button to see lots of icons you can choose from:

Vector icons

Select an icon that reflects what your menu item will do. We've gone for a smiley-face for our favourites menu item:

An icon selected as a Vector Asset

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:

The output directory for the icon

Now click the Finish button to add the image to your drawable folder.

A Vector Asset added to the drawable folder in Android Studio

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:

An icon asset chosen as a drawable

Click OK and your properties area should look like this:

Toolbar properties with an icon added

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:

The XML for a Vector Asset

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:

Properties area for a Toolbar menu item

And your layout might look like this:

Layout with two icons for Toolbar menu item

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:

Properties for a Settings menu item

Your layout will look something like this one:

Layout showing menu items on a Toolbar

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:

The Text View tab in the Android Studio designer

Here's the XML for our menu:

XML for Toolbar menu items

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:

<item

android:id="@+id/action_share"
android:title="@string/share_this"
app:actionProviderClass="android.support.v7.widget.ShareActionProvider"
app:showAsAction="ifRoom" />

The new XML is this line:

app:actionProviderClass="android.support.v7.widget.ShareActionProvider"

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:

A Share item added to the menu

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.