1
00:00:00,660 --> 00:00:04,450
The main pieces are in place, but
now we need to change some colors.

2
00:00:04,450 --> 00:00:07,250
Let's see how to set the colors for
the background of the screen

3
00:00:07,250 --> 00:00:10,260
as well as the text in our TextView and
button widgets.

4
00:00:11,290 --> 00:00:13,000
To change the whole background,

5
00:00:13,000 --> 00:00:17,540
we need to edit the container view
that's holding everything we see here.

6
00:00:17,540 --> 00:00:22,750
We added TextViews and a Button, but
what exactly did we add them to?

7
00:00:22,750 --> 00:00:26,780
Let's go back to the design tab and
take a look down here

8
00:00:26,780 --> 00:00:30,600
at the component tree which shows
how all of our views are arranged.

9
00:00:30,600 --> 00:00:33,640
At the top is our RlativeLayout, and

10
00:00:33,640 --> 00:00:36,960
it looks like that's where we added
our two text views and button.

11
00:00:38,090 --> 00:00:41,000
A relative layout is what's
known as a ViewGroup,

12
00:00:41,000 --> 00:00:45,260
which as you might have guessed
is used to group views together.

13
00:00:45,260 --> 00:00:49,210
It's just a special type of
view that can hold other views.

14
00:00:49,210 --> 00:00:53,920
And as its name implies, a relative layout
is used when we want to place views

15
00:00:53,920 --> 00:00:57,380
relative to one another or
relative to the edges of the layout.

16
00:00:58,380 --> 00:01:01,900
This relative layout is where we
want to change the background color.

17
00:01:01,900 --> 00:01:05,625
Let's select it and look for
a property that could help us.

18
00:01:05,625 --> 00:01:08,590
Yeah, here we go, background.

19
00:01:08,590 --> 00:01:12,683
Let's click into the background box and
then click on these three dots.

20
00:01:15,024 --> 00:01:18,420
This gives us a dialog where we
can choose a background resource.

21
00:01:19,480 --> 00:01:22,940
On the color tab, we can pick
from a list of color resources.

22
00:01:23,950 --> 00:01:28,455
Let's get started by selecting this
holo_blue_bright and then hitting OK.

23
00:01:30,470 --> 00:01:33,640
And now,
we have a nice bright blue screen.

24
00:01:33,640 --> 00:01:35,070
But what about the colors from our mockup?

25
00:01:35,070 --> 00:01:38,150
We want to match those colors exactly.

26
00:01:38,150 --> 00:01:40,830
The colors we'll be using come from
the treehouse type of colors that we

27
00:01:40,830 --> 00:01:41,490
find on the web.

28
00:01:42,500 --> 00:01:45,410
I've created this page to show
the different type of colors and

29
00:01:45,410 --> 00:01:46,540
their hex codes.

30
00:01:46,540 --> 00:01:48,660
The link is in the teacher's notes below.

31
00:01:48,660 --> 00:01:51,460
We'll change the color for
each new fun fact, but

32
00:01:51,460 --> 00:01:53,860
we should also set a default color.

33
00:01:53,860 --> 00:01:57,810
For the default color,
let's select the Android green over here.

34
00:01:57,810 --> 00:02:01,315
I'll just select the text and
copy it with command or control+c.

35
00:02:02,810 --> 00:02:07,393
Then, let's go back to Android Studio,
click into the background property, and

36
00:02:07,393 --> 00:02:10,672
paste in that value for
our color, command or control+v.

37
00:02:12,356 --> 00:02:15,170
Then hit Enter, and there we go.

38
00:02:15,170 --> 00:02:18,650
Since we already have our color,
we can skip opening the dialogue.

39
00:02:18,650 --> 00:02:22,540
Now don't worry if you've never
used hex colors like this before.

40
00:02:22,540 --> 00:02:25,210
It's just a different
way to represent colors.

41
00:02:25,210 --> 00:02:28,910
Next, let's change the background
color of our button to white.

42
00:02:28,910 --> 00:02:31,368
Feel free to pause me if you
want to try it yourself first.

43
00:02:31,368 --> 00:02:33,710
Okay, my turn.

44
00:02:33,710 --> 00:02:34,773
I'll click the button.

45
00:02:36,489 --> 00:02:37,730
Find the background property.

46
00:02:39,070 --> 00:02:41,360
And then open the dialogue
where I can choose a color.

47
00:02:42,370 --> 00:02:48,640
From here, we can either create a new
white color resource, or on the color tab,

48
00:02:48,640 --> 00:02:53,880
we can just scroll down a little and
use the white provided by Android.

49
00:02:53,880 --> 00:02:55,278
I'll choose the Android white.

50
00:02:58,280 --> 00:03:02,360
Let's also change the color of our text
in the fun fact text view to white.

51
00:03:02,360 --> 00:03:03,840
Start by selecting text view.

52
00:03:05,410 --> 00:03:08,230
But this time,
instead of the background property,

53
00:03:08,230 --> 00:03:10,670
we want to change the text color property.

54
00:03:10,670 --> 00:03:15,880
Let's scroll down in the properties
Until we find text color.

55
00:03:17,990 --> 00:03:21,200
Then let's click on the three dots, and

56
00:03:21,200 --> 00:03:23,350
let's pick that same
white from the color tab.

57
00:03:24,930 --> 00:03:25,430
And hit OK.

58
00:03:27,100 --> 00:03:30,870
Before we move on to the Did You Know text
view, let's go back to the mock-ups and

59
00:03:30,870 --> 00:03:32,480
take a closer look at it.

60
00:03:32,480 --> 00:03:35,540
Notice how the Did You Know text
view slightly changes color

61
00:03:35,540 --> 00:03:37,580
based on the background color.

62
00:03:37,580 --> 00:03:41,500
This is achieved by using white
text that's semi-transparent.

63
00:03:41,500 --> 00:03:44,140
It lets the background color
show through a little.

64
00:03:44,140 --> 00:03:46,580
Setting the transparency is pretty simple.

65
00:03:46,580 --> 00:03:49,830
Let's go back to Android Studio and
select the Did You Know text view.

66
00:03:50,890 --> 00:04:00,400
Then, let's find the text-color
property And click the three dots.

67
00:04:02,030 --> 00:04:07,060
But this time, instead of using the white
provided by Android, let's make our own.

68
00:04:07,060 --> 00:04:12,190
Let's click on the color tab and then
click Add New Resource on the upper right.

69
00:04:13,370 --> 00:04:19,140
Then let's pick New Color Value, and
awesome, it's already set to white.

70
00:04:19,140 --> 00:04:23,280
So all we need to change is
the transparency, or alpha value.

71
00:04:23,280 --> 00:04:27,750
The alpha value is represented
over here by the letter A, and

72
00:04:27,750 --> 00:04:31,030
it has a value of 255.

73
00:04:31,030 --> 00:04:34,120
It's also represented over here as ff.

74
00:04:35,150 --> 00:04:39,560
In fact, these two sections
represent exactly the same thing.

75
00:04:39,560 --> 00:04:44,590
The 255 value over here is the decimal
representation of the alpha value,

76
00:04:44,590 --> 00:04:49,990
and the ff over here is that same
value represented in hexadecimal.

77
00:04:49,990 --> 00:04:52,370
Don't worry if this is
something unfamiliar to you.

78
00:04:52,370 --> 00:04:57,600
The main takeaway is that the alpha value
determines how transparent our color is.

79
00:04:57,600 --> 00:05:04,460
And that a value of 255 or
FF means that it's not transparent at all.

80
00:05:04,460 --> 00:05:08,029
Let's change our alpha property to be 128.

81
00:05:08,029 --> 00:05:11,520
This should make our text
about 50% transparent.

82
00:05:11,520 --> 00:05:13,450
Then let's click OK, and take a look.

83
00:05:15,310 --> 00:05:18,820
And now we can see that our Did You Know
has a slightly greenish tint.

84
00:05:18,820 --> 00:05:21,120
Since our white text is
partially transparent,

85
00:05:21,120 --> 00:05:23,790
the green background is
able to show through.

86
00:05:23,790 --> 00:05:26,110
Let's take a short break, and
then we'll finish our layout.