This course will be retired on June 1, 2025.

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

Styling More Views

4:38 with Strange Learning

In this video we'll cover my solution to styling the playback time, song duration, and rounded corner album artwork. Check out this video for the secret trick you need to use custom attributes in your styles!

Text Selection Shortcuts

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

    For the song's current time and duration, 0:00
    I created a style called PlaybackTimeStyle and wrapped the height and width. 0:02
    Then I gave it that nice light gray color, a size of 18sp and a normal typeface. 0:20
    I'll apply this new style to the two text views in the playback controls layout in 0:44
    the same exact manner as before. 0:48
    Now the tricky part. 1:22
    Styling this image view with the rounded corners looks easy on first inspection. 1:23
    But applying an attribute for 1:27
    a custom view in styles can potentially cause quite the headache. 1:29
    In our layout XML, we normally prepend attributes for 1:32
    custom views, in our case riv_corner_radius, 1:35
    with the app namespace, which we specify at the top of our layout file. 1:40
    However, when we move this custom attribute to a style, 1:44
    the trick we need is to not include the custom name's face declaration at all. 1:47
    I know this may seem counter intuitive, but let's create the style, apply it, and 1:54
    then run the app to verify that it indeed works. 1:58
    Whoops I spelled the, 2:33
    obviously its not the rix_corner_radius its riv_corner_radius. 2:35
    Let me go back into styles, fix that typo and we'll run the app one more time. 2:41
    Awesome, it still works and now if we wanted, 2:56
    we could reuse that style in other images that we wanted to have rounded corners. 2:59
    As a bonus, I wanna show you a cool trick that Android Studio can do to make 3:04
    refactoring our layouts through styles even easier. 3:07
    If you have a view with a bunch of attributes, you can right click it, 3:10
    then select Extract Style from the Extract menu, give it a name, and voila. 3:14
    The IDE will automatically create the style without you having to think 3:18
    about anything. 3:21
    It won't pick up certain attributes, but we can add those in manually if we know, 3:23
    for example, that we're only going to use this style in a constraint layout. 3:26
    I'll demonstrate this process in the tool bar style from the settings activity so 3:30
    you can see it in action. 3:33
    As I mentioned, Android Studio won't automatically grab the layout constraint 3:35
    attributes, so I'll add those in manually. 3:39
    I'll use the ever-so-handy selection by columns to create three item opening and 3:42
    closing tags for each respective layout attribute. 3:46
    And then I'll use the same column selection by clicking Alt, and 3:49
    dragging the mouse to select all three lines of the attributes. 3:52
    Then I'll hold Alt + Shift and 3:57
    click the right arrow to highlight the entire attribute name and cut them out. 3:58
    Clicking and holding Alt again and 4:04
    dragging to select all three columns of item tags, 4:05
    I'll paste in the attributes and repeat the process for their given values. 4:08
    That was a mouthful. 4:15
    Please let me know if you have any questions about that and 4:17
    we'll be sure to help you understand. 4:19
    For more information about column selection, and text selection shortcuts in 4:21
    Android Studio, based on IntelliJ, see the teachers notes. 4:25
    Now that you've created your own style and learned a nice shortcut to easily create 4:28
    them from your existing layouts, feel free to explore more of the styles I've created 4:31
    for the app, and see if you can picture what they'll do. 4: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