Adding an Icon

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

You can find such an arrow in the solutions file for this book, which is a collection of Android Studio projects for each chapter of this book. The solutions are hosted at​solutions/​

Download the solutions file and open the 02_MVC/GeoQuiz/app/src/main/res directory. Within this directory, locate the drawable-hdpi, drawable-mdpi, drawable-xhdpi, drawable-xxhdpi, and drawable-xxxhdpi directories.

The suffixes on these directory names refer to the screen pixel density of a device:


medium-density screens (~160dpi)


high-density screens (~240dpi)


extra-high-density screens (~320dpi)


extra-extra-high-density screens (~480dpi)


extra-extra-extra-high-density screens (~640dpi)

(There are a few other density categories that are omitted from the solutions, including ldpi and tvdpi.)

Within each directory, you will find two image files – arrow_right.png and arrow_left.png. These files have been customized for the screen pixel density specified in the directory’s name.

You are going to include all the image files from the solutions in GeoQuiz. When the app runs, the OS will choose the best image file for the specific device running the app. Note that by duplicating the images multiple times, you increase the size of your application. In this case, this is not a problem because GeoQuiz is a simple app.

If an app runs on a device that has a screen density not included in any of the application’s screen density qualifiers, Android will automatically scale the available image to the appropriate size for the device. Thanks to this feature, it is not necessary to provide images for all of the pixel density buckets. To reduce the size of your application, you can focus on one or a few of the higher-resolution buckets and selectively optimize for lower resolutions when Android’s automatic scaling provides an image with artifacts on those lower-resolution devices.

(You will see alternatives to duplicating images at different densities, along with an explanation of the mipmap directory, in Chapter 22.)

Adding resources to a project

The next step is to add the image files to GeoQuiz’s resources.

Make sure the project tool window is displaying the Project view. Expand the contents of GeoQuiz/app/src/main/res, as shown in Figure 2.6. You will see that some folders, such as mipmap-hdpi and mipmap-xhdpi, already exist.

Figure 2.6  Exploring resources in Project view

Exploring resources in Project view

Back in the solutions files, select and copy the five directories that you located earlier: drawable-hdpi, drawable-mdpi, drawable-xhdpi, drawable-xxhdpi, and drawable-xxxhdpi. In Android Studio, click on the app/src/main/res directory in the project tool window and paste the copied directories. Click OK in the confirmation pop-up. You should now have five density-qualified drawable directories, each with an arrow_left.png and arrow_right.png file, as shown in Figure 2.7.

Figure 2.7  Arrow icons in GeoQuiz drawable directories

Arrow icons in GeoQuiz drawable directories

If you switch the project tool window back to the Android view, you will see the newly added drawable files summarized (as shown in Figure 2.8).

Figure 2.8  Summary of arrow icons in GeoQuiz drawable directories

Summary of arrow icons in GeoQuiz drawable directories

Including images in your app is as simple as that. Any .png, .jpg, or .gif file you add to a res/drawable folder will be automatically assigned a resource ID. (Note that filenames must be lowercase and have no spaces.)

These resource IDs are not qualified by screen density, so you do not need to determine the device’s screen density at runtime. All you have to do is use this resource ID in your code. When the app runs, the OS will determine the appropriate image to display on that particular device.

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.

Referencing resources in XML

You use resource IDs to reference resources in code. But you want to configure the NEXT button to display the arrow in the layout definition. How do you reference a resource from XML?

Answer: with a slightly different syntax. Open activity_main.xml and add two attributes to the Button widget definition.

Listing 2.11  Adding an icon to the NEXT button (res/layout/activity_main.xml)

<LinearLayout ... >
    <LinearLayout ... >

        android:drawablePadding="4dp" />


In an XML resource, you refer to another resource by its resource type and name. A reference to a string resource begins with @string/. A reference to a drawable resource begins with @drawable/.

You will learn more about naming resources and working in the res directory structure starting in Chapter 3.

Run GeoQuiz and admire your button’s new appearance. Then test it to make sure it still works as before.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.