4. Flag Quiz App

As you’ll see, the app also allows you to control the quiz difficulty by specifying whether to display two, four, six or eight guess Buttons, and by choosing the world regions that should be included in the quiz. These options are displayed differently, based on the device that’s running the app and the orientation of the device—the app supports portrait orientation on any device, but landscape orientation only on tablets.

In portrait orientation, the app displays on the app bar a settings icon (). When the user touches this icon, the app displays a separate screen (another Activity) for setting the number of guess Buttons, and the world regions to use in the quiz. On a tablet in landscape orientation (Fig. 4.2), the app uses a different layout that always displays the app’s settings and the quiz at the same time.

First you’ll test-drive the app. Then we’ll overview the technologies we used to build it. Next, you’ll design the app’s GUI. Finally, we’ll present and walk through the app’s complete source code, discussing the app’s new features in more detail.

On a phone, a tablet or an AVD in portrait orientation, touch the settings icon () on the app bar (Fig. 4.1) to view the Settings screen (Fig. 4.3(a)). On a tablet device or tablet AVD in landscape orientation, the app’s settings appear at the left side of the screen (Fig. 4.2). Touch Number of Choices to display the dialog for selecting the number of Buttons that should be displayed with each flag (Fig. 4.3(b)). (On a tablet device or tablet AVD in landscape orientation, the entire app is grayed out and the dialog is centered on the screen.) By default, 4 is selected—we used this default setting. To make the quiz easier, you could select 2, or to make the quiz more challenging, you could select 6 or 8. Touch CANCEL (or touch the screen outside the dialog) to return to the Settings screen.

Next, touch Regions (Fig. 4.4(a)) to display the checkboxes representing the world regions (Fig. 4.4(b)). By default, all regions are enabled when the app first executes, so every flag we provide with the app can be selected randomly for a quiz. Touch the checkboxes next to Africa, Asia, Europe, Oceania (Australia, New Zealand and the islands in that vicinity) and South America to uncheck them—this excludes those regions’ countries from the quiz. Touch OK to save your settings. On a phone, a tablet or an AVD in portrait orientation, touch the back button () to return to the quiz screen and start a new quiz with your updated settings. On a tablet device or tablet AVD in landscape orientation, a new quiz with the updated settings is immediately displayed at the right side of the screen.

• First, a large-diameter circle shrinks onto the screen until its diameter is zero, thus hiding the current quiz question’s flag and guess Buttons.

• Then, the circle’s diameter grows from zero until the new question’s flag and guess Buttons are fully visible on the screen.

• disables the corresponding country name Button

• uses an animation to shake the flag horizontally and

• displays Incorrect! in red at the bottom of the screen (Fig. 4.6(b)).

Continue guessing until you get the correct answer for that flag.

The options menu is an object of class Menu (package android.view). You override Activity method onCreateOptionsMenu (Section 4.6.5) and use the method’s Menu argument to add the menu items—either programmatically or by inflating an XML document that describes the menu items. When the user selects a menu item, Activity method onOptionsItemSelected (Section 4.6.6) responds to the selection.

Class Fragment (package android.app) is the base class of all fragments. When using subclasses of AppCompatActivity with Fragments you must use the Android Support Library’s version of this class from package android.support.v4.app. The Flag Quiz app defines the following direct and indirect Fragment subclasses:

• Class MainActivityFragment (Section 4.7)—a direct subclass of Fragment—displays the quiz’s GUI and defines the quiz’s logic. Like an Activity, each Fragment has its own layout that’s typically defined as an XML layout resource file (GUIs also can be created dynamically). In Section 4.5.2, you’ll build MainActivityFragment’s GUI. You’ll create two layouts for MainActivity—one for devices in portrait orientation and one only for tablets in landscape orientation. You’ll then reuse the MainActivityFragment in both layouts.

• Class SettingsActivityFragment (Section 4.9) is a subclass of Preference-Fragment (package android.preference), which automatically maintains an app’s user preferences in a file associated with the app. As you’ll see, you create an XML file describing the user preferences, then class PreferenceFragment uses that file to build an appropriate preferences GUI (Figs. 4.3–4.4). We discuss preferences more in Section 4.3.5.

• When you finish a quiz, the app creates an anonymous subclass of DialogFragment (package android.support.v4.app) and displays an AlertDialog (introduced in Section 4.3.15) containing the quiz results (Section 4.7.10).

Fragments must be hosted by an Activity—they cannot execute independently. When this app runs in landscape orientation on a tablet, the MainActivity hosts all of the Fragments. In portrait orientation (on any device), the SettingsActivity (Section 4.8) hosts the SettingsActivityFragment and the MainActivity hosts the others.

• onCreate—This method (which you’ll override in class SettingsActivityFragment) is called when a Fragment is created. The MainActivityFragment and SettingsActivityFragment are created when the app inflates their parent activities’ layouts. The DialogFragment that displays the quiz results is created and displayed dynamically when the user completes a quiz.

• onCreateView—This method (which you’ll override in class MainActivityFragment) is called after onCreate to build and return a View containing the Fragment’s GUI. As you’ll see, this method receives a LayoutInflater, which you’ll use to programmatically inflate a Fragment’s GUI from the components specified in a predefined XML layout.

Fragments can add their own menu items to a host Activity’s menu. Like class Activity, Fragments also have lifecycle method onCreateOptionsMenu and event-handling method onOptionsItemSelected.

We’ll discuss other Fragment lifecycle methods as we encounter them throughout the book. For the complete lifecycle details, visit

For backward compatibility, subclasses of AppCompatActivity must use the Android Support Library’s version of FragmentManager from package android.support.v4.app, rather than the one in package android.app. Class AppCompatActivity inherits method getSupportFragmentManager from the Android Support Library’s FragmentActivity class to obtain the correct FragmentManager.

A PreferenceFragment uses Preference objects (package android.preference) to manage app settings and stores those settings in a file via a SharedPreferences object. This app uses Preference subclass ListPreference to manage the number of guess Buttons displayed for each flag and Preference subclass MultiSelectListPreference to manage the world regions to include in the quiz. A ListPreference creates mutually exclusive radio buttons in which only one can be selected (Fig. 4.3(b)). A MultiSelectListPreference creates a GUI containing checkboxes, any number of which can be selected (Fig. 4.4(b)). You’ll use a PreferenceManager object (package android.preference) to access and interact with the app’s default SharedPreferences file.

You’ll also interact directly with the app’s default SharedPreferences file:

• When starting a quiz, you’ll query the app’s preferences to determine the number of guess Buttons to display and the region(s) from which to select flags.

• When the user changes the regions preference, the app will ensure that at least one region is selected; otherwise, there would be no flags to include in the quiz. If none is selected, the app edits the regions preference to select North America.

To modify a SharedPreferences file’s contents, you’ll use a SharedPreferences.Editor object (Section 4.6.7).

1. We obtained the images from http://www.free-country-flags.com.

Unlike an app’s drawable folders, which require their image contents to be at the root level in each folder, the assets folder may contain files of any type and they can be organized in subfolders—we maintain the flag images for each region in a separate subfolder. Files in the assets subfolders are accessed via an AssetManager (package android.content.res), which can provide a list of all of the file names in a specified subfolder and can be used to access each asset.

For this app’s MainActivity, you’ll use minimum screen width and orientation qualifiers to determine which layout to use—one for portrait orientation on phones and tablets and another only for tablets in landscape orientation. To do this, you’ll define two layouts that present MainActivity’s contents:

• content_main.xml is the default layout that displays only the MainActivityFragment.

• content_main.xml (sw700dp-land) is used only on devices (i.e., tablets) when the app is in landscape (land) orientation.

Qualified resource folder names (on disk) have the format:

where qualifiers consists of one or more qualifiers separated by dashes (-). There are currently 19 qualifier types that you can use to designate when Android should choose specific resource files. We’ll explain other qualifiers as we use them throughout the book. For a complete description of all the res subfolder qualifiers and the rules for the order in which they must be defined in a fully qualified folder’s name, visit

• To indicate that the quiz will be reset after the user changes the app’s settings.

• To indicate that at least one region must be selected if the user deselects all regions—in this case, the app sets North America as the quiz’s default region.

In this app, when the user makes an incorrect guess, the app disables that guess Button, and when the user makes a correct guess, the app disables all the guess Buttons. In a disabled Button, the white text is difficult to read. To solve this issue you’ll define a color state list that specifies a Button’s text color, based on the Button’s enabled or disabled state (Section 4.4.8). For more information on color state lists, visit

AlertDialogs can display buttons, checkboxes, radio buttons and lists of items that the user can touch to respond to the dialog’s message. They can also display custom GUIs. A standard AlertDialog may have up to three buttons that represent:

• A negative action—Cancels the dialog’s specified action, often labeled with CANCEL or NO. This is the leftmost button when there are multiple buttons in the dialog.

• A positive action—Accepts the dialog’s specified action, often labeled with OK or YES. This is the rightmost button when there are multiple buttons in the dialog.

• A neutral action—This button indicates that the user does not want to cancel or accept the action specified by the dialog. For example, an app that asks the user to register to gain access to additional features might provide a REMIND ME LATER neutral button.

We use an AlertDialog at the end of a quiz to display the quiz results to the user (Section 4.7.10) and enable the user to touch a button to reset the quiz. You’ll implement the interface DialogInterface.OnClickListener (package android.content) to handle the button’s event. You can learn more about Android dialogs at

Android also supports implicit Intents for which you do not specify explicitly which component should handle the Intent. For example, you can create an Intent to display the contents of a URL and allow Android to launch the most appropriate activity (a web browser), based on the type of data. If multiple activities can handle the action and data passed to startActivity, the system will display a dialog in which the user can select the activity to use (possibly one of several browsers the user has installed). If the system cannot find an activity to handle the action, then method startActivity throws an ActivityNotFoundException. In general, it’s a good practice to handle this exception to prevent your app from crashing. You can also prevent this exception from happening by first using Intent method resolveActivity to determine whether there is an Activity to handle the Intent. For a more information on Intents, visit

This app uses the following Java SE 7 features:

• Type inference for generic instance creation—If the compiler can infer a generic object’s type from the context, you can replace <type> with <> when creating the object. For example, in the Flag Quiz’s MainActivityFragment code, the instance variable quizCountriesList is declared to be of type List<String>, so the compiler knows the collection must contain Strings. Thus, when we create the corresponding ArrayList object, we can use Java SE 7’s diamond operator <> as in the following statement, and the compiler infers that <> should be <String>, based on quizCountriesList’s declaration:

Click here to view code image

• The try-with-resources statement—Rather than declaring a resource, using it in a try block and closing it in a finally block, you can use the try-with-resources statement to declare the resource in the try block’s parentheses and use the resource in the try block. The resource is implicitly closed when program control leaves the try block. For example, in the Flag Quiz’s MainActivityFragment code, we use an InputStream to read the bytes of the app’s flag images and use them to create Drawables (Section 4.7.7):

Click here to view code image

We’ll cover various other aspects of the AndroidManifest.xml file in subsequent apps.

• Application name: Flag Quiz

• Company Domain: deitel.com (or specify your own domain name)

For the remaining steps in the Create New Project dialog, use the same settings as in Section 2.3, but this time in the Add an activity to Mobile step, select Blank Activity rather than Empty Activity and check the Use a Fragment checkbox. Keep the default names provided for the Activity Name, Layout Name, Title and Menu Resource Name, then click Finish to create the project. The IDE will create various Java and resource files, including

• a MainActivity class

• a Fragment subclass called MainActivityFragment that’s displayed by the MainActivity

• layout files for the MainActivity and MainActivityFragment, and

• a menu_main.xml file that defines MainActivity’s options menu.

Also, follow the steps in Section 2.5.2 to add an app icon to your project.

When the project opens in Android Studio, the IDE displays content_main.xml in the layout editor. Select Nexus 6 from the virtual-device drop-down list (Fig. 2.11)—once again, we’ll use this device as the basis for our design.

The default activity_main.xml layout embeds (via an <include> element in the XML) the GUI defined in content_main.xml. The default layout also contains a FloatingActionButton—a round image button from the Android Design Support Library that has a higher elevation than the GUI’s other components, so it “floats” over the GUI. A FloatingActionButton typically emphasizes an important action that the user can perform by touching the button. Each app based on the Blank Activity template includes a FloatingActionButton and other material design features. You’ll use FloatingActionButtons starting in Chapter 7.

1. Right click the project’s app folder and select Open Module Settings to open the Project Structure window.

2. Ensure that the Properties tab is selected at the top of the window.

3. In both the Source Compatibility and Target Compatibility drop-down lists, select 1.7, then click OK.

1. Right click the app folder in the Project window and select New > Folder > Assets Folder. In the Customize the Activity dialog that appears, click Finish.

2. Navigate to the folder on disk containing the book’s examples and copy all of the folders located in the images/FlagQuizImages folder.

3. Click the assets folder in the Project window, then paste the folders you copied in the preceding step. In the Copy dialog that appears, click OK to copy the folders and their images into your project.

1. In the Project window, expand the res/values node, then open strings.xml.

2. In the editor’s upper-right corner, click the Open Editor link to open the Translations Editor.

3. In the upper-left corner of the Translations Editor, click the Add Key button ().

4. In the dialog that appears, enter number_of_choices for the Key and Number of Choices for the Default Value, then click OK to create the new resource.

5. Repeat Step 4 for each of the remaining string resources listed in the table (Fig. 4.9).

Click here to view code image

the notation 1$ in %1$d indicates that the first value to insert in the String should replace the format specifier %1$d. Similarly, 2$ in %2$.02f indicates that the second value to insert in the String should replace the format specifier %2$.02f. The d in the first format specifier formats an integer and the f in the second one formats a floating-point number. In localized versions of strings.xml, the format specifiers %1$d and %2$.02f can be reordered as necessary to properly translate the String resource. The first value to insert will replace %1$d—regardless of where it appears in the format String—and the second value will replace %2$.02f regardless of where it appears in the format String.

• regions_list specifies the names of the world regions with their words separated by underscores—these values are used to load image file names from the appropriate folders and as the selected values for the world regions the user selects in the SettingsActivityFragment.

• regions_list_for_settings specifies the names of the world regions with their words separated by spaces—these values are used in the SettingsActivityFragment to display the region-name checkboxes to the user.

• guesses_list specifies the Strings 2, 4, 6 and 8—these values are used in the SettingsActivityFragment to display the radio buttons that enable the user to select the number of guess Buttons to display.

Figure 4.10 shows the names and element values for these three array resources.

To create arrays.xml and configure the array resources, perform the following steps:

1. In the project’s res folder, right click the values folder, then select New > Values resource file to display the New Resource File dialog. Because you right-clicked the values folder, the dialog is preconfigured to add a Values resource file in the values folder.

2. Specify arrays.xml in the File name field and click OK to create the file.

3. Android Studio does not provide a String resource editor for String arrays, so you’ll need to edit the XML to create the String array resources.

Each String-array resource has the following format:

Click here to view code image

Figure 4.11 shows the completed XML file.

Click here to view code image

Fig. 4.11 | arrays.xml defines String array resources used in the Flag Quiz app.

The Blank Activity app template already contains a colors.xml file that defines the theme’s primary, primary dark and accent color resources. Here you’ll add color resources for the correct and incorrect answers and modify the app’s accent color. To do so, you’ll edit the XML directly, rather than using the Theme Editor to modify theme colors, as you did in Section 3.5.

Open colors.xml (Fig. 4.12) from the project’s res/values folder and add lines 6 and 7. Also, change the hexadecimal value for the color named colorAccent (line 5) from #FF4081 (the default bright pink defined by the app template) to #448AFF (a lighter shade of blue than those used for colorPrimary and colorPrimaryDark). Notice in the IDE that the XML editor shows a color swatch to the left of each color.

Click here to view code image

Fig. 4.12 | colors.xml defines the app’s color resources.

1. Right click the project’s res folder, then select New > Andorid resource file to display the New Resource File dialog.

2. Specify button_text_color.xml as the File name.

3. In the Resource type drop-down, select Color. The Root element will automatically change to selector and the Directory name will automatically change to color.

4. Click OK to create the file. The button_text_color.xml file will be placed in a res/color folder, which the IDE automatically creates with the file.

5. Add the text shown in Fig. 4.13 to the file.

The <selector> element (lines 2–10) contains <item> elements that each specify a color for a particular Button state. In this color state list, we specify the android:state_enabled property in each <item>—once for the enabled state (true; lines 3–5) and once for the disabled state (false; lines 7–9). The android:color property (lines 4 and 8) specifies the color for that state.

Click here to view code image

Fig. 4.13 | button_text_color.xml defines a button’s text color for the enabled and disabled states.

1. Select File > New > Vector Asset to display the Vector Asset Studio—this tool enables you to add to your project any of Google’s recommended material design icons (https://www.google.com/design/icons/). Each icon is defined as a scalable vector graphic that smoothly scales to any size.

2. Click the Choose button, then in the dialog that appears, scroll to locate the () icon, select it and click OK. The IDE updates the Resource name automatically to match the selected icon—you can edit this name if you wish. Keep the other settings in the dialog as is.

3. Click Next, then Finish to add to the res/drawable folder the icon’s scalable representation—ic_settings_24dp.xml.

4. By default, each icon you add to the project in this manner is black, which would be difficult to see against the dark blue app bar background. To change this, open ic_settings_24dp.xml and change the <path> element’s android:fillColor attribute to white, as in

Click here to view code image

android:fillColor="@android:color/white"

Next, you’ll add the icon to menu_main.xml:

1. Open menu_main.xml in the editor—this file is located in the res/menu folder.

2. In the <item> element, add the following android:icon attribute (a preview of the icon appears in the gray margin to the left of the line):

Click here to view code image

3. You can force a menu item to display on the app bar, in which case it’s known as an action. By default, the action is displayed as the menu item’s icon (if there is one); otherwise, the menu item’s text is displayed. To force the menu item to appear as an action on the app bar, change the <item> element’s app:showAsAction attribute to

In the next chapter, you’ll see how to specify that menu items should be shown on the app bar only if there is room.

1. Right click the project’s res folder, then select New > Android resource file to open the New Resource file dialog.

2. In the File name field, enter incorrect_shake.xml.

3. In the Resource type drop-down, select Animation. The IDE changes the Root element to set and the Directory name to anim.

4. Click OK to create the file. The XML file opens immediately.

The IDE does not provide an editor for animations, so you must modify the XML contents of the file as shown in Fig. 4.14.

Click here to view code image

Fig. 4.14 | incorrect_shake.xml defines a flag animation that’s played when the user makes an incorrect guess.

In this example, we use View animations to create a shake effect that consists of three animations in an animation set (lines 3–14)—a collection of animations that make up a larger animation. Animation sets may contain any combination of tweened animations—alpha (transparency), scale (resize), translate (move) and rotate. Our shake animation consists of a series of three translate animations. A translate animation moves a View within its parent. Android also supports property animations in which you can animate any property of any object.

The first translate animation (lines 6–7) moves a View from a starting location to an ending position over a specified period of time. The android:fromXDelta attribute is the View’s offset when the animation starts and the android:toXDelta attribute is the View’s offset when the animation ends. These attributes can have

• absolute values (in pixels)

• a percentage of the animated View’s size

• a percentage of the animated View’s parent’s size.

For the android:fromXDelta attribute, we specified an absolute value of 0. For the android:toXDelta attribute, we specified the value -5%p, which indicates that the View should move to the left (due to the minus sign) by 5% of the parent’s width (the p indicates “percent”). To move by 5% of the View’s width, simply remove the p. The android:duration attribute specifies how long the animation lasts in milliseconds. So the animation in lines 6–7 will move the View to the left by 5% of its parent’s width in 100 milliseconds.

The second animation (lines 9–10) continues from where the first finished, moving the View from the -5%p offset to a %5p offset in 100 milliseconds. By default, animations in an animation set are applied simultaneously (i.e., in parallel), but you can use the android:startOffset attribute to specify the number of milliseconds into the future at which an animation should begin. This can be used to sequence the animations in a set. In this case, the second animation starts 100 milliseconds after the first. The third animation (lines 12–13) is the same as the second, but in the reverse direction, and it starts 200 milliseconds after the first animation.

1. Right click the project’s res folder, then select New > Android resource file to open the New Resource File dialog.

2. In the File name field enter the name preferences.xml.

3. In the Resource type drop-down list, select XML. The Root element will automatically change to PreferenceScreen, which represents a screen in which preferences are displayed. The Directory name will automatically change to xml.

4. Click OK to create the file. The preferences.xml file will be placed in the xml folder, which is created automatically.

5. If the IDE did not open res/xml/preferences.xml automatically, double click the file to open it.

You’ll now add two types of preferences to the file, a ListPreference and a MultiSelectListPreference. Each preference has properties that we explain in Fig. 4.15 for ListPreference and Fig. 4.16 for MultiSelectListPreference. To add the preferences and their properties to the file, you’ll need to edit the XML. Figure 4.17 shows the completed XML file.

Click here to view code image

Fig. 4.17 | preferences.xml defines the preferences displayed by the SettingsActivityFragment.

1. Right click the app folder and select New > Activity > Blank Activity to open the New Android Activity dialog.

2. In the Activity Name field, enter SettingsActivity. The Layout Name and Title will automatically update based on what you enter in the Activity Name field.

3. Specify Settings in the Title field to add a new String resource to strings.xml that will be displayed in the SettingsActivity’s app bar.

4. Check Use a Fragment which will create the SettingsActivityFragment class and its corresponding layout.

5. Select MainActivity as the Hierarchical Parent of the new SettingsActivity (use the ... button to the right of the drop-down list). This tells Android Studio to generate code that places in the activity’s app bar a button that the user can touch to return to the parent activity (i.e., MainActivity). This button is known as the up button.

6. Click Finish to create the new classes and layouts.

The IDE creates the layout files activity_settings.xml, content_settings.xml and fragment_settings.xml in the app’s res/layout folder, and the code files SettingsActivity.java and SettingsActivityFragment.java in the app’s Java package folder. Open the activity_settings.xml layout and delete the FloatingActionButton as you did in Section 4.4.2 for activity_main.xml.

The content_main.xml file defined by the IDE contains a <fragment> element as its root layout. At runtime, the MainActivityFragment’s GUI will fill the part of the screen occupied by this <fragment> element.

We work with multiple Fragments in this app’s code. To make the code more readable when obtaining references to these Fragments, we changed this <fragment> element’s id property. To do so:

1. Open content_main.xml in the Design tab.

2. In the Component Tree window select fragment—the default id created by the IDE.

3. In the Properties window, set the id to quizFragment.

4. Save content_main.xml.

Using the techniques you learned in Chapter 3, you’ll build the GUI in Fig. 4.18. Recall that it’s often easiest to select a particular GUI component in the Component Tree window. You’ll start with the basic layout and controls, then customize the controls’ properties to complete the design.

1. Open the fragment_main.xml file, and switch to the Text tab.

2. In the XML, change RelativeLayout to LinearLayout.

3. Switch back to the Design tab.

4. In the Component Tree select LinearLayout.

5. In the Properties window, set the LinearLayout’s orientation to vertical.

6. Ensure that layout:width and layout:height are set to match_parent.

7. Set the LinearLayout’s id to quizLinearLayout for programmatic access.

By default, the IDE set the layout’s Padding Left and Padding Right properties to a predefined dimension resource named @dimen/activity_horizontal_margin—located in the dimens.xml file of the project’s res/values folder. This resource’s value is 16dp, so there will be 16dp of padding on the layout’s left and right sides. The IDE created this resource when you created the app’s project. Similarly, the IDE sets the Padding Top and Padding Bottom properties to @dimen/activity_vertical_margin—another predefined dimension resource with the value 16dp. So there will be 16dp of padding above and below the layout. Thus, all of MainActivityFragment’s GUI will be inset 16dp from the rest of MainActivity’s GUI.

• layout:gravity center: horizontal—Centers the component horizontally within the layout.

• layout:margin: @dimen/spacing—Set this only for the bottom margin to add 8dp of space below this component. Create this dimension resource using the techniques you learned in Section 2.5.6.

• text: @string/question—To set this property, click the text property’s field, then click the ellipsis (...) button. In the Resources dialog’s Project tab (Fig. 4.19), select the question resource, then click OK.

• layout:width: match_parent

• layout:height: 0dp—This will let the View’s height be determined by the layout:weight property.

• layout:gravity center: both

• layout:margin bottom: @dimen/spacing—Adds 8dp of space below this component.

• layout:margin left and right: @dimen/activity_horizontal_margin—Adds 16dp of space to the left and right of this component, so the complete flag displays during the flag-shake animation that moves the flag left and right.

• layout:weight: 1—Setting the layout:weight of this component to 1 (the default is 0 for all components) makes the flagImageView more important than the other components in the quizLinearLayout. When Android lays out the components, they’ll use only the vertical space they need and the flagImageView will occupy all remaining vertical space. Setting flagImageView’s layout:height to 0dp is recommended by the IDE to help Android lay out the GUI faster at runtime.

• adjustViewBounds: true—Setting this property to true (by checking its checkbox) indicates that the ImageView maintains its image’s aspect ratio.

• contentDescription: @string/image_description

• scaleType: fitCenter—This indicates that the ImageView should scale the image to fill either the ImageView’s width or height while maintaining the original image’s aspect ratio. If the image’s width is less than the ImageView’s, the image is centered horizontally. Similarly, if the image’s height is less than the ImageView’s, the image is centered vertically.

• layout:gravity center: horizontal

• text: @string/guess_country

1. Drag a LinearLayout (Horizontal) from the Palette’s Layouts section to the quizLinearLayout in the Component Tree and set its id to row1LinearLayout and its layout:height to wrap_content.

2. Drag a Button from the Palette’s Widgets section onto the row1LinearLayout in the Component Tree. You do not need to set its id because the Buttons are not referenced by their ids in this app’s Java code.

3. Repeat Step 2 for the other Button in the first row.

4. Repeat Steps 1–3 for the three remaining LinearLayouts and set their ids to the values shown in Fig. 4.18 to create the last three rows of buttons.

• layout:gravity: Check bottom and set center to horizontal.

• gravity: center_horizontal—This centers the TextView’s text when it displays as two or more lines.

• textSize: @dimen/answer_size—This changes the text’s size to 36sp. Create this dimension resource using the techniques you learned in Section 2.5.6.

• textStyle: bold

This TextView’s text property will be set programmatically. At this point, the Component Tree window should appear as shown in Fig. 4.20.

• Setting each Button’s layout:width to 0dp and layout:weight to 1 enables the Buttons in a given LinearLayout to divide the horizontal space equally.

• Setting each Button’s layout:height to match_parent sets the Button’s height to the LinearLayout’s height.

• Setting each Button’s lines property to 2 ensures that all of the Buttons are the same height for country names that take up different numbers of lines—if a Button’s text is too long, any text that does not fit in two lines is simply truncated.

• Setting the style property to @android:style/Widget.Material.Button.Colored causes the Button to take on a colored appearance, based on the colors of the app’s theme. The Buttons’ color will be the app’s accent color, which you specified in Section 4.4.7. To set this property, click the ellipsis (...) to open the Resources dialog, then select Widget.Material.Button.Colored from the System tab and click OK.

• Setting the textColor property to the @color/button_text_color color state list you defined in Section 4.4.8 ensures that the text changes color based on each Button’s enabled/disabled states.

1. Right click the project’s res/layout folder, and select New > Layout resource file.

2. Enter content_main.xml in the File name field of the New Resource File dialog.

3. Ensure that LinearLayout is specified in the Root element field.

4. In the Available qualifiers list, select the Smallest Screen Width qualifier, then click the >> button to add the qualifier to the Chosen Qualifiers list and set its value to 700—the layout is meant for screens that are at least 700 pixels wide.

5. In the Available qualifiers list, select the Orientation qualifier, then click the >> button to add the qualifier to the Chosen Qualifiers list and set its value to Landscape.

6. Click OK.

This creates the new content_main.xml file, which is stored in a res subfolder named

indicating that the layout should be used only on a device with a minumum screen width (sw) of 700dp and only when the device is in landscape (land) orientation. Android uses the qualifiers sw and land to select appropriate resources at runtime.

In Android Studio, the Project window does not show the separate layout and layout-sw700dp-land folders that you’ll see if you explore the project’s folders on disk. Instead, it combines both layouts into a single node content_main.xml (2) node in the Project window’s res/layout folder—(2) indicates that there are two layouts in the node. Expanding this node shows

• content_main.xml and

• content_main.xml (sw700dp-land).

The layout without qualifiers in parentheses is the default layout. The one with qualifiers is used only if appropriate. After creating the file, Android Studio opens the layout in the layout editor. The Design view presents the layout in layout orientation.

1. Select LinearLayout (vertical) in the Component Tree window and set the orientation property to horizontal.

2. Click <fragment> in the Palette’s Custom section. In the Fragments dialog, select SettingsActivityFragment, and click OK. Then click the LinearLayout node in the Component Tree window. This adds the <fragment> to the layout. Set the id of the <fragment> to settingsActivityFragment.

3. Repeat the preceding step, but this time select MainActivityFragment. Also, set the id of this <fragment> to quizFragment.

4. Select the settingsActivityFragment node in the Component Tree window. Set layout:width to 0dp, layout:height to match_parent and layout:weight to 1.

5. Select the quizFragment node in the Component Tree window. Set layout:width to 0dp, layout:height to match_parent and layout:weight to 2. MainActivityFragment’s layout:weight is 2 and SettingsActivityFragment’s is 1, so the total of the weights is 3 and MainActivityFragment will occupy two-thirds of the layout’s horizontal space.

6. Switch to the Text tab and add the following two lines to the opening LinearLayout tag to ensure that the top of the layout appears below the app bar, rather than behind it:

Click here to view code image

Click here to view code image

Fig. 4.24 | MainActivity package statement and import statements.

Click here to view code image

Fig. 4.25 | MainActivity declaration and fields.

Click here to view code image

Fig. 4.26 | MainActivity overridden Activity method onCreate.

• The preferences’ Context (package android.content), which provides access to information about the environment in which the app is running and allows you to use various Android services—in this case, the Context is the Activity (this) for which you are setting the default preferences.

• The resource ID for the preferences XML file (R.xml.preferences) that you created in Section 4.4.11.

• A boolean indicating whether the default values should be reset each time method setDefaultValues is called—false indicates that the default preference values should be set only the first time this method is called.

Each time the user changes the app’s preferences, MainActivity should call MainActivityFragment’s methods updateGuessRows or updateRegions to reconfigure the quiz. MainActivity registers an OnSharedPreferenceChangedListener (lines 41–43) so that it will be notified each time a preference changes. PreferenceManager method getDefaultSharedPreferences returns a reference to the SharedPreferences object representing the app’s preferences, and SharedPreferences method registerOnSharedPreferenceChangeListener registers the listener (defined in Section 4.6.7).

• When the app first executes, onStart is called after onCreate. We use onStart in this case to ensure that the quiz is configured correctly based on the app’s default preferences when the app is installed and executes for the first time or based on the user’s updated preferences when the app is launched subsequently.

• When the app is running in portrait orientation and the user opens the SettingsActivity, the MainActivity is stopped while the SettingsActivity is displayed. When the user returns to the MainActivity, onStart is called again. We use onStart in this case to ensure that the quiz is reconfigured properly if the user made any preference changes.

In both cases, if preferencesChanged is true, onStart calls MainActivityFragment’s updateGuessRows (Section 4.7.4) and updateRegions (Section 4.7.5) methods to reconfigure the quiz. To get a reference to the MainActivityFragment so we can call its methods, lines 68–70 use inherited AppCompatActivity method getSupportFragmentManager to get the FragmentManager, then call its findFragmentById method. Next, lines 71–74 call MainActivityFragment’s updateGuessRows and updateRegions methods, passing the app’s SharedPreferences object as an argument so those methods can load the current preferences. Line 75 resets the quiz and line 76 sets preferencesChanged back to false.

Click here to view code image

Fig. 4.27 | MainActivity overridden Activity method onStart.

Click here to view code image

Fig. 4.28 | MainActivity overridden Activity method onCreateOptionsMenu.

Click here to view code image

Fig. 4.29 | MainActivity overridden Activity method onOptionsItemSelected.

Click here to view code image

Fig. 4.30 | Anonymous Inner class that implements OnSharedPreferenceChangeListener.

If the REGIONS preference changed, lines 122–123 get the Set<String> containing the enabled regions. SharedPreferences method getStringSet returns a Set<String> for the specified key. The quiz must have at least one region enabled, so if the Set<String> is not empty, lines 126–127 call the MainActivityFragment’s updateRegions and resetQuiz methods.

If the Set<String> is empty, lines 131–135 update the REGIONS preference with North America set as the default region. To obtain the default region’s name, line 133 calls Activity’s inherited method getString, which returns the String resource for the specified resource ID (R.string.default_region).

To change a SharedPreferences object’s contents, first call its edit method to obtain a SharedPreferences.Editor object (lines 131–132), which can add key–value pairs to, remove key–value pairs from, and modify the value associated with a particular key in a SharedPreferences file. Line 134 calls SharedPreferences.Editor method putStringSet to store the contents of regions (the Set<String>). Line 135 commits (saves) the changes by calling SharedPreferences.Editor method apply, which immediately makes the changes to the in-memory representation of the SharedPreferences, and asynchronously writes the changes to the file in the background. There is also a commit method that writes the writes the changes to the file synchronously (immediately).

Lines 137–139 use a Toast to indicate that the default region was set. Toast method makeText receives as arguments the Context on which the Toast is displayed, the message to display and the duration for which the Toast will be displayed. Toast method show dis-plays the Toast. Regardless of which preference changed, lines 143–145 display a Toast indicating that the quiz will be reset with the new preferences. Figure 4.31 shows the Toast that appears after the user changes the app’s preferences.