Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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!
Project Files
- Course files (zip download)
- End of stage 1 video 4 (GitHub repo)
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up