How to Build Material and Dark Themes Apps Using Style in Android?
In order to increase the user traffic of the android application, there is a need of tweaking the Theme and the Style of the android application. In today’s mobile application development one also need to consider the look and feel of the application. One major feature in the application user needs is the Dark Theme. The default theme for the Android devices was dark until Android lollipop(5.0) but the Android Q released in the 3rd quarter of 2019. The majority of the applications implemented their dark theme version of the application. In this article, it’s been illustrated how to implement the Material Dark theme version of the Android Application.
Why Dark Theme?
Dark themes reduce the luminance emitted by mobile device screens, hence reducing eye strain. Also maintaining the minimum color contrast. This also helps in the functional design of the application. Consuming less battery power, adjusting to the current condition of light. Devices with OLED displays can get befit of the Dark themes. Most importantly, there are more fans for the Dark theme version of the application.
Understanding the difference between styles and themes
- Android developers witness the ambiguity in styles and themes. The reason is that in Android there are only tag names <style>, there is no <theme> tag available.
- Style is a collection of attributes that define the appearance of a single view. The style attributes are the font, color, size, background color, etc. For example, the font size may be different for heading and body.
- Theme, on the contrary, is applied to the entire app, or activity, or view hierarchy, not just for individual views. Themes can also apply styles to non-view elements such as status bar, window background, etc. For example, the colorPrimary is applied to all the Floating Action Buttons or Normal Buttons of the entire application. One can get the difference in the following image.
- The above image clearly can see the difference between, The Styles and the Theme. Where the style is applied for the particular view inside the parent View group, but the theme is applied to the entire parent view group.
- But Styles and Themes go hand in hand For Example the Floating Action Button and Normal clickable buttons can have different colors like colorPrimary, and colorSecondary respectively.
Material Theming Properties
The Main 3 properties to achieve functional material theme in Android application are:
- Material Design Components
- One can get the basic information about these properties can refer to Introduction to Material Design in Android
- One may have seen in the recent update of Android studio (4.1 and above) The Color properties are made different. Those are:
Primary Color Variants:
|colorPrimary||This color primary color of the application. This color is the most used color in the Application. This can also be called a branding color||#FF6200EE|
|colorPrimaryVariant||This is the variant of the colorPrimary. This may be a lighter or darker variant of the primary color.||#FF3700B3|
|colorOnPrimary||The name itself indicates the color should be assigned to those elements which are above the colorPrimary.||#FFFFFFFF|
Secondary Color Variants:
|colorSecondary||The color which is most used after the colorPrimary. This color is accented complement color of the colorPrimary.||#FF03DAC5|
|colorSecondaryVariant||This is a variant of the colorSecondary. This may be a lighter or darker variant of the colorSecondary.||#FF018786|
|colorOnSecondary||This name also indicates that the color should be assigned to those elements which are above the colorSecondary.||#FF000000|
|colorSurface||Surface color that affects surface components, such as cards, sheets, menus.||#FFFFFF|
|colorOnSurface||This color assigned to the texts or icons which are above the colorSurface||#000000|
Colors for Errors:
|colorError||This indicated the color assigned to elements which state, the error.||#B00020|
|colorOnError||The color which is assigned to texts or icons which are above the colorError.||#FFFFFF|
There are predefined and well-engineered typography variants of the text in the Material Design Typography system. Have look at the following image:
These are by default are the attributes that come with the Material Design theme, and can be applied directly to the TextViews according to the context of the Text in the application.
Steps to implement the Dark Theme variant of the Application
Step 1: Create empty activity Android Studio project:
Create an empty activity Android Studio project and select Kotlin as the programming language. Refer to Android | How to Create/Start a New Project in Android Studio?.
Step 2: Add the required dependency
- Add the following dependency to the app-level gradle file, and sync the project.
- This dependency, however, is added by default when the new Android Studio(version 4.0 and above) project is created.
Step 3: Adding the Primary and Secondary brand colors
- We need to primarily decide the Primary and Secondary color, and take the color code out of it. In this case, The Primary Color is green and complement to it there is red_200 and red_700 as Secondary brand colors.
- One can make their own color swatches and combination using either this or this.
- Invoke the following colors to implement the same in the application inside the colors.xml file.
Step 4: Working with the themes.xml files
- Firstly, applying the DayNight DarkActionBar Theme to both light theme and Dark theme of the application as follows:
<style name=”Theme.GFGArticle” parent=”Theme.MaterialComponents.DayNight.DarkActionBar”>
- Following the Color System provided by Material Design Guidelines as discussed above the following are the color system applied for the light theme and dark theme of the application.
- The following values\theme.xml is applied when the application is under the light theme.
- The following values-night\themes.xml is applied when the application is under dark theme.
- Have a look at the following images where these files reside inside the Android Studio Project.
Step 5: Working with activity_main.xml file
- The main layout of the application consists of the Material Design Type system. And one Extended Floating Action Button and one Normal Floating Action Button to Demonstrate The secondary brand color of the application.
- All the text views in the layout inherit the style of the Material type system. For example – “style=”@style/TextAppearance.MaterialComponents.Headline4”.
Step 6: Working with the MainActivity.kt file
Inside the MainActivity.kt file it’s been handled the checked change listener of the material switch button. And if the device won’t support the dark theme of the application, this project itself supports the dark theme version for all kinds of APIs.