Android App Themes4:43 with Ben Jakuben
Let's take a look at how to apply styles and themes to our Android app. The Theme Preview tool allows us to see how the new theme will look on our app. You'll be able to see how the UI elements will look when you apply the theme. A well designed theme can set your app apart, and help you to develop faster.
[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 download course files.Sign up