1
00:00:00,350 --> 00:00:03,970
The main pieces are in place, but
now we need to change some colors.

2
00:00:03,970 --> 00:00:07,696
Let's see how to set colors for
the background of the screen,

3
00:00:07,696 --> 00:00:11,005
as well as the text in our TextView and
button widgets.

4
00:00:11,005 --> 00:00:12,885
To change the whole background,

5
00:00:12,885 --> 00:00:17,123
we need to edit the container view
that's holding everything we see here.

6
00:00:17,123 --> 00:00:22,400
We added TextViews and a button, but
what exactly did we add them to?

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

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

9
00:00:31,260 --> 00:00:34,000
At the top is our RelativeLayout and

10
00:00:34,000 --> 00:00:38,080
it looks like that's where we added
our two text views and button.

11
00:00:38,080 --> 00:00:40,950
A RelativeLayout is what's
known as a ViewGroup,

12
00:00:40,950 --> 00:00:45,630
which as you might have guessed,
is used to group views together.

13
00:00:45,630 --> 00:00:49,670
it's just a special type of view
that can hold other views, and

14
00:00:49,670 --> 00:00:54,570
as it's name implies, a relative layout
is used when we want to place views

15
00:00:54,570 --> 00:00:58,500
relative to one another, or
relative to the edges of the layout.

16
00:00:59,702 --> 00:01:03,380
This RelativeLayout, is where we
want to change the background color.

17
00:01:03,380 --> 00:01:08,070
Lets make sure it's selected and
look for a property that could help us.

18
00:01:08,070 --> 00:01:09,680
Looking at the property pane,

19
00:01:09,680 --> 00:01:13,230
it looks like the background property
might be what we're looking for.

20
00:01:13,230 --> 00:01:15,580
Let's click into the background box and

21
00:01:15,580 --> 00:01:17,490
then click on these three
little dots over here.

22
00:01:18,990 --> 00:01:22,630
This gives us a dialogue where we
can choose a background resource.

23
00:01:23,850 --> 00:01:28,540
On the color tab,
we can pick from a list of code resources.

24
00:01:29,670 --> 00:01:34,670
Let's get started by selecting this
holo_blue_bright, and then hitting OK.

25
00:01:36,450 --> 00:01:40,270
And now, we have a nice,
bright blue screen.

26
00:01:40,270 --> 00:01:42,840
But what about the colors
from our mock-up?

27
00:01:42,840 --> 00:01:45,440
We want to match those exactly.

28
00:01:45,440 --> 00:01:48,510
The colors we'll be using come from
the Treehouse Topic colors that we

29
00:01:48,510 --> 00:01:49,270
find on the web.

30
00:01:50,360 --> 00:01:53,390
I've created this page to show
the difference topic colors and

31
00:01:53,390 --> 00:01:54,570
their hex codes.

32
00:01:54,570 --> 00:01:56,885
The link is in the teacher's notes below.

33
00:01:56,885 --> 00:01:59,820
We'll change the color for
each new fun fact, but

34
00:01:59,820 --> 00:02:02,370
we should also set a default color.

35
00:02:02,370 --> 00:02:06,510
For a default color,
let's select the Android green over here.

36
00:02:06,510 --> 00:02:10,260
I'll just select the text and
copy it with command or control C.

37
00:02:11,470 --> 00:02:13,560
Then let's go back to Android Studio.

38
00:02:13,560 --> 00:02:17,509
Click on the background property, and
paste in that blue for our color.

39
00:02:19,863 --> 00:02:22,620
Then, hit Enter, and there we go.

40
00:02:22,620 --> 00:02:26,160
Since we already have our color,
we can skip opening the dialogue.

41
00:02:27,450 --> 00:02:31,610
Now, don't worry if you've never
used hex colors like this before.

42
00:02:31,610 --> 00:02:34,600
It's just a different
way to represent colors.

43
00:02:34,600 --> 00:02:38,060
Now lets change the background
color of our button to white.

44
00:02:38,060 --> 00:02:40,618
Feel free to pause me if you
want to try it yourself first.

45
00:02:40,618 --> 00:02:43,870
Okay my turn.

46
00:02:43,870 --> 00:02:44,831
I'll click on the button.

47
00:02:46,650 --> 00:02:48,058
Find the background property.

48
00:02:49,825 --> 00:02:53,772
And then I open the dialogue
where I can choose a color.

49
00:02:53,772 --> 00:02:58,308
Then, on the color tab, we could either
create a new white color resource, or

50
00:02:58,308 --> 00:03:02,530
we could just scroll down a little and
use the white provided by Android.

51
00:03:03,670 --> 00:03:04,869
I'll choose the Android white.

52
00:03:06,803 --> 00:03:12,080
Let's also change the color of our text
and the fun facts text view to white.

53
00:03:12,080 --> 00:03:14,240
Start by selecting the text view.

54
00:03:14,240 --> 00:03:17,692
But this time,
instead of the background property,

55
00:03:17,692 --> 00:03:20,462
we want to change the text color property.

56
00:03:20,462 --> 00:03:25,720
Let's scroll down in the properties,
Until we see the text color property.

57
00:03:30,200 --> 00:03:33,141
Then let's click on the three
dots next to text color and

58
00:03:33,141 --> 00:03:35,593
let's pick the same white
from the color tab.

59
00:03:42,203 --> 00:03:46,286
Before we move on to the did you know text
view, let's go back to the mock-ups and

60
00:03:46,286 --> 00:03:48,440
take a closer look at it.

61
00:03:48,440 --> 00:03:53,463
Notice how it slightly changes color
based on the background color.

62
00:03:53,463 --> 00:03:57,502
This is achieved by using white
text that's semitransparent.

63
00:03:57,502 --> 00:04:00,311
It lets the background color
show through a little.

64
00:04:00,311 --> 00:04:03,239
Sudden the transparency is pretty simple,

65
00:04:03,239 --> 00:04:07,753
lets go back to android studio and
select the did you know text view.

66
00:04:07,753 --> 00:04:12,092
Then let's find the text color
property and click the three dots.

67
00:04:14,065 --> 00:04:19,820
But this time, instead of using the white
provided by Android, let's make our own.

68
00:04:19,820 --> 00:04:25,510
Let's click on the color tab and then
click add new resource on the upper right.

69
00:04:26,950 --> 00:04:32,480
Then let's pick new color value and
awesome, it's already set to white.

70
00:04:33,550 --> 00:04:38,480
So all we need to do is to change
the transparency or Alpha value.

71
00:04:38,480 --> 00:04:45,165
The Alpha value is represented over
here as A and then has a value of 255.

72
00:04:45,165 --> 00:04:49,320
It's also represented over here as ff.

73
00:04:50,460 --> 00:04:55,990
In fact, these two sections
represent exactly the same thing.

74
00:04:55,990 --> 00:05:02,858
The 255 value over here is the decimal
representation of the alpha value and

75
00:05:02,858 --> 00:05:08,493
the FF over here is that same
value represented in hexadecimal.

76
00:05:08,493 --> 00:05:11,150
Don't worry if this is
something unfamiliar to you.

77
00:05:11,150 --> 00:05:16,706
The main take away is that the alpha
value determines how transparent

78
00:05:16,706 --> 00:05:23,431
our color is and that a value of 255 or
ff means that it's not transparent at all.

79
00:05:23,431 --> 00:05:26,806
Let's change our alpha property to 128.

80
00:05:27,864 --> 00:05:31,871
This should make our text
about 50% transparent.

81
00:05:31,871 --> 00:05:36,119
Then let's click OK and take a look, And

82
00:05:36,119 --> 00:05:39,700
now we can see that our Did You Know
has a slightly greenish tint.

83
00:05:40,700 --> 00:05:42,900
Since our white text is
partially transparent,

84
00:05:42,900 --> 00:05:45,760
the green background is
able to show through.

85
00:05:45,760 --> 00:05:48,090
Let's take a short break and
then we'll finish our layout.