fbpx
Implementing Dark Theme in Android

Implementing Dark Theme in Android

Reading Time: 6 minutes

Implementing Dark Theme in Android apps became even more easier since Android has released on its devices the dark theme.

To support dark theme in our apps became more and more important. If you check out some statistics, the most users like better the dark theme against the light theme.

The second reason implementing dark theme in Android is the power reduction. If we run our app in dark mode, we light up less pixels which results power usage reduction … up to 60%.

The third reason is that, it makes our app easier to use in low-light environment.

In 2019 Android introduced a new feature on Android 10, which is System theme change. With this feature we can switch between dark and light theme on our device and also the apps which support this feature will react and change its theme also. That’s why developers are highly encouraged to start implementing dark theme in their apps.

The sample app

Above, from the video you could get an overview, what we are going to implement in this tutorial.

Note, that the switching will be done inmediatelli and not so slowly like on my video. 😀

We will build up a simple login user interface with an ImageView, which contains the logo of the app. Then 2 TextInputEditText, which are for the email and password. Below them goes the login Button. At the bottom will be a Switch, what we gonna use to switch between light and dark theme.

Step 1 – Create new project

First thing first, we gonna create a whole new project. For this, launch Android Studio. If you see the “Welcome page”, then click on the “Start a new Android Studio project”. If you have an open project, then from the “File” menu select “New”, then “New Project”. After thet, this window will popup.

Here select the “Empty Activity” option. In the next window, we should provide some information about the newly created app.

This tutorial will contain very few code, but still we have to select the programming language. As the other tutorials on this website, this will be written also in Kotlin. So, select from the dropdown list the Kotlin language.

From the next list of the “Minimum SDK” select API 21. In our case API 21 gonna be enough.

If you are done, click on the “Finish” button. The build can take few minutes. Be patient! 😉

When the build has been finished, then you should see the open MainActivity::class and next to this the activity_main.xml files.

Step 2 – Add the dependency

We are going to use for our layout TextInputLayout and TextInputEditText. To use them, we have to add to the project the Material Design dependency.

So, open up the App Build.gradle file from the left Project pane.

Android Studio - App Build Gradle

Next, paste the below implementation into the dependencies {} section.

implementation “com.google.android.material:material:1.3.0-alpha02”

Thenafter click on the Sync now button, what you can find in Android Studio at the top left corner.

Step 3 – Change the base application theme

To use in our app the day-night switch, we have to change the base application theme to use MaterialComponenets. We can do the change in the styles.xml file, what you can find in the res->values folders.

Change in the <style> tag the parent theme to

Theme.MaterialComponents.DayNight.NoActionBar

Step 4 – The assets

After the preparation of the sample app, we have to add some assets to the project.

The logo

First we have to download the logo using the below link.

Download logo

Extract it into the res folder of your project.

Note that we have the basic folders for the different Android device resolutions and the same folders, but with the “night” extension. These folders mean, that the assets, which are in this folder will be shown when the app is in night mode.

Notice also that the name of the files are the same in the light and dark mode. Only in this case can your Android app figure out which assets should be used in the different modes.

The colors

The second thing, what we gonna do is to implement the colors for the light and dark theme.

We can do it by creating the colors.xml file for the light and dark theme as well. First we gonna start it with the light mode. When you would like to implement colors for the light theme, then you should just put your colors into the original colors.xml file. So, open up the colors.xml file from the res->values folders. Then paste there the below color items.


colors.xml

The have colors for the dark mode, we have to create a new colors.xml file, but we have to select the dark mode. So, click with the right mouse button on the values folder, then select New and Values resource file.

In the popup window name it also as “colors.xml”, but from the Available qualifiers section select the Night mode an add it to the Chosen qualifiers.

Thenafter from the combobox select the Night option.

Next, add the below color items to the newly created colors.xml file. These colors will be shown if the app/device is in dark mode.


colors.xml

Note that the name of the items are the same, what we have in the colors.xml file for the light mode.

The shape of the button

As you have seen on the video above, our “Login” Button will have rounded corners and a blue backround in case of light mode and orange background color if the app is in night mode.

The way to achieve the desired result is different like in case of the above logo. First we gonna create a new resource file in the drawable folder. To do this, click with the right mouse button on the drawable folder, then select the New and the Drawable Resource file options. In the popup window name the new file as “shape_roundedcorners_button”. If you are done, then click on the OK Button and paste the below code into the new resource file.


shape_roundedcorners_button.xml

Then, in the same way, create also a new Drawable Resource file into the drawable folder, name it also as “shape_roundedcorners_button”, but now from the Available qualifiers chose the Night mode option and at right side of the window select Night. If you are done, then click on the OK Button and paste the below code into the new resource file.


shape_roundedcorners_button.xml

Step 5 – The user interface

As we have talked about already, this sample app will contain only a simple login page with some views.

So, copy and paste the below xml code into the activity_main.xml file, what you can find in the res->layout folders.


activity_main.xml

Step 6 – Switching between light and dark theme

The last step before we can test the app is to add the switch, what will change the theme. Basically, in a production ready app, we have to add this switch to a settings screen.

In our case we gonna do that in the MainActivity::class. So, open the MainActivity.kt file from the main source set and add the below code to the onCreate() method.


MainActivity.kt

Notes

      1. We have to find first the view from the layout xml file.
      2. Then we can set the OnClickListener.
      3. Using the resource variable, which comes from the AppCompatActivity::class, we can request the currently active mode.
      4. Thenafter using a when-expression, we can change the mode depending on whether the dark mode active or not.

Run the app

Finally, it is time to run the app. 

Use the Switch at the bottom of the app to change the ligth mode to dark and backwards.

Congratulations! 😎

You just implemented a setting, what from now on you can use in your own apps as well. 😊

GitHub

The source code is available on GitHub, check it out and download it using the below link.

GitHub

Questions

I hope the description was understandable and clear. But, if you have still questions, then leave me comments below! 😉

Have a nice a day! 🙂

Click to rate this post!
[Total: 0 Average: 0]

Follow and like us:

Leave a comment

stay informed!

Subscribe to receive exclusive content and notifications