The main pieces are in place, but now we need to change some colors.

Let's see how to set colors for the background of the screen,

as well as the text in our TextView and button widgets.

To change the whole background,

we need to edit the container view that's holding everything we see here.

We added TextViews and a button, but what exactly did we add them to?

Let's go back to the design tab and take a look down here

at the component tree which shows how all of our views are arranged.

At the top is our RelativeLayout and

it looks like that's where we added our two text views and button.

A RelativeLayout is what's known as a ViewGroup,

which as you might have guessed, is used to group views together.

it's just a special type of view that can hold other views, and

as it's name implies, a relative layout is used when we want to place views

relative to one another, or relative to the edges of the layout.

This RelativeLayout, is where we want to change the background color.

Lets make sure it's selected and look for a property that could help us.

Looking at the property pane,

it looks like the background property might be what we're looking for.

Let's click into the background box and

then click on these three little dots over here.

This gives us a dialogue where we can choose a background resource.

On the color tab, we can pick from a list of code resources.

Let's get started by selecting this holo_blue_bright, and then hitting OK.

And now, we have a nice, bright blue screen.

But what about the colors from our mock-up?

We want to match those exactly.

The colors we'll be using come from the Treehouse Topic colors that we

find on the web.

I've created this page to show the difference topic colors and

their hex codes.

The link is in the teacher's notes below.

We'll change the color for each new fun fact, but

we should also set a default color.

For a default color, let's select the Android green over here.

I'll just select the text and copy it with command or control C.

Then let's go back to Android Studio.

Click on the background property, and paste in that blue for our color.

Then, hit Enter, and there we go.

Since we already have our color, we can skip opening the dialogue.

Now, don't worry if you've never used hex colors like this before.

It's just a different way to represent colors.

Now lets change the background color of our button to white.

Feel free to pause me if you want to try it yourself first.

Okay my turn.

I'll click on the button.

Find the background property.

And then I open the dialogue where I can choose a color.

Then, on the color tab, we could either create a new white color resource, or

we could just scroll down a little and use the white provided by Android.

I'll choose the Android white.

Let's also change the color of our text and the fun facts text view to white.

Start by selecting the text view.

But this time, instead of the background property,

we want to change the text color property.

Let's scroll down in the properties, Until we see the text color property.

Then let's click on the three dots next to text color and

let's pick the same white from the color tab.

Before we move on to the did you know text view, let's go back to the mock-ups and

take a closer look at it.

Notice how it slightly changes color based on the background color.

This is achieved by using white text that's semitransparent.

It lets the background color show through a little.

Sudden the transparency is pretty simple,

lets go back to android studio and select the did you know text view.

Then let's find the text color property and click the three dots.

But this time, instead of using the white provided by Android, let's make our own.

Let's click on the color tab and then click add new resource on the upper right.

Then let's pick new color value and awesome, it's already set to white.

So all we need to do is to change the transparency or Alpha value.

The Alpha value is represented over here as A and then has a value of 255.

It's also represented over here as ff.

In fact, these two sections represent exactly the same thing.

The 255 value over here is the decimal representation of the alpha value and

the FF over here is that same value represented in hexadecimal.

Don't worry if this is something unfamiliar to you.

The main take away is that the alpha value determines how transparent

our color is and that a value of 255 or ff means that it's not transparent at all.

Let's change our alpha property to 128.

This should make our text about 50% transparent.

Then let's click OK and take a look, And

now we can see that our Did You Know has a slightly greenish tint.

Since our white text is partially transparent,

the green background is able to show through.

Let's take a short break and then we'll finish our layout.