Dark Theme is available in Android 10 or higher. The dark theme applies to both system UI and apps running on the device. Dark Theme has many advantages.
- It can reduce power usage but it depends on the device screen.
- Improves visibility for users with low vision and those who are sensitive to bright light.
- Makes it easier for anyone to use a device in a low-light environment.
In this tutorial, we will learn how to set a dark theme in android. Please look at the demo
1- Open the Android Studio and create a new project (Select Blank Template).
2- Go to the build.gradle.xml file and make sure, you have the below dependencies, if not then add them and sync the Gradle.
dependencies {
implementation 'androidx.appcompat:appcompat:1.4.1'
implementation 'com.google.android.material:material:1.5.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
testImplementation 'junit:junit:'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}3- Navigate to res->values and open the colors.xml file. Add the below code. This color file will use for colors during the daytime
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<!-- App colors -->
<color name="color_bg">#FFFFFF</color>
<color name="color_bg_profile">#9D07E0</color>
<color name="color_tv">#49414D</color>
<color name="color_bubble_one">#FF0000</color>
<color name="color_bubble_two">#6ACCD0</color>
<color name="color_bubble_three">#1D601B</color>
<color name="color_bubble_four">#D06313</color>
<color name="color_btn">#07A6E0</color>
</resources>4- Navigate to res->right-click and create a new android resource file called colors.xml in values-night. This file will use for night mode
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- App colors -->
<color name="color_bg">#121212</color>
<color name="color_bg_profile">#4005F2C4</color>
<color name="color_tv">#FFFFFF</color>
<color name="color_bubble_one">#FF0000</color>
<color name="color_bubble_two">#6ACCD0</color>
<color name="color_bubble_three">#1D601B</color>
<color name="color_bubble_four">#D06313</color>
<color name="color_btn">#1D1D1D</color>
</resources>Right now we have two colors.xml files. for default colors, we have a file in the values folder and for night mode we have a color file in values-night.
5- We will have two themes.xml files for day and night modes. Navigate to res->values->right-click and create a new android resource file called themes.xml and add the below code
<style name="Theme.DarkThemeExample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_500</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>6– Create another themes.xml file in the values-night folder or copy the themes.xml file from the values folder and paste it into this folder and make changes like this.
<style name="Theme.DarkThemeExample" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/purple_200</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/black</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/teal_200</item>
<item name="colorSecondaryVariant">@color/teal_200</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>7- The folder hierarchy should be like this
8– Open the strings.xml file and add the below code
<resources>
<string name="app_name">DarkThemeExample</string>
<string name="str_wel_to_dark_theme">Welcome To Dark Theme Example</string>
<string name="str_four_circle">Four circle with four different color</string>
<string name="str_switch_theme">Switch Theme</string>
</resources>9- Go to res->layout and open the activity_main.xml file and add the below code.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/color_bg"
tools:context=".MainActivity">
<View
android:id="@+id/viewProfile"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginTop="50dp"
android:background="@drawable/bg_profile_pic"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/imgProfile"
android:layout_width="140dp"
android:layout_height="140dp"
android:src="@drawable/app_logo"
app:layout_constraintBottom_toBottomOf="@+id/viewProfile"
app:layout_constraintEnd_toEndOf="@+id/viewProfile"
app:layout_constraintStart_toStartOf="@+id/viewProfile" />
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="@string/str_wel_to_dark_theme"
android:textColor="@color/color_tv"
android:textSize="40sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/viewProfile" />
<View
android:id="@+id/bubble1"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginTop="10dp"
android:background="@drawable/bubble_one"
app:layout_constraintEnd_toStartOf="@+id/bubble2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tvTitle" />
<View
android:id="@+id/bubble2"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginStart="5dp"
android:layout_marginEnd="5dp"
android:background="@drawable/bubble_two"
app:layout_constraintBottom_toBottomOf="@+id/bubble1"
app:layout_constraintEnd_toStartOf="@+id/bubble3"
app:layout_constraintStart_toEndOf="@+id/bubble1"
app:layout_constraintTop_toTopOf="@+id/bubble1" />
<View
android:id="@+id/bubble3"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_marginEnd="5dp"
android:background="@drawable/bubble_three"
app:layout_constraintBottom_toBottomOf="@+id/bubble1"
app:layout_constraintEnd_toStartOf="@+id/bubble4"
app:layout_constraintStart_toEndOf="@+id/bubble2"
app:layout_constraintTop_toTopOf="@+id/bubble1"
android:layout_marginRight="5dp" />
<View
android:id="@+id/bubble4"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="@drawable/bubble_four"
app:layout_constraintBottom_toBottomOf="@+id/bubble1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/bubble3"
app:layout_constraintTop_toTopOf="@+id/bubble1" />
<TextView
android:id="@+id/tvTitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="@string/str_four_circle"
android:textColor="@color/color_tv"
android:textSize="40sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bubble1" />
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/btnSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@drawable/bg_btn"
android:text="@string/str_switch_theme"
android:textAllCaps="false"
android:textColor="@color/white"
android:textSize="20sp"
android:onClick="onClickBtn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tvTitle2" />
</androidx.constraintlayout.widget.ConstraintLayout>10- Open the MainActivity.java file and add the below code.
package com.example.darkthemeexample;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.app.AppCompatDelegate;
import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
/**
* This method will use for toggle the dark mode theme. If theme is in day mode then will will
* switch to night theme and if in night mode, then will switch to day mode.
* @param view button view
*/
public void onClickBtn(View view){
if (AppCompatDelegate.getDefaultNightMode() == AppCompatDelegate.MODE_NIGHT_YES) {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
} else {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
}
}
}Download the source code
Thanks for reading the tutorial. Subscribe to my YouTube channel. Like and Share my Facebook page with your friends.