Adding an Icon

GeoQuiz is now 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 here:

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

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

mdpi

medium-density screens (~160dpi)

hdpi

high-density screens (~240dpi)

xhdpi

extra-high-density screens (~320dpi)

xxhdpi

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

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

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 23.)

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 (select Project from the dropdown at the top of the project tools window, as shown in Figure 1.13 in Chapter 1). Expand the contents of GeoQuiz/app/src/main/res. You will see folders named mipmap-hdpi and mipmap-xhdpi, for example, as shown in Figure 2.10.

Figure 2.10  A distinct lack of drawable directories

Screenshot shows A distinct lack of drawable directories with GeoQuiz and app root folder.

Back in the solutions file, select and copy the four directories that you located earlier: drawable-hdpi, drawable-mdpi, drawable-xhdpi, and drawable-xxhdpi. In Android Studio, paste the copied directories into app/src/main/res. You should now have four density-qualified directories, each with an arrow_left.png and arrow_right.png file, as shown in Figure 2.11.

Figure 2.11  Arrow icons in GeoQuiz drawable directories

Screenshot shows A distinct lack of drawable directories with GeoQuiz and app root folders.

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

Figure 2.12  Summary of arrow icons in GeoQuiz drawable directories

Screenshot shows A distinct lack of drawable directories with app root folders.

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_quiz.xml and add two attributes to the Button widget definition.

Listing 2.12  Adding an icon to the NEXT button (activity_quiz.xml)

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

    <Button
        android:id="@+id/next_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next_button"
        android:drawableRight="@drawable/arrow_right"
        android:drawablePadding="4dp" />

</LinearLayout>

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.

GeoQuiz does, however, have a bug. While the app is running, press the NEXT button to show another question. Then rotate the device. If you are running on the emulator, click the rotate left or rotate right button in the floating toolbar to rotate (Figure 2.13).

Figure 2.13  Control the roll

Figure shows icons for clockwise and anticlockwise rotation.

After you rotate, you will see the first question again. How did this happen, and how can you fix it?

The answers to those questions have to do with the activity lifecycle, which is the topic of Chapter 3.

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

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