How to Create a Dark Mode for a Custom Android App in Kotlin?

The dark mode is a feature that allows you to switch the color theme of an app or a whole OS to black or something on the brink of it. Beyond the joys of invigorating a tired design, one may wish to choose because it makes watching the device screen way more comfortable and relaxing on the eyes. Typical pixel values during the regular mode fall between 200 to 255. Each pixel emitting light at 255 value corresponds to the maximum possible light it can emit, providing more power. Similarly, a 0 value corresponds to the minimum amount, which corresponds to no power being supplied to the pixel. If one uses a smartphone that has an OLED display and enables dark mode, it might save some battery life too. So it becomes essential for a developer to add such a feature in the desired application. This article wants to share with you the implementation of dark mode in Android by using available libraries. Dark Mode is an example of optimization of User Experience as well as the Battery. It can be implemented on any application a developer desires. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 

sample GIF

Approach

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Changes made to styles.xml file



Go to the res > values > styles.xml file and change the style parent to “Theme.AppCompat.DayNight.DarkActionBar“. Below is the complete code for the styles.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
  
</resources>

chevron_right


Step 3: Working with the activity_main.xml file

Now go to the activity_main.xml file which represents the UI of the application, and create a Switch. This switch shall toggle between the dark mode and normal mode. Below is the code for the activity_main.xml file.

XML

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--Create a switch-->
    <Switch
        android:id="@+id/switch1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Enable dark mode"
        tools:ignore="UseSwitchCompatOrMaterialXml" />
  
</RelativeLayout>

chevron_right


Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file, and refer the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

filter_none

edit
close

play_arrow

link
brightness_4
code

import android.os.Bundle
import android.widget.Switch
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.app.AppCompatDelegate
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Declare the switch from the layout file
        val btn = findViewById<Switch>(R.id.switch1)
  
        // set the switch to listen on checked change
        btn.setOnCheckedChangeListener { _, isChecked ->
  
            // if the button is checked, i.e., towards the right or enabled
            // enable dark mode, change the text to disable dark mode
            // else keep the switch text to enable dark mode
            if (btn.isChecked) {
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
                btn.text = "Disable dark mode"
            } else {
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
                btn.text = "Enable dark mode"
            }
        }
    }
}

chevron_right


Output: Run on Emulator




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.