Ever needed to change the color of your text in XML? Why waste time doing it line by line? In this tutorial, you will learn how to change text color in the most efficient way possible.
If you are a beginner and are looking for an introduction to coding, check out our FREE 30-minute course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes
To follow along with this example in Android Studio, go into Project view. Then go to app > res > layout, and open “activity_main.xml”. Also, in the “values” folder in “res”, select “colors.xml”. Once you have made your selections, you can close Project view.
In “activity_main.xml,” there are two modes:
1. Design Mode – In this mode, you can drag and drop things onto the screen .
2. Text Mode – Edit your code by typing.
We will be working inText Mode, but if you go to Design Mode and zoom in, you can see the words “Hello World!” on the screen. In this tutorial, you will learn how to change the color of this text.
Back in Text Mode, you can see the element <TextView, which represents the “Hello World!” text. To change the text color to a hue of #ABC123, for instance, type the following beneath android:text="Hello World!":
android:textColor="#ABC123"This method of changing text color is fine when there is only one line of text. However, if you have more elements and want all of the text in your application to be the same color, it is too tedious to write this hash code all over the application. Instead, you can store it by initializing a new color variable, and then reference its name.
To create a new color variable, go to your “colors.xml” tab, which we previously opened. Evidently, there are some color variables already, which are for the color team of our application. You can see previews of these on the left-hand side.
In the resources tag, create a new color called “colorText.” It will be the color for the text in our application. Use the same hash code we used in activity_main.xml: #ABC123.
We now have to reference our new color variable by the name we gave it (colorText.)
Go back to activity_main.xml. Replace #ABC123 with @color/colorText.
If you can’t remember what you named your color, press Control + space, whether you’re on a Mac or PC. You will see the color variables already declared. On the right, you will see a preview of the color, as well as its hash code.
To see if your changes have been applied to the text, go back to Design Mode. The color of “Hello World!” will have changed from gray to green. As you can see, storing your color in a variable allows you to change the color of text more quickly. You only need to edit the code in colors.xml rather than changing each hash code in your application one by one.
To learn more coding, sign up for our FREE 30-minute introduction course: training.mammothinteractive.com/p/learn-to-code-in-30-minutes.
