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!Change transparency of colors by manipulating hex codes.
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 the colors for
the background of the screen
0:04
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:13
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 RlativeLayout, and
0:30
it looks like that's where we added
our two text views and button.
0:33
A relative layout is what's
known as a ViewGroup,
0:38
which as you might have guessed
is used to group views together.
0:41
It's just a special type of
view that can hold other views.
0:45
And as its 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:53
This relative layout is where we
want to change the background color.
0:58
Let's select it and look for
a property that could help us.
1:01
Yeah, here we go, background.
1:05
Let's click into the background box and
then click on these three dots.
1:08
This gives us a dialog where we
can choose a background resource.
1:15
On the color tab, we can pick
from a list of color resources.
1:19
Let's get started by selecting this
holo_blue_bright and then hitting OK.
1:23
And now,
we have a nice bright blue screen.
1:30
But what about the colors from our mockup?
1:33
We want to match those colors exactly.
1:35
The colors we'll be using come from
the treehouse type of colors that we
1:38
find on the web.
1:40
I've created this page to show
the different type of colors and
1:42
their hex codes.
1:45
The link is in the teacher's notes below.
1:46
We'll change the color for
each new fun fact, but
1:48
we should also set a default color.
1:51
For the default color,
let's select the Android green over here.
1:53
I'll just select the text and
copy it with command or control+c.
1:57
Then, let's go back to Android Studio,
click into the background property, and
2:02
paste in that value for
our color, command or control+v.
2:07
Then hit Enter, and there we go.
2:12
Since we already have our color,
we can skip opening the dialogue.
2:15
Now don't worry if you've never
used hex colors like this before.
2:18
It's just a different
way to represent colors.
2:22
Next, let's change the background
color of our button to white.
2:25
Feel free to pause me if you
want to try it yourself first.
2:28
Okay, my turn.
2:31
I'll click the button.
2:33
Find the background property.
2:36
And then open the dialogue
where I can choose a color.
2:39
From here, we can either create a new
white color resource, or on the color tab,
2:42
we can just scroll down a little and
use the white provided by Android.
2:48
I'll choose the Android white.
2:53
Let's also change the color of our text
in the fun fact text view to white.
2:58
Start by selecting text view.
3:02
But this time,
instead of the background property,
3:05
we want to change the text color property.
3:08
Let's scroll down in the properties
Until we find text color.
3:10
Then let's click on the three dots, and
3:17
let's pick that same
white from the color tab.
3:21
And hit OK.
3:24
Before we move on to the Did You Know text
view, let's go back to the mock-ups and
3:27
take a closer look at it.
3:30
Notice how the Did You Know text
view slightly changes color
3:32
based on the background color.
3:35
This is achieved by using white
text that's semi-transparent.
3:37
It lets the background color
show through a little.
3:41
Setting the transparency is pretty simple.
3:44
Let's go back to Android Studio and
select the Did You Know text view.
3:46
Then, let's find the text-color
property And click the three dots.
3:50
But this time, instead of using the white
provided by Android, let's make our own.
4:02
Let's click on the color tab and then
click Add New Resource on the upper right.
4:07
Then let's pick New Color Value, and
awesome, it's already set to white.
4:13
So all we need to change is
the transparency, or alpha value.
4:19
The alpha value is represented
over here by the letter A, and
4:23
it has a value of 255.
4:27
It's also represented over here as ff.
4:31
In fact, these two sections
represent exactly the same thing.
4:35
The 255 value over here is the decimal
representation of the alpha value,
4:39
and the ff over here is that same
value represented in hexadecimal.
4:44
Don't worry if this is
something unfamiliar to you.
4:49
The main takeaway is that the alpha value
determines how transparent our color is.
4:52
And that a value of 255 or
FF means that it's not transparent at all.
4:57
Let's change our alpha property to be 128.
5:04
This should make our text
about 50% transparent.
5:08
Then let's click OK, and take a look.
5:11
And now we can see that our Did You Know
has a slightly greenish tint.
5:15
Since our white text is
partially transparent,
5:18
the green background is
able to show through.
5:21
Let's take a short break, and
then we'll finish our layout.
5:23
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