Defining the Problem3:40 with Michael Lustig
In this video we introduce you to the problem that styles and themes solve. We'll set up a small challenge from our hypothetical manager, and look into why you may want to style your app to look the same on older versions of Android. We will also introduce you to the project and show you what the final product will look like once we're done theming and styling.
[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
You need to sign up for Treehouse in order to download course files.Sign up