1 00:00:00,460 --> 00:00:03,750 It's finally time to add colors to our app. 2 00:00:03,750 --> 00:00:07,289 Let's create a new class called ColorWheel, that stores our colors and 3 00:00:07,289 --> 00:00:08,820 picks new ones for us. 4 00:00:08,820 --> 00:00:11,080 It'll be very similar to our FactBook class. 5 00:00:12,180 --> 00:00:16,090 In the project name, let's right-click on the package name and 6 00:00:16,090 --> 00:00:18,230 select New > Kotlin File/Class. 7 00:00:19,620 --> 00:00:20,590 Let's name it ColorWheel. 8 00:00:22,200 --> 00:00:25,000 Make it a class instead of a file, and hit Enter. 9 00:00:26,430 --> 00:00:29,570 Now we're going to copy and past our code from our FactBook class and 10 00:00:29,570 --> 00:00:31,020 make a few key changes. 11 00:00:32,880 --> 00:00:35,336 Let's switch over to our FactBook class. 12 00:00:35,336 --> 00:00:38,097 Then let's select everything after the word, 13 00:00:38,097 --> 00:00:41,580 FactBook then use Cmd, or Ctrl+C to copy it. 14 00:00:41,580 --> 00:00:44,265 Then let's go back to the ColorWheel class, 15 00:00:44,265 --> 00:00:47,100 select everything after the word ColorWheel. 16 00:00:47,100 --> 00:00:49,860 Then use Cmd, or Ctrl+V to paste it back in. 17 00:00:52,280 --> 00:00:55,140 Android Studio then notices that we're missing an import. 18 00:00:55,140 --> 00:00:57,920 We didn't copy the import statement form our FactBook class, 19 00:00:57,920 --> 00:01:00,150 which means it didn't get pasted here. 20 00:01:00,150 --> 00:01:03,110 Hit OK to generate the import, and now we're good to go. 21 00:01:04,110 --> 00:01:07,280 Instead of facts, we'd like these to be colors. 22 00:01:07,280 --> 00:01:11,830 Let's start by refactoring facts to be named colors. 23 00:01:11,830 --> 00:01:16,480 Right click on facts, select Refactor > Rename. 24 00:01:16,480 --> 00:01:20,650 Note that the keyboard shortcut is Shift+F6, and 25 00:01:20,650 --> 00:01:23,540 then type colors and hit Enter. 26 00:01:24,680 --> 00:01:28,900 Now I'm going to copy and paste in some colors in the form of hexadecimal strings. 27 00:01:30,020 --> 00:01:34,030 Remember, the colors we want to use are the Treehouse topic colors from the web. 28 00:01:35,050 --> 00:01:37,470 Here's the color sheet we looked at before. 29 00:01:37,470 --> 00:01:39,570 There's a link in the teacher's notes below. 30 00:01:39,570 --> 00:01:43,520 If you want, you can come to this page and individually grab each code and 31 00:01:43,520 --> 00:01:44,960 create the array. 32 00:01:44,960 --> 00:01:48,680 But I'll copy and paste in the array from the teachers notes to save time. 33 00:01:48,680 --> 00:01:52,330 Okay, let's copy the array and then back in Android Studio, 34 00:01:52,330 --> 00:01:55,160 I'm going to put this last closing parenthesis on a new line. 35 00:01:55,160 --> 00:01:58,900 And then paste our colors array over our facts array. 36 00:01:59,940 --> 00:02:04,470 Now, that we've got all our colors, let's make a few changes to the getFact method. 37 00:02:04,470 --> 00:02:08,190 First off, we probably shouldn't call it getFact anymore. 38 00:02:08,190 --> 00:02:10,600 Let's change it to getColor. 39 00:02:10,600 --> 00:02:14,390 Since this method is never used, that's what this gray text is telling us, 40 00:02:14,390 --> 00:02:16,320 we don't need to bother with refactoring. 41 00:02:16,320 --> 00:02:17,818 We can just rename it the old-fashioned way. 42 00:02:20,794 --> 00:02:21,670 Great! 43 00:02:21,670 --> 00:02:25,347 Now the cool thing is we don't need to change anything about our randomNumber 44 00:02:25,347 --> 00:02:26,000 generator. 45 00:02:26,000 --> 00:02:27,700 We still use the random class and 46 00:02:27,700 --> 00:02:31,080 still pick a random number based on the length of the array up here. 47 00:02:32,330 --> 00:02:35,220 Though we should change the comment to say Randomly select a color. 48 00:02:37,570 --> 00:02:40,790 Now let's get back to FunFactsActivity. 49 00:02:40,790 --> 00:02:44,062 And the first thing we need to do is create a new ColorWheel object as 50 00:02:44,062 --> 00:02:47,050 a property, just like we did with FaceBook. 51 00:02:47,050 --> 00:02:51,272 Let's add a new line at the top below our FactBook and create a new private vowel 52 00:02:51,272 --> 00:02:56,140 named colorWheel. 53 00:02:56,140 --> 00:03:00,810 And set it equal to a new ColorWheel. 54 00:03:00,810 --> 00:03:02,800 Now down in our on click listener, 55 00:03:02,800 --> 00:03:05,480 we can pick a new color just like we did for the fact. 56 00:03:06,500 --> 00:03:12,341 Let's add a couple lines after we set our fact and 57 00:03:12,341 --> 00:03:18,630 then type val color = colorWheel.getColor(). 58 00:03:18,630 --> 00:03:21,290 Then let's use our new color variable as a parameter to 59 00:03:21,290 --> 00:03:22,827 this setBackgroundColor method. 60 00:03:24,630 --> 00:03:27,030 Which gives us an error. 61 00:03:27,030 --> 00:03:31,330 If we hover over it, we'll see the we're getting a type mismatch. 62 00:03:31,330 --> 00:03:34,316 The method expects an int, but we're giving it a string. 63 00:03:34,316 --> 00:03:37,300 So how are we gonna make this work? 64 00:03:37,300 --> 00:03:40,880 Well, don't worry, as usual there is this simple solution. 65 00:03:40,880 --> 00:03:43,830 We need to convert data like this a lot in programming. 66 00:03:43,830 --> 00:03:48,440 Remember programming is primarily about working with and manipulating data. 67 00:03:48,440 --> 00:03:52,000 Let's take a short break, and then in the next video, we'll fix this error.