Creating the category picker layout

Now, it's time to go back to the layout editor and start creating the category selector box with these icons:

1. Reopen the content_capture_claim.xml layout file from the res/layout directory.
2. In the Palette panel, open the AppCompat section and drag another CardView into the layout editor. Drop it below the CardView for the description, amount, and date input fields.
3. In the Attributes panel, use the View all attributes toggle button and search box to find the layout margin.
4. Open the Layout_Margins attribute group.
5. Then, open the resource selector for the top attribute.

1. Select the grid_spacer1 dimension resource you created earlier, and click on OK to close the resource selector:

1. Then, in the Palette, open the Layouts section and drag a LinearLayout (vertical) into the new CardView.
2. In the Attributes panel, use the resource selector to change the all margin attribute to grid_spacer1 to create some padding from the edges of the CardView.
3. Clear the Attributes panel search box.
4. Open the Containers section of the Palette, and drag a RadioGroup into the new LinearLayout in the layout editor. A RadioGroup is a specialized LinearLayout that handles the toggling of its child RadioButton widgets, which you'll use to allow the user to select a category.
5. In the Attributes panel, change the id attribute to categories.
6. In the Attributes panel, use the search box to find the orientation attribute and change it to horizontal.
7. Clear the Attributes panel search box, and toggle it back to View fewer attributes.
8. Open the Widgets section of the Palette and drag a RadioButton into the new RadioGroup.
9. In the Attributes panel, change the ID to accommodation.
10. Clear the layout_weight attribute.

1. Use the resource editor for the button attribute to select the ic_category_accommodation you created earlier:

1. Clear the text attribute, since these radio buttons won't have any labels.
2. You'll then use the contentDescription attribute to store the human readable name of the category. Open the resource editor, create a new string resource named description_accommodation, and give it a value of Accommodation.

The contentDescription attribute is part of the accessibility system, and it's used by screen readers and similar aids to describe a component that might not have a text label. In this case, it's a perfect place for us to grab the human-readable description of a category. It's not an on-screen space, and it also serves users with accessibility enabled.

1. Toggle the Attributes panel to view all the attributes, and then find the layout margins.
2. Use the resource selector to change the end margin attribute to grid_spacer1.
3. Repeat the process of adding and populating radio buttons for the categories, giving each of them a suitable name in their ID and contentDescription attributes. Leave the “other” category until last so that it appears to the right of all the others.
4. In the Component Tree panel, select the RadioGroup.
5. In the Attributes panel, change its layout_height to wrap_content.
6. From the Palette, open the Text section and drag a TextView into place below the RadioGroup.
7. In the Attributes panel, change the ID to selected_category.
8. Clear the text attribute.
9. Use the drop-down on the textAppearance attribute to select AppCompat.Medium.
10. In the Component Tree, select the CardView containing the category selection components.
11. Now in the Attributes panel, change the layout_height to wrap_content.

The CardView will wrap upward, packing in the radio buttons and the label that you will use to display the currently selected category name. The CardView, again, serves to visually group the categories, and helps the user understand how they use this area of the screen:

The use of standard styles and theming, again, helps the user to quickly grasp how things work; even though the categories are just a row of icons, they are underscored by the selected category name.