Adding multiple themes to your app or library

Example you can find here: https://github.com/thealeksandr/PFLockScreen-Android

It’s a short article about adding multiple themes support to your app.

Most android apps have only one theme. And usually, it’s enough. But sometimes we want to give a user some customization. It’s can be a simple night mode in Twitter. Or it can be your way to monetize your app like Line Messenger where you can buy the theme you like.

In case of PFLockScreen, I just wanted to give more opportunity for customization for developers who want to use the library. I think it’s very important for libraries that provide UI.

Less talk. More Action.

The first thing we need is to define an attribute in the res/values/attrs.xml file. This attribute represents our custom style.

<resources>
   ...
   <attr name="pf_key_button" format="reference"/>
   ...
</resources>

Notice it’s not a String or Color or anything else. It’s not a style. It’s a reference for a style, color, font dimensions, drawable etc. Whatever you want to create an attribute for. In my example it’s style.

Then in your app themes , you define this attribute:

<style name="AppTheme1" parent="Theme.AppCompat.Light.NoActionBar">
   <!-- Customize your theme here. -->
   .
   .
   .
   <item name="pf_key_button">@style/MyLockScreenButtonStyle1</item></style>

And the style:

<style name="MyLockScreenButtonStyle1">
   <!-- Customize your theme here. -->
   <item name="android:textColor">@android:color/white</item>
   <item name="android:textSize">18dp</item>
   <item name="android:foreground">@drawable/key_foreground</item></style>

You can create as many themes as you want. All you have to do is define your attributes in them.

In your view you have to set the style parameter to attribute you created:

<TextView
   android:id="@+id/button" 
   android:layout_height="20dp"                   
   android:layout_width="20dp"                    
   android:text="2"
   android:gravity="center"
   android:layout_gravity="center"
   style="?pf_key_button" />

pf_key_button — will be whatever style (color, drawable, etc) that defined in your current theme.

If you will check the code from the link above you’ll find out that I also set a theme attribute. So my layout looks like:

<TextView
   style="?pf_key_button"
   android:theme="@style/PFLockScreenButtonStyle" />

In my library, I wanted to provide a default theme. So developer doesn’t have to provide his own theme if he doesn’t want to. If a developer wants to use his own theme he will need to override pf_key_button attribute and in this case, a custom style will override theme field.

So your theme is set of your custom attributes and styles. If you creating an app I’d recommend to use this approach and use attributes instead of using styles directly. So it can be easily customized in future even if you don’t need it right now.

I showed the easiest case where you can change colors and font size. But android styles and themes systems are very flexible and let you create themes that will be very different from each other. But I believe it’s a different topic.