Android - Multiple themes for one application

Sometimes you want to have multiple themes for your app

one strong example is having the ability to switch between dark and light themes because during night, a white bright screen can really be annoying for users eyes

Android will do most of the work for you but it may be required to change icons between themes to fit colors

In this blog I'll show a simple app with both dark and light themes and how to change icons without having to do that from code and keep things clean and centralized.

first of all let's create our activity, it will look something like this :

In /rest/values/styles.xml, we inherit Theme.AppCompat

 <!--
        Base application theme, dependent on API level. This theme is replaced
        by AppBaseTheme from res/values-vXX/styles.xml on newer devices.
    -->
    <style name="AppBaseTheme" parent="Theme.AppCompat">
        <!--
            Theme customizations available in newer API levels can go in
            res/values-vXX/styles.xml, while customizations related to
            backward-compatibility can go here.
        -->
    </style>
  <style name="AppTheme" parent="AppBaseTheme">
</style>

This is the default and this is Dark theme..now if we want to add a Light theme, add this to styles.xml

  <style  name="AppTheme.Light" parent = "Theme.AppCompat.Light">
    </style>

in the activity designer now we can view the new AppTheme.Light

As you can see most of the stuff was handled by android, but the email icon is not suitable for this light theme.

to make things dynamic, we do the following steps. 

1- in /res/values add the file : attrs.xml if you don't have it.

2- add the following section 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="dynamic_style_attrs">
         <!-- icon src attribute -->
         <attr name="emailIcon" format="reference" />
    </declare-styleable>
</resources>

3- in styles.xml, change the following :

 <!-- Application theme. -->
    <!-- Dark theme -->
    <style name="AppTheme" parent="AppBaseTheme">
        <!-- All customizations that are NOT specific to a particular API-level can go here. -->
        <item name="emailIcon">@drawable/ic_action_email</item>
    </style>
    <!--  Light theme -->
    <style  name="AppTheme.Light" parent = "Theme.AppCompat.Light">
        <item name="emailIcon">@drawable/ic_light_email</item>
    </style>

4- go to the icon image view and change the src attribute to this

  <ImageView
                android:id="@+id/imageView1"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:src="?attr/emailIcon" />

that's it, let's test and see how the light theme will look now:

 This procedure can be done not just for icons, you can define as many style attributes as you need and use them to make your theme dynamic instead of hard coding the values in your layout files.


and to change the theme dynamically you can store the user preferred theme  in preferences and in every activity you have to do something like this

@Override
protected void onCreate(Bundle savedInstanceState) {
if (SELECTED_THEME.equals("LIGHT")) {
setTheme(R.style.AppTheme_Light);
}
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

if you don't call this android will use the default theme in AndroidManifiest.xml

That's the basics you need to know to multi-theme your app.