[MUSIC]

Hello everyone and thanks for tuning into this course on styles and themes.

In this course, we're going to image that our manager has tasked us with the job of

styling our app and ensuring it works on older versions of Android.

At first when we launched we wanted to be as quick to market as possible.

However, after taking a look at recent Android version distribution

our managers realized we can tackle another 20% of users if we target

Kit Kat as our minimum Android version rather than Lollipop.

First we'll look at a simple app we created to demonstrate some repeated

visuals.

We'll then attempt to extract some of the repetition to avoid duplicated code.

If you're like me,

your aim is to type as little as possible to achieve the desired effect.

In order to reduce that duplication, we'll introduce you to styles,

on how to create a style and apply to individual views in our layouts.

Once we've created a few styles, we'll learn about themes and

how to achieve backwards compatibility on Android to make our managers happy.

Let's have a look at the Dummy Music Player Application to see where we can

extract styles.

If you've taken the fantastic workshop by Ben Jakuben on animations and

transitions, this app should look familiar to you, these apps

share a lot of the same code with some of his removed to keep things simple.

If you haven't taken that workshop, I highly recommend it.

I'll link it in the teacher's notes so you don't even have to go find it yourself.

Styles.

One important thing to note is that just because two views use the same

attributes it doesn't mean they should share a style.

For example if you have a button and and an edit text then have the height and

width wrap the content does not mean they should share a style.

The useful analogue from a talk given by the wonderful of is this.

In Java code just because two variables share the same value doesn't mean you can

get rid of those values and just have the value they share as a single variable.

Think of styles as more of a way to reduce repetition in semantically similar views

such as a music player buttons or text on a settings screen.

I'll link that talk in the instructor notes as well,

as it is one of the best I've seen on the subject of styles and themes.

When you first open the app you'll see a list of album artwork.

Clicking on any art will bring up a list of songs for that given album.

Keep in mind this is fake data so every album will have the same songs but

the album art that was clicked will be displayed on the Detail page.

I just wanted to mention that so you don't worry that your app is broken.

Feel free to make this into a fully fledged music player, I just didn't for

the sake of simplicity for this course.

Right.

So after clicking on an album, we see a list of songs.

At the outset, the list of song appears to be a great spot to extract a style.

However, upon further analysis the style would be applied to a list item

which doesn't really provide as much benefit as it would only be applied once.

So we decided not to style these particular views.

Take note of the appearance of the artist and

album text at the top of this activity though.

We actually use this exact same style on the song playback activity, so

this is a great candidate for style extraction.

Again, always be considering the semantic similarities of the view's purpose when

deciding whether to share a style amongst the views.

Clicking a song will take us to the aforementioned playback activity.

Here, we note the playback controls.

They all appear to be the same size, have the same digital response to a click, and

certainly perform a similar action.

These buttons are perfect culprits for sharing a style.

The playback time and track length also will share a style.

Let's go to the last screen of this app and talk about where styles belong in it.

Looks like we'll use a style for the edit text, the switches, and the seat bars.

It may not be immediately obvious, but we'll actually apply a unique theme to

the settings activities instead of styling each of those views individually.

That will save a bunch of duplicated code and

also demonstrate where to use a theme instead of a style.

Now that we know what styles are, let's go ahead and create one in the next video.

If you'd like to follow along, the code is available in the teacher's notes.