Task 5: Add Views and Contstraints

• Step 1: View constraint properties

  • Navigate to folders res >> layout >> fragment_first.xml

    • Go to section “<TextView” and look at the contrant properties

    • These define the position of the TextView, with these you can contain the top, bottom, left and right of a view to the same of other views

• ​

  • Go to “textview_first” in the component tree and then press “Attributes” in the right hand side of the panel, then press “constraint widget”​

    • The square in the middle represents the constraints of whatever is selected on the screen (in this example, the text on the device)

      • If you press on a portion and the lines that appear around it are squiggly, this is a special case which we will discuss a bit later

​

• Step 2: Add buttons and constrain their positions

  • Navigate to “Palette” which should be located in the top left hand corner of the Layout editor, when expanded, it could look like such

  • Navigate through the given options listed

  • Go to “Buttons”, the third one down, and drag it into the design view.

    • Button has been added to the Component Tree under ConstraintLayout

​

​

​

​

​

​

​

​

​

• Step 3: Add a constraint to the new button

  • Move the cursor over the circle at the top of the Button

  • Click and drag the circle at the top of the Button onto the circle at the bottom of the TextView.

  • The Button moves up to sit just below the TextView because the top of the button is now constrained to the bottom of the TextView.​

  • Examine the Constraint Widget in the Layout section of the Attributes panel, where you'll find various constraints for the Button, such as Top -> BottomOf textView. Viewing the XML code for the button reveals an attribute that binds the top of the button to the bottom of the TextView with the following line:

    • app:layout_constraintTop_toBottomOf="@+id/textview_first"

  • You might encounter a warning indicating that the button is "Not Horizontally Constrained". To address this, introduce a constraint that links the left side of the button to the left side of the screen. Additionally, ensure the button's bottom is anchored to the bottom of the screen to provide full vertical and horizontal stability in your layout design.

  • Rename button before creating the next one for clarity

    • Click on the current button

    • Look at “attributes” panel and notice the id field

    • Change the id from “button” to “toast_button”

​

​

​

​

​

• Step 4: Adjust the Next Button

  • You will adjust the button labeled Next, which Android Studio created for you when you created the project. The constraint between it and the TextView looks a little different, a wavy line instead of a jagged one, with no arrow. This indicates a chain, where the constraints link two or more objects to each other, instead of just one to another. For now, you'll delete the chained constraints and replace them with regular constraints.

    • In the design view or blueprint view, hold the Ctrl key (Command on a Mac) and move the cursor over the circle for the constraint until the circle highlights, then click the circle.

    • Or click on one of the constrained views, then right-click on the constraint and select Delete from the menu.

    • Or in the Attributes panel, move the cursor over the circle for the constraint until it shows an x, then click it.​

    • If you delete a constraint and want it back, either undo the action, or create a new constraint.

​

​

​

​

​

​

​

• Step 5: Delete the chain constraints

  • Click on the Next button, and then delete the constraint from the top of the button to the TextView.

  • Click on the TextView, and then delete the constraint from the bottom of the text to the Next button.

​

​

​

​

​

• Step 6: Add new constraints

  • Constrain the right side of the Next button to the right of the screen if it isn't already.

  • Delete the constraint on the left side of the Next button.

  • Now constrain the top and bottom of the Next button so that the top of the button is constrained to the bottom of the TextView and the bottom is constrained to the bottom of the screen. The right side of the button is constrained to the right side of the screen.

  • Also constrain the TextView to the bottom of the screen.

​

​

​

​

​

• Step 7: Extract 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 this, click the highlighted code. A light bulb appears on the left.​

  • Click the lightbulb. In the menu that pops up, 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.

  • Go to the res > values > strings.xml file. Notice that a new string resource has been added, named toast_button_text.

  • Run the app to make sure it displays as you expect it to.

    • You now know how to create new string resources by extracting them from existing field values. (You can also add new resources to the strings.xml file manually.) And you know how to change the id of a view.

​

​

​

​

​

​

​

​

​

​

​

​

​

​

• Step 8: Update the Next button

  • As you did for the Toast button, change the id of the Next button from button_first to random_button in the Attributes panel.

  • If you get a dialog box asking 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 9: Add a third button

  • Your final layout will have three buttons, vertically constrained the same, and evenly spaced from each other.

  • In fragment_first.xml, add another button to the layout, and drop it somewhere between the Toast button and the Random button, below the TextView.

  • Add vertical constraints the same as the other two buttons. Constrain the top of the third button to the bottom of TextView; constrain the bottom of the third button to the bottom of the screen.

  • Add horizontal constraints from the third button to the other buttons. Constrain the left side of the third button to the right side of the Toast button; constrain the right side of the third button to the left side of the Random button.

  • 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.

​

​

​

​

​

​

​

• Step 10: Get your UI ready for the next task

  • Change the text of the TextView to show 0 (the number zero).

  • Change the id of the last button you added, button2, to count_button in the Attributes panel in the design editor.

  • In the XML, extract the string resource to count_button_text and set the value to Count.

  • ​Run the app

​

​

​

​

​

​

​

​

• Step 11: Fix errors if necessary

  • The errors occur because the buttons have changed their id and now these constraints are referencing non-existent views.

  • If you have these errors, fix them by updating the id of the buttons in the constraints that are underlined in red.