From AppCompat to Material Components + Applying Dark theme to Android (Part 4/4)
Learn about the available Material Components in the Material Design Library. Also, create a dark theme.
Check out the part1, part2, and part3:
The final part of this series tells you about all the Material Design Components that are available in the library. Using these attributes you can customize the look and feel of each component. Check the table below for the components that you can add, replace or remove.
For eg: If you’ve been using seekBarStyle, you need to replace it with sliderStyle. For toolbarStyle, you do not need to change anything.
For implementation, I’ve already shown how to use materialButtonStyle in Part 3.
Extending our app to support the Dark Theme
Till now we have already specified the parent theme as:
<style name="Base.AppTheme.MyAppName" parent="Theme.MaterialComponents.DayNight.NoActionBar">This means we are already supporting the Dark theme in our app. In Android 10 and above you can test this by changing the phone’s theme from Light to Dark mode. If you are satisfied with the default implementation, you don’t need to change anything and you are done here. But if you are like me and want to have a non-default dark theme, read on…
Steps:
1. Create the night resource qualifier under res/values-night/themes.xml
The system will look for the night resource qualifier for the dark theme. This will inherit from the light theme and provide different values that suit the dark theme.
Check an example:
And it will look something like this:
If you want to choose a color palette for the dark theme, check this. In most cases, this will be provided by your designers. But the designers also need to learn about the MDC and the developers and the designers should have a common language when they are talking about the designs.
A note about primary vs surface coloring in the dark theme
In dark mode, some components use surface color instead of the primary color. This is important to know so that you don’t get unwanted results. For eg: I was expecting that the toolbar(top app bar) will take the colorPrimary as the background color in the dark theme as it takes the colorPrimary in the light theme. But turns out that the Toolbar takes colorSurface as the background color in the dark theme. You can see this in the above screenshot. Even though we have specified colorPrimary in the dark theme to be a red color, it still looks (light) black. This is done because if we use bright colors it will emit too much brightness. So the option is either to use a desaturated color of your primary color of the light version(if you use 500 variant in the light theme, use 200 variant in the dark theme) or use surface colors. In the former case, you need to override the default theme.
Why does the toolbar look light black instead of pure black?
As told above, the surface color is applied as a background to the large surfaces. By default, the surface color is #121212. But this color is not light black. Actually, this is done as an alternative to the shadows. Shadows are less effective as they are not visible in the dark theme. So as compensation, the Material surfaces in a dark theme become lighter at higher elevations when they are closer to the implied light source. This is achieved by having a layer of colorOnSurface on top of the surface color. But if you think this is overdraw, this is not. The framework applies a blend of colorSurface and colorOnSurface and draws only a single layer instead of two.
This type of elevation in the dark theme is applied to the following components:
2. Test your app on different API levels
Not to mention, but it is important that you test on various API levels and see the changes according to the above information.
3. Provide the option to change the theme
On Android Q and above, the system provides the option to switch between the light and the dark theme. But below Android Q, the system turns on the dark theme in the battery saver mode. To implement this behavior, check the gist for the code.
This brings an end to this series. I hope you have learned something new. If you have any questions or suggestions, please comment.
Reference:
