Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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!
Color codes (from the style guide)
#39add1 // light blue
#3079ab // dark blue
#c25975 // mauve
#e15258 // red
#f9845b // orange
#838cc7 // lavender
#7d669e // purple
#53bbb4 // aqua
#51b46d // green
#e0ab18 // mustard
#637a91 // dark gray
#f092b0 // pink
#b7c0c7 // light gray
Related Links
Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The main pieces are in place, but
now we need to change some colors.
0:00
Let's see how to set colors for
the background of the screen,
0:03
as well as the text in our TextView and
button widgets.
0:07
To change the whole background,
0:11
we need to edit the container view
that's holding everything we see here.
0:12
We added TextViews and a button, but
what exactly did we add them to?
0:17
Let's go back to the design tab and
take a look down here
0:22
at the component tree which shows
how all of our views are arranged.
0:26
At the top is our RelativeLayout and
0:31
it looks like that's where we added
our two text views and button.
0:34
A RelativeLayout is what's
known as a ViewGroup,
0:38
which as you might have guessed,
is used to group views together.
0:40
it's just a special type of view
that can hold other views, and
0:45
as it's name implies, a relative layout
is used when we want to place views
0:49
relative to one another, or
relative to the edges of the layout.
0:54
This RelativeLayout, is where we
want to change the background color.
0:59
Lets make sure it's selected and
look for a property that could help us.
1:03
Looking at the property pane,
1:08
it looks like the background property
might be what we're looking for.
1:09
Let's click into the background box and
1:13
then click on these three
little dots over here.
1:15
This gives us a dialogue where we
can choose a background resource.
1:18
On the color tab,
we can pick from a list of code resources.
1:23
Let's get started by selecting this
holo_blue_bright, and then hitting OK.
1:29
And now, we have a nice,
bright blue screen.
1:36
But what about the colors
from our mock-up?
1:40
We want to match those exactly.
1:42
The colors we'll be using come from
the Treehouse Topic colors that we
1:45
find on the web.
1:48
I've created this page to show
the difference topic colors and
1:50
their hex codes.
1:53
The link is in the teacher's notes below.
1:54
We'll change the color for
each new fun fact, but
1:56
we should also set a default color.
1:59
For a default color,
let's select the Android green over here.
2:02
I'll just select the text and
copy it with command or control C.
2:06
Then let's go back to Android Studio.
2:11
Click on the background property, and
paste in that blue for our color.
2:13
Then, hit Enter, and there we go.
2:19
Since we already have our color,
we can skip opening the dialogue.
2:22
Now, don't worry if you've never
used hex colors like this before.
2:27
It's just a different
way to represent colors.
2:31
Now lets change the background
color of our button to white.
2:34
Feel free to pause me if you
want to try it yourself first.
2:38
Okay my turn.
2:40
I'll click on the button.
2:43
Find the background property.
2:46
And then I open the dialogue
where I can choose a color.
2:49
Then, on the color tab, we could either
create a new white color resource, or
2:53
we could just scroll down a little and
use the white provided by Android.
2:58
I'll choose the Android white.
3:03
Let's also change the color of our text
and the fun facts text view to white.
3:06
Start by selecting the text view.
3:12
But this time,
instead of the background property,
3:14
we want to change the text color property.
3:17
Let's scroll down in the properties,
Until we see the text color property.
3:20
Then let's click on the three
dots next to text color and
3:30
let's pick the same white
from the color tab.
3:33
Before we move on to the did you know text
view, let's go back to the mock-ups and
3:42
take a closer look at it.
3:46
Notice how it slightly changes color
based on the background color.
3:48
This is achieved by using white
text that's semitransparent.
3:53
It lets the background color
show through a little.
3:57
Sudden the transparency is pretty simple,
4:00
lets go back to android studio and
select the did you know text view.
4:03
Then let's find the text color
property and click the three dots.
4:07
But this time, instead of using the white
provided by Android, let's make our own.
4:14
Let's click on the color tab and then
click add new resource on the upper right.
4:19
Then let's pick new color value and
awesome, it's already set to white.
4:26
So all we need to do is to change
the transparency or Alpha value.
4:33
The Alpha value is represented over
here as A and then has a value of 255.
4:38
It's also represented over here as ff.
4:45
In fact, these two sections
represent exactly the same thing.
4:50
The 255 value over here is the decimal
representation of the alpha value and
4:55
the FF over here is that same
value represented in hexadecimal.
5:02
Don't worry if this is
something unfamiliar to you.
5:08
The main take away is that the alpha
value determines how transparent
5:11
our color is and that a value of 255 or
ff means that it's not transparent at all.
5:16
Let's change our alpha property to 128.
5:23
This should make our text
about 50% transparent.
5:27
Then let's click OK and take a look, And
5:31
now we can see that our Did You Know
has a slightly greenish tint.
5:36
Since our white text is
partially transparent,
5:40
the green background is
able to show through.
5:42
Let's take a short break and
then we'll finish our layout.
5:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up