Task 6. Adding Views, Constraints, and Buttons

In this task, we will create two more buttons, update the preexisting button, and adjust the views/constraints of them.

What you'll learn:

• Adding new views to the layout.
• Constraining the position of a view to another view.

Step 1: Viewing Constraint Properties

• Let's start by looking at the constraint properties of TextView in fragment_first.xml in its xml code form.
  • They should look like this:

• Examine these properties. They define where in the layout this specific TextView is.
  • Note: You can constrain the top, bottom, left, and right of a view to another’s top, bottom, left, and right.

Let’s start editing this using the design layout in the editor.

• Select textview_first in the Component Tree and go to Attributes → Layout (extend it) → Constraint Widget.

Let’s examine the Constraint Widget.

• Square → Selected View
• Grey Dots → Top, Bottom, Left, and Right Constraints respectively
• Field next to each dot → Margin
• Vertical/Horizontal Scroll Bar → Vertical/Horizontal Bias

Ex. Choose textview_first as the selected view and see how it is constrained to its parent, ConstraintLayout.

Step 2: Adding buttons and Constraining their positions

We will create more buttons to learn how to use/connect constraints.

Let’s start by moving the Next button to below TextView.

• Remove the constraints of the Next button by right clicking the button in the design editor and choosing Clear Constraints of Selection.
  • Notice how all its constraints in the blueprint are now all hollow dots rather than filled blue ones.

Let’s examine the Constraint Widget.

• Square → Selected View
• Grey Dots → Top, Bottom, Left, and Right Constraints respectively
• Field next to each dot → Margin
• Vertical/Horizontal Scroll Bar → Vertical/Horizontal Bias

Ex. Choose textview_first as the selected view and see how it is constrained to its parent, ConstraintLayout.

• Note: The blueprint/design visually shows the constraints of the selected view. Some constraints are depicted as jagged lines but the one going towards the Next button is more of a squiggle. You will learn why in a bit.

Step 2: Adding buttons and Constraining their positions

We will create more buttons to learn how to use/connect constraints.

Let’s start by moving the Next button to below TextView.

• Remove the constraints of the Next button by right clicking the button in the design editor and choosing Clear Constraints of Selection.
  • Notice how all its constraints in the blueprint are now all hollow dots rather than filled blue ones.

• Remove the top constraint of the TextView by selecting it and deleting it (either by right-clicking it and selecting delete or pressing the delete button on your keyboard).
• You can now freely move the Next button to below the TextView by dragging it.
• Recreate the top constraint of the TextView by selecting its dot in the design editor and dragging it to the top edge of the layout.
  • This constrains the TextView top to the top of its parent.

• In the design editor drag the Next button down towards the middle towards the right side.

Let’s move on to creating two more buttons.

• Look at the Palette panel on the left of the design editor. This is where you’ll find the elements to add into the layout. Explore this and see what’s available.

• Select the Button element and drag it onto the layout in the design editor. Place it below the TextView to the left of the Next button.
• Repeat step 7 but place the button to the left of the other button you just made.

We will worry about lining the three buttons in a bit.

Step 3: Adding Constraints to the Buttons

We will now constrain the tops of the buttons to the bottom of the TextView. We will start quite similarly to how we constrained the top of the TextView to the top of its parent.

• Move your cursor to the top constraint (top hollow dot) of the Next button.

• Drag it to the bottom constraint (bottom dot) of the TextView.

• The Next button should move up to stick to the bottom of the TextView.

You should see that in the Constraint Widget, the constraints for the Next button should look like this:

• Look at the XML code for the Next Button. It should now include the attribute that constrains the top of the button to the bottom of the TextView.
• Going back to the design editor, set the margin of the top constraint of the Next button to 160dp in the Constraint Widget.
• You may see a warning, "Not Horizontally Constrained". To fix this, add a constraint from the right side of the button to the right side of the screen (margin of 32) and another one the left side to the right side of the middle button (margin of 20).

• Also add a constraint to constrain the bottom of the button to the bottom of the screen.

Before moving on, relabel the left and middle button so things are a little clearer about which button is which.

• Click on the left button in the design editor.
• Look at the Attributes panel on the right, and notice the id field.
• Change the id from button to toast_button.
• A window will pop up and ask if you want to refactor, press Refactor.
• Click on the middle button in the design editor.
• Look at the Attributes panel on the right, and notice the id field.
• Change the id from button to count_button.
• A window will pop up and ask if you want to refactor, press Refactor.
• Examine the XML code for fragment_first.xml. Do any of the buttons have the attribute app:layout_constraintVertical_bias? It's OK if you do not see that constraint.
• The "bias" constraints allows you to tweak the position of a view to be more on one side than the other when both sides are constrained in opposite directions. For example, if both the top and bottom sides of a view are constrained to the top and bottom of the screen, you can use a vertical bias to place the view more towards the top than the bottom.

You have now learned how to create buttons and edit their constraints.

Step 4: Extracting String Resources

• In the fragment_first.xml layout file, find the text property for the toast_button button.
  • Notice that the text "Button" is directly in the layout field, instead of referencing a string resource as the TextView does. This will make it harder to translate your app to other languages.
  • To fix it, you should be able to hover over the text like this:

• Select Extract string resource.
• In the dialog box that appears, change the resource name to toast_button_text and the resource value to Toast and click OK.

• Notice that the value of the android:text property has changed to @string/toast_button_text.
• Now got to res → value → string. Notice that a new string resource was also added.
• Repeat steps 1 through 3 for the count button. Set the value to Count.

Let’s run the app to make sure it is displayed correctly.

Congrats! You’ve learned how to create new string resources by extracting them from existing fields (you can also manually create them like you did with color resources). You also learned how to change its id view.

• Note: The id for a view helps you identify that view distinctly from other views. You'll use this later to find particular views using the findViewById() method in your Java code.

Step 5: Updating the Next Button

It’s finally time to make some changes to the Next button. Its new role will be to generate and display a random number.

• Same with the Toast and Count button, change the id of the Next button from button_first to random_button in the Attributes panel.
• If you get a pop-up that asks to update all usages of the button, click Yes. This will fix any other references to the button in the project code.

• In strings.xml, right-click on the next string resource.
• Select Refactor > Rename... and change the name to random_button_text.
• Click Refactor to rename your string and close the dialog.
• Change the value of the string from Next to Random.
• If you want, move random_button_text to below toast_button_text.

Step 6: Getting your UI ready for the next task

The next task requires us to make the button interactive. Let’s make sure the UI is ready so we don’t have to worry about it.

• Change the text of TextView to show 0 (number zero).
• Make sure the buttons have the right id and position on the screen.

• Run the app and make sure it is properly formatted like instructed.

Step 7: Fixing errors

If you edited the XML code directly, you might have run into some errors like these:

This is because the button ids being referenced (i.e. button and button2) were changed but any references to those weren’t. Thus, these constraints are reference non-existent views.

Update the ids to fix them. This is why we want to Refactor or make sure we keep track of what references an id that we want to change.

Another error you might run into is in the FirstFragment.java and this might show up as an error in your terminal.

To fix it, simply replace “buttonFirst” with “randomButton”.