Task 4: Add Color Resources

Now, you’re going to learn how to add more resources, including strings and colors. This allows you to use the same values in multiple places, which makes it much easier to make updates.

To start, in the Project panel, open res > values > colors.xml. This brings you to the file holding all of the colors used in your project.

The file in the editor contains a number of colors, each with a name and a hex code. You can change these values here, and every color that uses this name will change too.

Add a new color resource called textBackground.

This color is purple. You’ll see a square appear to the left of the line, with the color you just added. Clicking this square brings up the color picker, which gives you a more intuitive interface to add color.
Additionally, clicking the Resource Manager on the far left allows you to add resources in one, unified interface, including strings, colors and drawables (images).

Go back to fragment_first.xml and look at the code for the layout. Add a new property to the TextView, called android:background and type @color. You should start to see the colors defined in colors.xml appear as a list. Choose one and notice how the background color of the TextView changes in the visual editor.
Look at the android:textColor property and change its value, maybe to white to contrast the purple background. Both values should now be edited.

Remember that each of the properties you’ve edited with the XML code editor can also be edited under the Attributes panel.

In fragment_first.xml, click the ConstraintLayout in the Component Tree. In the Attributes panel, search for the background property, and click the dropper in the field that appears. This brings up the color picker, but you should click resources in the header.
- You should see the colors in colors.xml, including the one you just added. You can choose one of these to be the background color, or define a custom color with the color picker.

Choose a new color for the background. You should see the background of the element containing the TextView and the Button change color.

Next, we are going to look at changing the width and height properties of views.

In the Component Tree of fragment_first.xml, right click the NestedScrollView element and click Convert View…. Change it to a CoordinatorLayout which will make it easier to adjust where the child elements are placed on the screen.

With ConstraintLayout selected, open the Layout section of the Attributes panel.
- Both the layout_width and layout_height attributes are set to match_parent, which means that these attributes will be the same as the element above them.
- The CoordinatorLayout element (which is the element above ConstraintLayout) has the same attributes set to match_parent as well. This means that its height and width will be set to the size of the screen.
- All views must have layout_width and layout_height properties.

Select the TextView. Its height and width are set to wrap_content, which means it will be just large enough to enclose its content, plus padding. Change these options to match_constraint, which tells the view to be as big as whatever it's constrained to.

You should see the text move to the upper left and the background, with whatever color you set it as, fill the entire screen, except for the button’s area.
The button and the TextView are on the same level in the Component Tree, meaning that they share the same space.

Set both width and height of the TextView back to wrap_content. In the next section, you’ll learn about adding views and constraints.