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.

Creating your own OAuth2 server and clients using spring security - part 1

In this series of posts, I'll try to put together a simple working example on how to create your own OAuth2 server.

if you want to know more on OAuth2 and when to use it as authentication and authorization protocol then you can search about it on google and i'll put some URLs later.

Now I assume you are familiar with java web applications using Spring and maven.

to get started we need to create the server side with all dependencies required and i'll list them here, i'll use maven 2 to ease downloading dependencies for us.


Steps:

1- Create new maven project with arch type webapp:



2- Add the required depenedencies for spring, spring security, spring-oauth2, hibernate & other libraries (required for this tutorial only you can use other libraries if you like)

https://gist.github.com/anonymous/d33a31ddc3ba84375cf3

3- I used hibernate to automate the creation of the schema required by spring OAuth2 to manage tokens (it's required to have schema created in db if you a…