Creating the description box

Now that the base layout is set up, it's time to start adding the widgets to the user interface and make it useful. In this next stage, you'll be using several Material Design widgets that help produce great user interfaces, such as CardView and the TextInputLayout widget. Before Material Design, text input boxes were just plain EditText widgets, which while still available, are now generally discouraged in favor of a TextInputLayout. The TextInputLayout is a specialized layout that contains a single EditText widget for the user to enter text data. The TextInputLayout then also provides the floating hint/label effect and animations, transitioning the EditText widgets hint to a label space just above the input area. This means that even when the user has filled in the text, the hint for the EditText is still visible above their input:

You'll be wrapping this first group of widgets in a CardView, which will serve as a visual grouping for the user. Follow these steps to add the description input box:

1. Open the AppCompat section of the Widget Palette. This contains widgets that come from special APIs that are parts of the extended Android platform. They're not included on the platform by default, and instead, are included in each application they are used in, a bit like static linking a library.
2. Drag and drop a CardView into your user interface design; you can drop it anywhere on the design canvas. This will serve as the grouping for the description, amount, and date input boxes. Ensure that in the Component Tree, the CardView appears as a child of the LinearLayout (vertical):

1. A CardView stacks its widgets on top of each other in layers (back to front). This is not what's needed in this case, so you'll need to open the Layouts section of the Palette and drag a ConstraintLayout into the CardView on your design. Ensure that in the Component Tree, the ConstraintLayout appears as a child of the CardView.
2. Select the new ConstraintLayout in the Component Tree.

1. In the Attributes panel, select the View all attributes button:

1. Open the section titled Layout_Margin.
2. Click on the resource editor button for the all line, as shown in the screenshot:

1. In the resource editor, select the Add new resource button in the top-left, and choose New dimen value (dimen is short for dimension. A dimension resource can be used to specify sizes in non-pixel units, which are then converted according to the actual display system on the user's device).
2. Name the resource grid_spacer1, and give it a value of 8dp:

Material Design interfaces on Android use a spacing grid in an increment of 8dp, which is 8 density-independent pixels. This is a special unit of measurement that varies the actual number of pixels used based on the density of the screen. These are also the most common unit of on-screen measurement in Android. A 1dp measurement will be 1 physical pixel on a 160dpi screen, and scaled to 2 pixels on a 320dpi screen. This means that by measuring your layout in terms of density-independent pixels rather than physical pixels, your user interface will translate better over the range of screen densities it might encounter on various devices.

1. Click OK to create the dimension resource and go back to the layout editor.
2. Now, you'll need to start building up the input boxes for the user to fill in. The first of these will be the description box. Open the Design section of the Palette, and drag a TextInputLayout into the Component Tree as a child of the ConstraintLayout:

1. In the Attributes panel, click on the View fewer attributes button (it's the same one as View all attributes).
2. At the top of the Attributes panel, set the ID of the TextInputLayout to description_layout.
3. Use the Constraint editor (just below the ID attribute) to create connections to the left, and above the TextInputLayout by clicking on the blue circles with the + signs in them. Then, change the constrained margins to zero on both the new constraints, as shown:

1. Your TextInputLayout, now named description_layout, should have snapped to the top-left corner of the layout editor:

1. Change the layout_width attribute to match_constraint, and the layout_height parameter to wrap_content. The TextInputLayout will shrink to the minimum space it can occupy in the top-left corner.
2. Now, using the Component Tree, select the TextInputEditText inside the description_layout TextInputLayout.
3. In the Attributes panel, change the ID to description, since this is the field you actually want to capture the contents of.
4. Change the inputType to textCapWords; this will instruct software keyboards to place a capital letter at the beginning of each word:

1. The hint/label for the description box is currently hint, and it's hardcoded into the layout. We want to change it to Description, and make it localizable (so that it's easy to translate the app into new languages). Use the edit button to open the string resource editor, and choose Add new resource | New string value:

1. Fill in the Resource name as label_description. You'll notice that this follows another prefix rule, which helps when dealing with large numbers of string resources in your source code.
2. Fill in the Resource value as Description, and leave the remaining fields unchanged:

1. Click on OK to create the new string resource and go back to the layout editor.

In this section, you created a grouping component (the CardView) that will serve to visually group the description amount and date fields for the user, and you have populated it with its first component--the description box. You have also created a dimension resource that can be reused throughout your application to represent a single grid spacing unit, allowing you to adjust the size of the grid for the entire application. A consistent grid spacing in the application helps define a consistent look and feel for the application, and keeping this value as a resource provides you with a single place where you can change it if required.