Setting Colors

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