You’ll typically define a layout for each of your Fragment
s. 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.
To create fragment_quiz.xml
, perform the following steps:
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 Button
s, we used Small Button components, which use a smaller font size so that they can fit more text.
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 Button
s 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
.