A new Android Studio project uses a template that implements material design themes, and has some default colors. Learn how to configure the color scheme for your app, and show a website that generates custom color palettes for use in all material design–enabled platforms.
- [Narrator] As I previously described, new Android Studio project implement the material designed visual language through a set of included themes and styles. One of the easiest things you can do to customize your own app is to apply your own colors. The material design specification defines which colors are best, but you can chose your own combination. In this brand new app that I've named MaterialColors, I'm starting with the default settings, named colorPrimary, colorPrimaryDark, and colorAccent. And if I control and click into one of those color settings, that takes me to my colors.xml file.
This is where you would actually change your color values. To see how those colors are currently being used, I'll press the shift key twice, to open the search everywhere dialogue, and then I'll open activity_main.xml, and I'll look at it in design view. The color that you see across the top tool bar is called the primary color, and the one above it is called the primary dark color. I'll go to the colorPrimary setting, and I'll change it to a value of C0C52A.
Now, over on the left side, you'll see what that color represents in this area. And then I'll go back to activity_main.xml, and see that it's updated right away. I'll go back to colors.xml again, and I'll change colorPrimaryDark to 000000 or black. Then, once again, I'll look at my activity layout, and I see a black boarder at the top. There are a number of websites you can use to generate your own palettes. One of my favorite is called materialpalette.com.
On this site, you can choose any two colors and it will generate the xml that you need. So, for example, I'm going to choose cyan as my primary color and gray as my secondary color. And that generates a palette in the lower right corner. If I don't like that, if I want it to be a little more colorful, I can start over again. This time I'll choose light blue and lime. And you can keep on experimenting until you find the combination of colors that works for you.
I'll go with this one, red and light green. Then, I'll come on over here and click the download link, and I'll see a number of formats I can choose from. Again, this isn't just for Android. This is for the web, as well. For Android, you'll want to download the xml version. I'll open that file, and I'll open it in an editor, and here's the results. I'll have an xml values file, where each sub-element has the name color, and this matches the structure of my colors.xml file.
To use these colors initially, I'll just copy and paste a few of them from my new file to my existing file. I'll copy primary to primary, primary dark to primary dark, and then accent to accent. Notice that the default names of these color settings are different than in the downloaded xml file, so by just copying the values, I'm not disturbing the rest of the application. Then, I'll look at my activity layout, and there's the result.
If you want to use the rest of these colors, you can simply copy and paste them. I'll take primary light and I'll go back to Android Studio, and I'll paste that into place. And then I'll select everything after accent, and I'll paste those into place. At any time you like, you can go back to that material palette website and try different colors. And because you're setting these at the root of the project, that is in the values xml files, whatever you set will apply to all of your activities and all of your layouts throughout your Android app.
- Using View components
- Exploring the design repository
- Using the new ConstraintLayout component
- Adding views to a ViewGroup with Java
- Manage string values as resources
- Working with TextView, EditText, and TextInputLayout
- Displaying toast and Snackbar messages
- Defining and applying styles
- Using material design components
- Managing image display with Picasso
Skill Level Beginner
Q: This course was updated on 11/10/2017. What changed?
A: New videos were added that include information about additional techniques for building an app's user interface, including videos on localizing the strings presented in an app for multiple languages, extending View classes to create advanced visual components, and more.