Dynamically Changing the Background Color3:58 with Ben Deitch
The last thing we need to do is pick a new background color each time we display a new fact. Try it yourself, then watch this video for my explanation.
We're almost done. 0:00 The last thing we need to do is pick a new background color 0:01 each time we display a new fact. 0:04 Sounds simple enough, right? 0:07 If you're feeling adventurous, why don't you pause me and try it yourself. 0:08 Then come back and see how I do it. 0:12 Here are the steps you need to do. 0:15 Step one, declare a property with the data type of RelativeLayout? 0:17 And set it equal to null. 0:22 The format is just like our other view fields but 0:24 with a different name and data type. 0:26 Step two, set this property in the onCreate method just like the other views. 0:29 You may need to add an ID to the RelativeLayout in the layout file. 0:35 Step three, where we set a new fun fact, 0:39 call the setBackgroundColor method on this new variable. 0:42 Use Color.RED as the parameter. 0:46 All right, did you get it working? 0:51 Let's switch to FunFactsActivity and start from the top. 0:53 Declare a property with the data type of RelativeLayout? 0:56 Let's add a new line below our showFactButton declaration, 1:00 and type private var_relativeLayout: RelativeLayout? 1:07 And set it equal to null. 1:13 Okay, on to step two. 1:17 Set this property on the onCreate method. 1:19 Let's add a new line below where we initialized showFactButton. 1:22 And then type relativeLayout 1:26 = findViewById(R.id.). 1:32 And that's right, we haven't give our relativeLayout and ID yet. 1:38 If we had, we will be be able to see that ID in this list. 1:42 Let's open of our layout file. 1:46 So Project > res > layout > activity_fun_facts.xml. 1:48 Let me have the preview and inside this first RelativeLayout tab, 1:54 let's add an ID property. 1:59 Let's add a line after where we set the padding and 2:01 type android:id="@+id/relative " with a lower case r. 2:08 Remember, we could have also set the ID from the design tab by 2:19 selecting the RelativeLayout from the component tree and 2:22 then setting the ID on the property pane. 2:25 Looks good, let's go back to our activity and reference our new ID. 2:28 Let's hit Ctrl+Space, to bring back up auto complete. 2:34 And then select relativeLayout. 2:40 And finally, add the cast to relativeLayout. 2:42 So much for step two. 2:45 Next step, step three, where we set a new fun fact called the set 2:47 background color method on our new variable using Color.RED as the parameter. 2:51 This is referring to our onClick listener. 2:56 At the bottom, let's reference our new variable and 2:59 assert that it isn't null, relativeLayout!! 3:04 Then, using auto complete as our guide, let's add a dot and type sbc. 3:09 Just typing the first letter of each word and 3:15 a method is another way to let auto complete know what we're looking for. 3:17 Let's select the setBackgroundColor method and 3:22 it takes in an into color as the parameter. 3:25 For this example, we're just using a system color. 3:27 Inside the parenthesis, let's type the class name, Color with a capital C. 3:31 And hit Enter to import it and then add dot RED. 3:35 All right, let's give it a shot. 3:41 Now, when we first tap the button, 3:46 it should change the background color to red and it does, cool. 3:48 Let's pause for a moment and 3:52 then we'll make some changes to use a new color for each fact. 3:54
You need to sign up for Treehouse in order to download course files.Sign up