How to set up a colors XML file

It is essential to have a colors XML file in every android project you create. To be used the same color multiple times and hardcode it is not good programming practise. It is easy to forget about one when you are a beginner.

I am going to step you through how to create one and link it up to your android page. To do so I am going to use the main page which we have already created in the previous guides.

1. Go to values Image

 

2. Right click on values > new > Values resource file

Image

3. A new dialog box should then show up enabling you to enter a name for the resource.  It should always be called colors.

Image

4. You will then be taken to you new XML page once you click OK. In there you can begin to declare the colors which you want to have.

You do not need to set up all of your colors at once these can be added to as you go along.

To declare a new color:

Image

The same format above should be used for all colors being used.

5. Once you have declared the color, you can now link it up to the app page.

To do so go to layout folder > main.xml

Image

6. I am going to change the background in this case. To change the color of text, backgrounds etc. You use the same aspect each time.

This can be done two ways:

 Locate the properties palette on the left hand side of the screen. The fifth resource down is background. Click on it.

Within the background box  select the three dots. This will then show another dialog box which will enable you to choose the color that we have just added.

Once you have click OK. You will then see that IntelliJ has added:

Image

The second way to do it is:

Click on Text at the bottom of the screen. You will then be shown the XML code for page.

You may find this hard to understand at the start if you have not done XML before.

At the top of the page you will see the RelativeLayout. This is where we want to add the background.

Take a new line under the last sentence you have and write:

Android:background =”@color/pink”

It should now look this this:

Image

 

Final Page:

 

Image

One thought on “How to set up a colors XML file

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s