Combining Vector Drawables with Day/Night Theme
With the recent release of the Support Library 23.2, AppCompat now supports themes that can automatically update their styling based on whether it is currently day or night. Whilst this means that your window background and text color will update automatically for you, it is still up to the developer to handle having alternative drawables for each mode.
How to Support Day & Night Drawables
The most commonly discussed solution for this is to either tint your resources, or to use the -night resource qualifier to specify alternate resources for rendering at night, which if you’re specifying assets for mdpi through to xxxhdpi can significantly add to the size of your app. One solution which I haven’t really seen discussed is to use vector drawables, which gained backwards compatibility in the latest support library release.
In my previous blog post, I discussed the benefits of vector drawables and how to use them in your application. Vector drawables allow you to replace multiple bitmap assets with a single vector graphic which is defined using XML. The colour of each path of a vector drawable is defined as part of the XML format in the form of android:fillColor=”…” and this has full support for colour resources eg. android:fillColor=”@color/colorPrimary” and also for theme attributes eg. android:fillColor=”?attr/colorControlNormal”.
In the above example we are just rendering a camera icon that comes with the Android Studio templates, but using a theme attribute to set the color. The full code for the vector is
With the colorControlNormal attribute being the default for the day/night theme. Internally, this uses styles with the -night resource qualifier to set the color.
To enable day/night mode for this application, all we need to call is
The full source code for this example can be found on Github
Wrapping Up
Vector drawables are already very useful as they allow you to have one drawable that can be used across all resolutions with perfect scaling, as opposed to one resource for each resolution bucket, but with the ability to support both day and night themes without duplication and in a backwards compatible way they become even more powerful. This won’t be applicable or useful to every app, particularly if the drawables have many colours/layers, however for simple drawables, especially material-style icons, this can allow you to cut down on your number of drawables, and therefore your application size, significantly.
