For the song's current time and duration,

I created a style called PlaybackTimeStyle and wrapped the height and width.

Then I gave it that nice light gray color, a size of 18sp and a normal typeface.

I'll apply this new style to the two text views in the playback controls layout in

the same exact manner as before.

Now the tricky part.

Styling this image view with the rounded corners looks easy on first inspection.

But applying an attribute for

a custom view in styles can potentially cause quite the headache.

In our layout XML, we normally prepend attributes for

custom views, in our case riv_corner_radius,

with the app namespace, which we specify at the top of our layout file.

However, when we move this custom attribute to a style,

the trick we need is to not include the custom name's face declaration at all.

I know this may seem counter intuitive, but let's create the style, apply it, and

then run the app to verify that it indeed works.

Whoops I spelled the,

obviously its not the rix_corner_radius its riv_corner_radius.

Let me go back into styles, fix that typo and we'll run the app one more time.

Awesome, it still works and now if we wanted,

we could reuse that style in other images that we wanted to have rounded corners.

As a bonus, I wanna show you a cool trick that Android Studio can do to make

refactoring our layouts through styles even easier.

If you have a view with a bunch of attributes, you can right click it,

then select Extract Style from the Extract menu, give it a name, and voila.

The IDE will automatically create the style without you having to think

about anything.

It won't pick up certain attributes, but we can add those in manually if we know,

for example, that we're only going to use this style in a constraint layout.

I'll demonstrate this process in the tool bar style from the settings activity so

you can see it in action.

As I mentioned, Android Studio won't automatically grab the layout constraint

attributes, so I'll add those in manually.

I'll use the ever-so-handy selection by columns to create three item opening and

closing tags for each respective layout attribute.

And then I'll use the same column selection by clicking Alt, and

dragging the mouse to select all three lines of the attributes.

Then I'll hold Alt + Shift and

click the right arrow to highlight the entire attribute name and cut them out.

Clicking and holding Alt again and

dragging to select all three columns of item tags,

I'll paste in the attributes and repeat the process for their given values.

That was a mouthful.

Please let me know if you have any questions about that and

we'll be sure to help you understand.

For more information about column selection, and text selection shortcuts in

Android Studio, based on IntelliJ, see the teachers notes.

Now that you've created your own style and learned a nice shortcut to easily create

them from your existing layouts, feel free to explore more of the styles I've created

for the app, and see if you can picture what they'll do.