GeoQuiz is up and running, but the UI would be spiffier if the NEXT button also displayed a right-pointing arrow icon.

Since Android 5.0 (Lollipop, API level 21), the Android platform has provided support for vector graphics using the VectorDrawable class. Whenever possible, we recommend that you use vector drawables to display vector graphics in your apps. Vector drawables are scalable without any loss of visual quality, so they always look crisp and free of image artifacts. And they are more space efficient than traditional bitmap images, resulting in a smaller final application.

Add a vector drawable to the project for the right-pointing arrow icon. First, select File → New → Vector Asset from the menu bar to bring up the Asset Studio (Figure 2.6).

Figure 2.6  The Vector Asset Studio

You can import common file formats for vector graphics (SVG, PSD), but you are going to use an icon from Google’s Material icons library. They are free to use and licensed under Apache license 2.0.

For the Asset Type at the top of the Configure Vector Asset dialog, make sure the Clip Art radio button is selected. Then, click the button to the right of the Clip Art: label. The Select Icon window will pop up (Figure 2.7).

Figure 2.7  The Vector Asset Studio library

Search for “arrow right,” select the icon with that name, and click OK. The name that the Asset Studio generates for you on the configuration dialog is verbose; rename the asset arrow_right. Those are all the changes you need to make, so click Next, and then Finish on the following screen.

Now, expand the app/res/drawable folder in the project window and open up arrow_right.xml. Click the Split tab at the top of the editor to see the XML for your vector drawable on the left and its preview image on the right (Figure 2.8).

Figure 2.8  Your vectorized right arrow

You will learn more about how the Android resource system works starting in Chapter 3. For now, let’s put that right arrow to work.

<LinearLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    ...
    <LinearLayout ... >
        ...
    </LinearLayout>

    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next_button"
        app:icon="@drawable/arrow_right"
        app:iconGravity="end" />

</LinearLayout>