DEV Community

Cover image for Theming Your Android App
Pabi Forbes
Pabi Forbes

Posted on • Edited on

Theming Your Android App

Theming your android app might be quite of a task if you don't have an eye for design and color combination. It's much easier when you are placed on a project that has designs created by a UI/UX designer.
A theme is applied throughout the entire app, not just a single view. Theming your app includes creating a color scheme for it. An android app's color scheme is made up of a primary color,or sometimes a combination of the primary color and secondary color.

Primary Color
The primary color is the color that the user will see on the screen and on your app's components the most. The primary color will appear on your appbar, status bar, and tabview for example.

Secondary Color
The secondary color can be used to emphasize the different components on the screen. The secondary color can be used on floating action buttons, progress bars, or switches for example.

Side Note:
It is not always required to have a secondary color. The app can use the primary color's variants as it's secondary color. Primary color variants are the lighter and darker shades of the color.

So how do we tackle the task of theming our apps? Fortunately for android beginners, Material Design has a cool color palette tool, called Color Tool.

Visible Textview

The Color Tool helps you visualize how your app would look like with the colors you would choose.
The tool also allows you to export the color xml and just paste it in your android colors.xml file.
You simply click on the Export button on the top right side of the website, it will then download your scheme as an xml file. You then simply copy the text from the xml file to your color.xml file of your Android project, as shown below:
Visible Textview

Another awesome tool is the Material Design Palette, which also provides a visualization of the theme. You can simply click on the download button to get the xml version of the scheme, and then just simply copy and paste it into your colors.xml file.
Visible Textview

With the tools made available, it is now easier to style your app. Some useful resources:
-Material Design
-Android Developer Guidelines

Need some insipiration? Check out what other developers and designers are crafting on UpLabs.

Credits:
Cover Image - A big thank you to Markus Spiske, taken from Unsplash

Top comments (10)

Collapse
 
peaceman profile image
peaceman • Edited

I personally use ColorHunt for iOS development but for Android these are good references and I will definitely check material design. Thanks a lot

Collapse
 
pabiforbes profile image
Pabi Forbes

Hey Peaceman, thank you for your response. It's the first time I'm finding out about ColorHunt, will definitely share this with my colleagues.

Collapse
 
snoozerio profile image
Aleksey Dolgiy

Bad color naming. This will bring some trobles:

  1. Color hex-codes duplication. It is already on screenshot.
  2. Naming follows attributes from the theme and not colors. This will be broken, when you decide to have second theme for your app.
  3. Color - is color. Red, green, blue, etc. And not the something should have the color of green.
Collapse
 
pabiforbes profile image
Pabi Forbes

Hey Aleksey,

Thank you for taking the time to read and thank you for the comment. Very valid points you made. The community will find value in this.

Collapse
 
pabiforbes profile image
Pabi Forbes • Edited

Hey Erildo, they are free to use.
Yes you can export them in xml.
Material Design Palette has more export formats available. You can even get the theme in csv and more.
Thank you for taking the time to read through.

Collapse
 
kleinetigervk profile image
Lorna Roberts

Handy links. Thanks!

Collapse
 
pabiforbes profile image
Pabi Forbes

Thank you for taking time to read through and respond. I'm glad that you found the links useful :)

Collapse
 
mrconst3llation profile image
Yanga Nkohla

Thank you!

Collapse
 
pabiforbes profile image
Pabi Forbes

Thank you for taking the time to read. I'm glad you found it useful.

Collapse
 
cban profile image
Cleo

Very informative, thank you