Setting Colors5:26 with Ben Deitch
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
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 up