Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Adding More Colors

3:52 with Ben Deitch

Let's continue with adding additional colors as the background for each new fun fact. We'll add a new Java object to hold the colors and serve one up on each tap of the button!

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

Color codes (from the style guide)


val colors = arrayOf(
        "#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
)

Documentation

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

It's finally time to add colors to our app. 0:00

Let's create a new class called ColorWheel, that stores our colors and 0:03

picks new ones for us. 0:07

It'll be very similar to our FactBook class. 0:08

In the project name, let's right-click on the package name and 0:12

select New > Kotlin File/Class. 0:16

Let's name it ColorWheel. 0:19

Make it a class instead of a file, and hit Enter. 0:22

Now we're going to copy and past our code from our FactBook class and 0:26

make a few key changes. 0:29

Let's switch over to our FactBook class. 0:32

Then let's select everything after the word, 0:35

FactBook then use Cmd, or Ctrl+C to copy it. 0:38

Then let's go back to the ColorWheel class, 0:41

select everything after the word ColorWheel. 0:44

Then use Cmd, or Ctrl+V to paste it back in. 0:47

Android Studio then notices that we're missing an import. 0:52

We didn't copy the import statement form our FactBook class, 0:55

which means it didn't get pasted here. 0:57

Hit OK to generate the import, and now we're good to go. 1:00

Instead of facts, we'd like these to be colors. 1:04

Let's start by refactoring facts to be named colors. 1:07

Right click on facts, select Refactor > Rename. 1:11

Note that the keyboard shortcut is Shift+F6, and 1:16

then type colors and hit Enter. 1:20

Now I'm going to copy and paste in some colors in the form of hexadecimal strings. 1:24

Remember, the colors we want to use are the Treehouse topic colors from the web. 1:30

Here's the color sheet we looked at before. 1:35

There's a link in the teacher's notes below. 1:37

If you want, you can come to this page and individually grab each code and 1:39

create the array. 1:43

But I'll copy and paste in the array from the teachers notes to save time. 1:44

Okay, let's copy the array and then back in Android Studio, 1:48

I'm going to put this last closing parenthesis on a new line. 1:52

And then paste our colors array over our facts array. 1:55

Now, that we've got all our colors, let's make a few changes to the getFact method. 1:59

First off, we probably shouldn't call it getFact anymore. 2:04

Let's change it to getColor. 2:08

Since this method is never used, that's what this gray text is telling us, 2:10

we don't need to bother with refactoring. 2:14

We can just rename it the old-fashioned way. 2:16

Great! 2:20

Now the cool thing is we don't need to change anything about our randomNumber 2:21

generator. 2:25

We still use the random class and 2:26

still pick a random number based on the length of the array up here. 2:27

Though we should change the comment to say Randomly select a color. 2:32

Now let's get back to FunFactsActivity. 2:37

And the first thing we need to do is create a new ColorWheel object as 2:40

a property, just like we did with FaceBook. 2:44

Let's add a new line at the top below our FactBook and create a new private vowel 2:47

named colorWheel. 2:51

And set it equal to a new ColorWheel. 2:56

Now down in our on click listener, 3:00

we can pick a new color just like we did for the fact. 3:02

Let's add a couple lines after we set our fact and 3:06

then type val color = colorWheel.getColor(). 3:12

Then let's use our new color variable as a parameter to 3:18

this setBackgroundColor method. 3:21

Which gives us an error. 3:24

If we hover over it, we'll see the we're getting a type mismatch. 3:27

The method expects an int, but we're giving it a string. 3:31

So how are we gonna make this work? 3:34

Well, don't worry, as usual there is this simple solution. 3:37

We need to convert data like this a lot in programming. 3:40

Remember programming is primarily about working with and manipulating data. 3:43

Let's take a short break, and then in the next video, we'll fix this error. 3:48

You need to sign up for Treehouse in order to download course files.

Sign up

You need to sign up for Treehouse in order to set up Workspace

Sign up