Adding the amount and date inputs

In this next section, we'll finish building the description box by adding the amount and date fields. This will involve using some more complex constraints on the widgets you will be adding, as they will need to be positioned relative to each other. Follow these steps to finish the description box:

1. Drag another TextInputLayout into your design and place it somewhere below the Description field. This new box has no constraints as of yet.
2. In the Attributes panel, change the ID to amount_layout.
3. In the Attributes panel, open the resource editor for layout_width as you did to create the grid_spacer1 resource earlier.
4. Create a new resource named input_size_amount, and set its value as 100sp.

Much like dp, sp (scale-independent pixels) is a relative pixel size, but unlike density-independent pixels, scale-independent pixels are scaled according to the user's font preferences. Normally, these are used to specify font sizes, but they can also be useful when specifying fixed sizes for text input widgets.

1. Now, drag the right constraint handle to the right of the layout, and then drag the top constraint handle to the top of the layout, as shown:

1. Now, zero the margins using the constraint editor in the Attributes panel:

1. Now, use the Component Tree to select the description_layout TextInputLayout widget.

When selecting widgets directly in the design view, the editor will pick the deepest child of the Component Tree that you clicked on. This means that if you click on the Description field directly, you will select the TextInputEditText box, instead of the TextInputLayout. So, when dealing with the ConstraintLayout in particular, it's often better to select widgets in the Component Tree to ensure that you pick the right one.

1. In the layout view, drag the right constraint handle of the description TextInputLayout to meet up with the left constraint handle of the new amount_layout and TextInputLayout:

1. Click on the new TextInputEditText widget in the Component Tree panel.
2. In the Attributes panel, change the ID to amount.
3. Use the attribute editor to change the inputType to number.
4. For the hint attribute, open the resource editor to create a new string resource.
5. Name the resource as label_amount, and give it a value Amount:

1. Now, we'll add a label for the Date input field; in the Palette panel, open the Text section and drag a new TextView into the layout editor.
2. Using the constraint editor in the Attributes panel, add a constraint to the left and right, and then zero their margins.

1. Change the layout_width to match_constraint so that the label takes up all the available width:

The match_contstraint value available to the children of a ConstraintLayout is a special marker attribute that will cause the widget to fill the space made available by its constraints. This is similar to how the match_parent value will cause a widget to take up all the space made available by its parent.

1. Now, drag a new constraint from the top of the new TextView to the bottom of the Description TextInputLayout:

1. Use the resource editor to create a new string resource for the text attribute.

1. Name the new resource label_date, and make its value Date:

1. Still in the Attributes panel, change the textAppearance attribute to AppCompat.Caption. This is the same textAppearance style used by TextInputLayout for the hovering label when the cursor is focused on its EditText.
2. Now, use the resource selector on the textColor attribute to choose the colorAccent color resource. This is the highlight color that is generated by Android Studio for you, and is also used by TextInputLayout. Your TextView should now look like the focused label for a TextInputLayout, which is exactly what you want, because the next widget should look like an EditText, but isn't.
3. From the Palette panel, drag another TextView into the design layout.
4. Use the Attributes panel to change its ID to date.
5. Create left and right constraints, and set them to zero.
6. Change the layout_width to match_constraint so that the date TextView takes up all the horizontal space:

1. Drag the constraint handle from the top of the date TextView to the bottom of its TextView label:

1. At the top of the Attributes panel, use the View all attributes toggle button to view all the available attributes.
2. Using the Attributes search box, find the style attribute:

1. Open the resource selector for the style attribute.
2. Using the search box, find the AppCompat.EditText style:

1. Clear the search box, and toggle back to the View fewer attributes panel.
2. Clear the text attribute by deleting its content (this TextView should be empty in the layout file).
3. In the Component Tree, select the CardView.
4. In the Attributes panel, change its layout_height to wrap_content. The CardView will roll upward, taking up just enough space to contain the widgets that now make up the description, amount, and date inputs.

Unlike the description and amount input boxes, the date is actually made up of two labels that are styled so that together, they look like a focused TextInputLayout widget. This is important because the user will populate the date using a calendar dialog, rather than typing the date using a keyboard. A calendar dialog is more user-friendly, and less error-prone than manual date entry. Also, like this, the component looks familiar to the user, giving them a suggestion of how it should be used. This sort of styling capability is very important and useful in Android, and it's worth learning how standard components are composed together and styled so that you can build these sort of emulations.

Your completed Description, Amount, and Date, so the capture box should look like this in the Android Studio layout editor: