Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Styles and Themes in Android

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating a Style

2:37 with Strange Learning

Let's dive right in and create our first style: the style for the Playback Buttons! We'll also see a cool shortcut in Android Studio for powerful editing. After the style has been created, we'll apply it and verify that we still have the same visual look and feel as before.

Documentation

Project Files

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

    The first style that I'll create is, in my opinion, the most obvious one. 0:00
    The style for our buttons on the song playback screen. 0:04
    Again, please let me reiterate, there isn't supposed to be any music playing. 0:07
    We simulate the song playback just to add some effect to the screen. 0:11
    Please don't think your app is broken if it doesn't play any music. 0:15
    The attributes that each playback button have in common are the height, width, and 0:18
    the drawable they use for 0:21
    the background to produce that cool ripple effect when you click them. 0:23
    Let's head on over to our styles.xml and 0:27
    create our first style called PlaybackButtonStyle. 0:29
    Within it, we'll set the height and width of any views applying that style to 64dp. 0:39
    To use that cool duplicate line shortcut in Android Studio, 0:50
    press Cmd+D in Mac, and Ctrl+D in Windows. 0:54
    We'll also set the Android background attribute to 0:59
    ?android:attr/selectableItemBackgroundBor- derless. 1:03
    Wow, that attribute name is a handful. 1:15
    Let's break down exactly what all those symbols mean. 1:18
    First, the question mark in the beginning. 1:20
    That question mark means that we want to access an attribute of the current theme, 1:23
    rather than some concrete values. 1:27
    Such as Android color black, which refers to a constant value. 1:28
    However, the attribute selectableItemBackgroundBorderless 1:33
    refers to whatever value that is set for the given theme. 1:36
    I hope that clears things up for you. 1:40
    I know at first it's a lot to parse. 1:41
    But once the things are broken down into individual pieces, 1:43
    they tend to make much more sense. 1:46
    Now that I've created the style for the playback buttons, 1:47
    I'll remove the attributes in XML, and 1:51
    replace them with the line style=@style/PlaybackButtonStyle. 1:53
    I always like to run the app just to make sure everything looks good, so 2:17
    I'll do that now. 2:20
    Great, the playback buttons still have that cool ripple effect when pressed, and 2:32
    they're still the right size. 2:35

    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