Changing Theme Colors3:14 with Ben Jakuben
Android apps use themes to provide some default visual settings that make things consistent throughout an app and across different versions of Android. Let's take a quick overview of Themes and see how to change a basic color scheme.
Colors Used in this Video
<color name="colorPrimary">#21262B</color> <color name="colorPrimaryDark">#1A1718</color> <color name="colorAccent">#AF1C24</color>
Related Treehouse Content
[MUSIC] 0:00 Android apps use something called a theme to provide some default visual settings 0:05 that make things consistent and easy for developers. 0:09 We're only going to touch on this lightly here. 0:12 But in short styles are used to organize UI settings for views and 0:14 widgets in our app so 0:17 that we can apply the same changes to multiple things by using a common style. 0:18 So, you can see some examples here in the docs that says you 0:23 can specify attributes like height, padding, font color, etc. 0:25 A theme is then a collection of styles packaged into one setting that can 0:28 be applied to an entire app, including some app level settings. 0:33 Check the teacher's notes for more material on how to use styles and 0:37 themes in your app. 0:40 Let's find out where our app's theme is set, first, 0:41 let's take a look in the design tab. 0:44 And up here we have a button for a theme, 0:46 now it looks like we could click on this and select a different theme. 0:48 Here are a bunch of Android system themes, and let's take a look. 0:51 If we pick one like, something obvious, like, Black.NoTitleBar.FullScreen and 0:55 we click Okay. 1:00 Then sure enough, this matches what we expect. 1:01 It's a full screen app, it's got a black background, and there's no title bar. 1:03 So this is great, but this is only a preview, 1:07 this doesn't actually change the theme. 1:09 To actually change the theme we need to look in a file called styles.xml. 1:12 So here in the res directory I'm going to collapse drawable and 1:17 then here in values, you might need to expand it. 1:20 We want this file styles.xml, so this is the convention for 1:23 a file that contains styles and themes. 1:26 Inside here, we have a resources room element, and 1:29 then the first comment says this is our base application theme. 1:32 Then we have a style that names the theme, App theme that we just saw, and 1:36 it gives it a parent, Theme.AppCompat.Light.DarkActionBar. 1:40 This is very much like a parent class, or 1:45 a parent style if you're familiar with CSS for the web. 1:48 Our slightly customized theme here is the exact same as this parent theme, but 1:51 we are overriding three colors; primary, primary dark and accent. 1:55 Let's change these to be dark grey, black, and 2:00 red to match the color pallets from our mockups. 2:02 Now we could set the values directly in here using color hex values. 2:05 But this is following another convention where colors are set in a separate file 2:09 called colors.xml. 2:13 Things that we set in that file can be referenced throughout our code and 2:15 in xml with this @color attribute. 2:18 So let's open up that file, and in here we can change the actual values for 2:21 these colors. 2:26 If you need a refresher on hex values for colors, check the teachers notes. 2:27 So for the primary color we want this to be a dark gray, let's call it 21262B. 2:31 The primary dark color will be almost black, let's call this 1A1718. 2:37 And for the accent color we can use red from our planet AF1C24, 2:41 and you can see as we type, we get a little preview over 2:46 here in the gutter that shows the colors that we're setting here on the right. 2:51 Now if we go back to our app preview, we can see that the bar at the top 2:55 is now dark gray, because it's using that primary dark color. 2:59 And if we run this, we'll be able to see that the underlined and cursor for 3:03 our edit text are using the accent color, red, and there we go. 3:06 We've got dark gray up here and we have the red underline under our edit text. 3:10
You need to sign up for Treehouse in order to download course files.Sign up