Android App Themes

[treehouse™ presents] 0:00 [Quick Tips: Android App Themes with Ben Jakuben] 0:03 Hi, I'm Ben, 0:05 and in this Treehouse Quick Tip, we'll take a look 0:07 at how to apply styles and themes to our app. 0:09 If done correctly, 0:11 you can completely change how your app looks 0:13 with a simple theme change, much like 0:15 switching CSS files for web pages. 0:17 I created a sample activity that has a bunch of 0:19 widgets on it, so we can easily see how changing 0:22 themes affects the look of different UI elements. 0:24 The first thing we'll cover is the handy dandy 0:27 Theme Preview tool in the graphical layout editor. 0:30 Up at the top is a drop down 0:33 that currently says 'AppTheme.' 0:35 We can use this to preview different themes 0:37 in our activities. 0:39 The list is populated with default Android themes. 0:41 Switch to Holo, Theme.Holo, 0:44 and everything goes dark. 0:48 Now if I switch to Holo Light 0:50 everything goes back to the light theme. 0:55 The last 2 choices show the basic Android themes 0:59 from before Ice Cream Sandwich. 1:01 So, if I select Theme.Black, 1:03 I get a darker theme with the older-style UI elements, 1:06 and Theme.Light 1:09 gives me the brighter theme, 1:13 but changing the preview here doesn't actually change 1:15 the theme for the activity. 1:17 To do that, we need to set the theme 1:19 in the Android manifest. 1:21 To set a theme for our entire application, 1:23 meaning that it will be applied to all of our activities, 1:25 let's open the AndroidManifest file. 1:27 Select the Application tab, 1:30 and then click on the Browse button 1:33 next to the Theme field. 1:35 Select System Resources, 1:38 and then scroll down or type 'theme' 1:40 to get down to the Theme section of the list. 1:42 Select the Default theme, 1:45 click Okay, and Save. 1:47 If we want to set a theme for a specific activity, 1:50 scroll down and click on that activity 1:52 in the Application Nodes section 1:55 at the bottom of the screen, 1:57 then browse for the theme like we did before 1:59 for the theme field for the activity. 2:01 System Resources, type 'theme,' 2:03 and there's the list again. 2:05 I'll just cancel for now. 2:07 Okay, let's go back to our layout, 2:09 and since there aren't really that many 2:11 choices here for themes, 2:13 let's talk about creating our own. 2:15 Open up styles.xml 2:17 in the Values folder inside the Res directory. 2:20 Let's switch over to the plain XML view. 2:25 We have 1 theme already in here, the 2:27 AppTheme that we already saw for our app. 2:29 We can change this theme or create a new one. 2:31 Let's just make a new one. 2:34 On a new line type: 2:36 style name= 2:38 and let's call this "Custom Theme." 2:40 I'm going to set the parent as 2:44 android:Theme.Black. 2:46 Choosing a parent theme ensures that everything will at least 2:52 be covered by a basic theme, and it allows us to 2:54 build on top of an existing theme. 2:56 Inside the theme, we can add all sorts of items to style. 2:59 Let's add 3 to see how to make some basic changes. 3:02 Type: item 3:04 name=android:background. 3:08 Close our tag and, now, for the value, 3:12 type in a hexadecimal color. 3:14 Let's use #D3E4E8. 3:17 Next, on a new line type in: 3:21 item name= 3:24 android:textColor. 3:27 We need another hexadecimal value here, so let's use 3:33 a nice dark blue, #222E63. 3:35 Lastly, type: 3:40 item name= 3:42 android:textSize, 3:44 [typing] 3:47 and let's blow up our text to 32sp. 3:49 Good, let's save our changes. 3:52 The cool thing is we can take a look at this in the Preview view. 3:54 Switch back to our layout, 3:57 and up here at the top in the Drop-down list, 3:59 we should now have our theme inside the Project Themes. 4:02 If your theme doesn't show up, you may need to clean your project 4:04 and/or close and reopen the Screen Layout tab. 4:07 Okay, select Custom Theme, 4:11 and voilà, there's our fancy custom theme. 4:13 Now some things don't look right with the text size we chose, 4:16 but you can fix that by editing the Theme file, 4:19 and, look, it even previews the themes over here 4:22 for the widgets in the palette. 4:24 This was just a quick introduction to demonstrate 4:27 the power of themes and the ease of setting them. 4:29 Creating a custom theme can get quite complex, 4:32 depending on how much you want to control the details, 4:34 but it can really set your app apart, 4:37 and establishing a good use of themes, 4:39 will help you develop more quickly. 4:41 If you'd like to see more advanced videos and tutorials 4:44 like this one, go to TeamTreehouse.com 4:47 and start learning for free. 4:50 [treehouse™] 4:52

You need to sign up for Treehouse in order to set up Workspace

Sign up