Step 3: Adding Views and Constraints

In this step you will update the existing button as well as add 2 more buttons.

1. Look at the Constraint Properties for the TextView. 

2. Choose textview_first from the Component Tree and view the Constraint Widget in Attributes.  Each of the grey dots represents a constraint. This can also be viewed in the Display tab.

3. Constrain the top of the Textview to the bottom of the screen by clicking on the bottom white circle around the TextView and dragging it to the bottom of the screen. 

1. Click on the Palette in the top left of the layout editor. Select Button, and drag and place it on top of the TextView, close to the other button. 

2. Click the bottom blue circle on the new Button and drag to connect it to the top of the TextView. This Button is now constrained to the top of the TextView.

3. The ConstraintWidget in the Layout pane of the Attributes panel should now show that the constraints for the Button include Bottom -> TopOf textView.

4. The XML code for the Button should now include the attribute that constrains the Button to the TextView.

5. If you see the warning, "Not Horizontally Constrained" add a constraint from the left side of the Button to the left side of the screen. Else ignore this step. 

6. Rename this Button by clicking on the Button, finding the id field in the Attributes panel and changing the id from button to toast_button. This is so we don't confuse all of the buttons that we add. If a pop up appears click refractor at the bottom.

7. Add constraints to your TextView that constrains it to both vertical sides of the screen.

1. in the design view / blueprint view hold either Ctrl (windows) or Command (Mac) and then click on the constraint you want to delete. 

2. Right click on the constraint and select Delete from the menu that pops up. 

3. In the Attributes panel, move the cursor over the circle of the constraint you want to delete and click it when an x appears.

1. Make sure the Next button is constrained to the right side of the screen If it isn't go ahead and constrain it. 

2. Delete the constraint on the left of the Next button

3. Now constrain the bottom of the Next button to the top of the TextView and constrain the top of the Next button to the top of the screen. 

1. In fragment_first.xml code view find the text property for the toast_button. 

2. Since the android:text part is directly coded into the text field instead of referencing a string resource like TextView does, it will cause problems if you have to translate the app to different languages.

3. Click on android:text="Button". A lightbulb should appears to the left. Click the lightbulb and select Extract string resource. 

4. Change the resource name to toast_button_text and the resource value to Toast in the dialog box that pops up. Click OK.

5. The value of android:text has now changed from "Button" to "@string/toast_button_text".

7. Go to res > values > dimens > strings.xml. A new string resource has been added called toast_button_text. 

1. Change the id of the Next button from button_first to random_button. You can do this by following the same process you did when changing the name of the Toast button to Toast. 

2. If a dialog box appears that asks to update all uses of the button click Yes. This will update all references to the button. 

3. In strings.xml (Project > Android > app > res > values > strings.xml) right click on the next string resource. 

4. Select Refractor > Rename and change the name to random_button_text.

5. Click Refractor to change the name of your string.

6. Update the value of the string from Next to Random.

1. In fragment_first.xml, add another button to the layout. Place it right above the TextView and between the Toast and Random button.

2. Just like the other 2 buttons, constraint the bottom of this new button to the top of the TextView and the top of the button to the top of the screen. 

3. Constrain the left of the new Button to the right side of the Toast button and the right side of the new Button to the left side of the Random button. 

4. If the toast button isn't already constrained to the top of the screen go ahead and do that 

1. Change the text in the TextView to show the number 0. 

2. Change the id of the new button from button2 to count_button. Set the value of this button to Count using String resources.

3. Run app

Errors You Might See

If you directly edit the XML you might see some errors.  

This error exists because you have changed the id of the buttons and now the constraints are now referencing non existent views. Fix this by updating the constraints that are underlined in red. 

There could also be a compile error if you do not correctly rename your buttons right. Ensure that in FirstFragment.java all references to button_first is changed to random_button.

You app should look something like this (colors might vary):