Skip to main content

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 name="AppTheme" parent="AppBaseTheme">
This is the default and this is Dark if we want to add a Light theme, add this to styles.xml

  <style  name="AppTheme.Light" parent = "Theme.AppCompat.Light">
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"?>
    <declare-styleable name="dynamic_style_attrs">
         <!-- icon src attribute -->
         <attr name="emailIcon" format="reference" />
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>
    <!--  Light theme -->
    <style  name="AppTheme.Light" parent = "Theme.AppCompat.Light">
        <item name="emailIcon">@drawable/ic_light_email</item>

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

                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
protected void onCreate(Bundle savedInstanceState) {
if (SELECTED_THEME.equals("LIGHT")) {
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.


  1. I spend half day in searching for something useful about making two themes in one app, and this article is best, thank you!


Post a Comment

Popular posts from this blog

Spring 4 + Hibernate 4 / Java configuration / rest service example with gradle

In this post I'll explain the required work to create a rest API utilizing both spring and hibernate version 4, and the configuration will be using java configuration classes not XML. I'll use gradle to build and for dependency management, it's way easier than maven and keeps you focused on the application, if you are not familiar with gradle and interested in it see my previous post about it. The first part which is dependency management is covered in gradle post mentioned above. I'll skip to explain each tier of the project and its configurations: As you can see we have 4 tiers: 1) DAO tier / data tier In this tier we configure the datasource and hibernate, I used HSQL in memory db it can be easily substituted with other db engine providing the right dependencies The DaoConfig defines the data source, transaction manager, session factory and  hibernate properties The most important part is the annotations : 1)  @Configuration  : to tell spring th

Android RecyclerView - Adding Empty View

So RecyclerView was introduced to replace List view and it's optimized to reuse existing views and so it's faster and more efficient as stated in the documentation: While using it, I faced the issue of missing a useful functionality that is implemented in ListView. that feature is setting an empty view in case there was no records. In ListView it was as simple as this View emptyView = findViewById(; ListView  myList = .... myList.setEmptyView(emptyView); but this method doesn't exist for recycler view so we need a work around until android team fixes this. and here are the screen shots of both list view and recycler view fix List view : Recycler view : here is how I fixed it: here is the content of empty_view, it can be anything. Enjoy.

[PART 5] NuTracker ReactJS app - Add Login & Profile using Router

In the previous part we finished the dashboard read functionality, now we want to add the skeleton for other pages: - Login   In this page the user will be able to login to their account and the dashboard won't show unless the user is logged in. - Profile In this page the user will be able to update their daily nutrition goals that they can track in the dashboard. to be able to have multiple 'pages' in react and navigate from one to one, we need something that can switch the rendered content based on what we want, we can do that with if statements in the App components and store some location state, but why invent the wheel. React Router every major single page app web framework has the routing concept and functionality to interact with the usual browser urls and switch the content based what user should see. for example on the profile page I want the url path to be /profile, and for login to be /login and so on. in more advanced cases you want the users