DEV Community

Pabi Forbes
Pabi Forbes

Posted on

Theming In Android Revisited: Part 1

Last year, some time in July, I wrote a blog post about theming in Android. The post received some good comments, so I decided to revisit the topic with newly acquired information to share with the community. But before we get into how to theme our apps, let's see why it should be considered.

What is Theming? 🤷🏿

A theme can be described as unifying an idea and theming is designing or bringing that idea to life to an object, application, or space. Theming is used to create a holistic look and feel.

Should we care about how our application looks like?
Well, you would want to create a memorable experience for your end users. And to create a reusable set of attributes to apply to your entire application. Theming also enables us to create visual consistency in our applications. Smashing Magazine describes visual consistency as follows - "Typefaces, buttons, and labels need to be consistent throughout the app" .

Let's get into theming, for this post, we will be making use of Material Components. Add the following to your gradle file:

com.google.android.material:material:$material_version

Color 🎨

Color was the main topic in my previous post about theming. I also included useful tools such as the Material Design Palette and the Color Tool. Extracting colours from these tools might look like this:

And as pointed out in the previous post by,

[deleted user] image

[Deleted User]

there seems to be a duplication of color from the exported file from the Material Color Tool. So how do we solve the duplication issue? Well, it is quite simple, we name our colors. A cool online tool you can make use of is Name that Color, and the result looks like this:

That helped us get rid of duplicate colors and we named our colors, because colors have names. That will be particularly useful if we need to define multiple themes for our apps. This is how we will define the style for the app's theme using the colors:

On Colors

"On" Colors - namely On Primary, On Secondary, On Background, On Surface, On Error, as seen in the image above, are used to usually used for iconography, text, and strokes.

Cool Resources 👀

Happy Theming

Top comments (0)