Recently, I have been working on my news reader app for Hacker News, Materialistic. As in any news reader apps, one of the most popular user feature request is ability to choose between light/dark theme for reading preference. Fortunately, supporting multiple themes in Android is quite easy and natural (given that you started properly). This blog explains the approach used by Materialistic to support multiple themes.
What you need:
- At least 2 app themes that extend from base light/dark Android themes. If you use latest appcompat-v7 it would be
Theme.AppCompat.Light.DarkActionBar(light version) and
- Color palette1 for each of your theme.
- [Optional] tinted options menu icons for each of you theme. Depends on your implementation approach, tinting can be done automatically, which means you only need one set of icons for one theme; or in my case, I choose to have multiple sets for simplicity.
Let’s start with a light theme for our app:
Explanation for some theme attributes can be found on Android Developers blog2.
TipMake a minimal app and try out the style attributes to see what attribute/value we need to set to achieve our desired theme first. As comprehensive as they are, Android documentations on theme attributes, especially with
appcompat, are surprisingly lacking.
Options menu icons should have the same color as action bar text color, in our case it’s specified via
android:textColorPrimary3, and is
#FFFFFF, so we should provide a set of white options menu icons for the action bar.
TipGoogle have made some of the material design icons public on Github.
To enable consistent color, and make our views and texts ready for multiple themes, it’s best that we specify their colors as color resource reference, e.g.
android:textColor="@color/textColorPrimary", or via style, e.g.
textEmptyStyle style below, using only a limited set of colors from your chosen color palette.
That should be sufficient for a simple light-themed material design Android app. In the second part of this blog post, we will make a dark theme and add setting to switch theme during runtime.