Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic 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!

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

  • 0:00

    It's finally time to add colors to our app.

  • 0:03

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

  • 0:07

    picks new ones for us.

  • 0:08

    It'll be very similar to our FactBook class.

  • 0:12

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

  • 0:16

    select New > Kotlin File/Class.

  • 0:19

    Let's name it ColorWheel.

  • 0:22

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

  • 0:26

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

  • 0:29

    make a few key changes.

  • 0:32

    Let's switch over to our FactBook class.

  • 0:35

    Then let's select everything after the word,

  • 0:38

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

  • 0:41

    Then let's go back to the ColorWheel class,

  • 0:44

    select everything after the word ColorWheel.

  • 0:47

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

  • 0:52

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

  • 0:55

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

  • 0:57

    which means it didn't get pasted here.

  • 1:00

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

  • 1:04

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

  • 1:07

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

  • 1:11

    Right click on facts, select Refactor > Rename.

  • 1:16

    Note that the keyboard shortcut is Shift+F6, and

  • 1:20

    then type colors and hit Enter.

  • 1:24

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

  • 1:30

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

  • 1:35

    Here's the color sheet we looked at before.

  • 1:37

    There's a link in the teacher's notes below.

  • 1:39

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

  • 1:43

    create the array.

  • 1:44

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

  • 1:48

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

  • 1:52

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

  • 1:55

    And then paste our colors array over our facts array.

  • 1:59

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

  • 2:04

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

  • 2:08

    Let's change it to getColor.

  • 2:10

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

  • 2:14

    we don't need to bother with refactoring.

  • 2:16

    We can just rename it the old-fashioned way.

  • 2:20

    Great!

  • 2:21

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

  • 2:25

    generator.

  • 2:26

    We still use the random class and

  • 2:27

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

  • 2:32

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

  • 2:37

    Now let's get back to FunFactsActivity.

  • 2:40

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

  • 2:44

    a property, just like we did with FaceBook.

  • 2:47

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

  • 2:51

    named colorWheel.

  • 2:56

    And set it equal to a new ColorWheel.

  • 3:00

    Now down in our on click listener,

  • 3:02

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

  • 3:06

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

  • 3:12

    then type val color = colorWheel.getColor().

  • 3:18

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

  • 3:21

    this setBackgroundColor method.

  • 3:24

    Which gives us an error.

  • 3:27

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

  • 3:31

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

  • 3:34

    So how are we gonna make this work?

  • 3:37

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

  • 3:40

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

  • 3:43

    Remember programming is primarily about working with and manipulating data.

  • 3:48

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

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

Sign up