5.4.8. fragment_quiz.xml Layout

You’ll typically define a layout for each of your Fragments. For each Fragment layout, you’ll add a layout XML file to your app’s res/layout folder(s) and specify which Fragment class the layout is associated with. Note that you do not need to define a layout for this app’s SettingsFragment because its GUI is auto-generated by the inherited capabilities of class PreferenceFragment.

This section presents the QuizFragment’s layout (fragment_quiz.xml). You’ll define its layout file once in the app’s res/layout folder, because we use the same layout for the QuizFragment on all devices and device orientations. Figure 5.12 shows the QuizFragment’s GUI component names.

Fig. 5.12 | Flag Quiz GUI’s components labeled with their Id property values.

1. In the project’s res folder, right click the layout folder, then select New > Android XML File to display the New Android XML File dialog.

2. In the File field, enter fragment_quiz.xml.

3. In the Root Element section, select LinearLayout (Vertical) and click Finish to create the layout file.

4. Use the Graphical Layout editor and the Outline window to form the layout structure shown in Fig. 5.13. As you create the GUI components, set their Id properties. For the questionNumberTextView and guessCountryTextView, we used Medium Text components from the Palette’s Form Widgets section. For the Buttons, we used Small Button components, which use a smaller font size so that they can fit more text.

Fig. 5.13 | Outline window for fragment_quiz.xml.

5. Once you’ve completed Step 4, configure the GUI component properties with the values shown in Fig. 5.14. Setting flagImageView’s Height to 0dp and Weight to 1 enables this component to resize vertically to occupy any remaining space not used by the other GUI components. Similarly, setting each Button’s Width to 0dp and Weight to 1 enables the Buttons in a given LinearLayout to divide the horizontal space equally. The flagImageView’s Scale Type value fitCenter scales the image to fill either the ImageView’s width or height while maintaining the original image’s aspect ratio. Setting the ImageView’s Adjust View Bounds property to true indicates that the ImageView maintains the aspect ratio of its Drawable.

Fig. 5.14 | Property values for the GUI components in fragment_quiz.xml.