Defining the Problem

[MUSIC] 0:00 Hello everyone and thanks for tuning into this course on styles and themes. 0:04 In this course, we're going to image that our manager has tasked us with the job of 0:09 styling our app and ensuring it works on older versions of Android. 0:12 At first when we launched we wanted to be as quick to market as possible. 0:16 However, after taking a look at recent Android version distribution 0:19 our managers realized we can tackle another 20% of users if we target 0:23 Kit Kat as our minimum Android version rather than Lollipop. 0:26 First we'll look at a simple app we created to demonstrate some repeated 0:29 visuals. 0:33 We'll then attempt to extract some of the repetition to avoid duplicated code. 0:34 If you're like me, 0:37 your aim is to type as little as possible to achieve the desired effect. 0:38 In order to reduce that duplication, we'll introduce you to styles, 0:42 on how to create a style and apply to individual views in our layouts. 0:45 Once we've created a few styles, we'll learn about themes and 0:49 how to achieve backwards compatibility on Android to make our managers happy. 0:52 Let's have a look at the Dummy Music Player Application to see where we can 0:56 extract styles. 0:59 If you've taken the fantastic workshop by Ben Jakuben on animations and 1:00 transitions, this app should look familiar to you, these apps 1:04 share a lot of the same code with some of his removed to keep things simple. 1:07 If you haven't taken that workshop, I highly recommend it. 1:10 I'll link it in the teacher's notes so you don't even have to go find it yourself. 1:13 Styles. 1:16 One important thing to note is that just because two views use the same 1:17 attributes it doesn't mean they should share a style. 1:20 For example if you have a button and and an edit text then have the height and 1:23 width wrap the content does not mean they should share a style. 1:27 The useful analogue from a talk given by the wonderful of is this. 1:30 In Java code just because two variables share the same value doesn't mean you can 1:35 get rid of those values and just have the value they share as a single variable. 1:39 Think of styles as more of a way to reduce repetition in semantically similar views 1:43 such as a music player buttons or text on a settings screen. 1:47 I'll link that talk in the instructor notes as well, 1:50 as it is one of the best I've seen on the subject of styles and themes. 1:52 When you first open the app you'll see a list of album artwork. 1:55 Clicking on any art will bring up a list of songs for that given album. 1:59 Keep in mind this is fake data so every album will have the same songs but 2:02 the album art that was clicked will be displayed on the Detail page. 2:06 I just wanted to mention that so you don't worry that your app is broken. 2:09 Feel free to make this into a fully fledged music player, I just didn't for 2:13 the sake of simplicity for this course. 2:16 Right. 2:18 So after clicking on an album, we see a list of songs. 2:19 At the outset, the list of song appears to be a great spot to extract a style. 2:22 However, upon further analysis the style would be applied to a list item 2:26 which doesn't really provide as much benefit as it would only be applied once. 2:30 So we decided not to style these particular views. 2:34 Take note of the appearance of the artist and 2:37 album text at the top of this activity though. 2:39 We actually use this exact same style on the song playback activity, so 2:41 this is a great candidate for style extraction. 2:45 Again, always be considering the semantic similarities of the view's purpose when 2:47 deciding whether to share a style amongst the views. 2:51 Clicking a song will take us to the aforementioned playback activity. 2:54 Here, we note the playback controls. 2:58 They all appear to be the same size, have the same digital response to a click, and 3:00 certainly perform a similar action. 3:04 These buttons are perfect culprits for sharing a style. 3:06 The playback time and track length also will share a style. 3:09 Let's go to the last screen of this app and talk about where styles belong in it. 3:12 Looks like we'll use a style for the edit text, the switches, and the seat bars. 3:16 It may not be immediately obvious, but we'll actually apply a unique theme to 3:21 the settings activities instead of styling each of those views individually. 3:24 That will save a bunch of duplicated code and 3:28 also demonstrate where to use a theme instead of a style. 3:30 Now that we know what styles are, let's go ahead and create one in the next video. 3:33 If you'd like to follow along, the code is available in the teacher's notes. 3:37