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>
  <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.







Comments

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

    ReplyDelete
  2. You guys make it really easy for all the folks out there. free wordpress themes

    ReplyDelete

Post a Comment

Popular posts from this blog

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:

https://developer.android.com/training/material/lists-cards.html

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(R.id.mylist_empty_view);
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.

Microservices 101, Docker & spring boot sample [Windows 10, home]

This is a very simplistic article :) if you are looking for a deep dive in microservices, see my state-of-the-art microservices full archeticture here:http://dev.basharallabadi.com/2019/03/part-1-spring-state-of-art.html What are micro services? It's an architectural model for web services that basically requires each service** to be completely independent and loosely coupled from other consumer services, or services that it depends on. and it's not a new idea but it's catching pace in today large scale web applications.


**(by service we mean a component that controls and implements the business logic in a self contained manner, like orders service, products catalog service, accounts management service, all of these have their domain and can be clearly separated) 

 Why micro services emerged ?
1- Easy to scale services: if you have a single application and all the services share the same code base and war (package) then if you receive high demand on one of the services…