Cara Membuat Dark Mode di Aplikasi Android

Tutorial Cara Membuat Dark Mode atau Dark Theme di Aplikasi Android

Halo semuanya. Bagaimana kabar kalian hari ini? saya harap kalian baik-baik saja. Pada artikel kali ini, saya ingin membagikan sebuah tutorial android tentang dark mode. Sebelum kita memulai ke tutorial, saya akan membagikan sedikit info tentang artikel ini.

Dark mode atau dark theme adalah tampilan user interface dengan pencahayaan rendah yang menampilkan sebagian besar permukaan aplikasi berwarna gelap. Tema gelap mengurangi luminance yang dipancarkan oleh layar perangkat. Dark theme meembantu meningkatkan ergonomi visual dengan mengurangi ketegangan mata, menyesuaikan kecerahan dengan kondisi pencahayaan dan memfasilitasi penggunaan layar di lingkungan yang gelap. Dan tentunya, mode ini akan menghemat daya baterai.

Jadi, pada tutorial ini kalian akan belajar bagaimana cara membuat dark mode atau dark theme pada aplikasi android dengan menggunakan widget switch.

- Advertisement -

Tutorial Cara Membuat Tema Dark Mode di Aplikasi Android

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:Dark Mode
Package Name:com.androidrion.darkmode
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam projek ini:

  1. activity_main.xml

Daftar file java activity yang digunakan dalam projek ini:

  1. MainActivity.java

Berikut ini adalah langkah-langkah dalam pembuatan aplikasi android Dark Mode.

Styles File

Agar kita bisa mengubah mode biasa menjadi mode gelap (dark), kita harus mengubah theme dari aplikasi. Ubahlah theme menjadi DayNight pada file styles.xml. Berikut ini adalah kode lengkap untuk file styles.xml

app/res/values/styles.xml

<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>

XML Layout File

Setelah mengubah theme pada projek, sekarang saatnya kita mendesain aplikasi. Untuk mengubah menjadi dark mode di aplikasi, Kita membutuhkan widget yang namanya switch. Tambahkan widget switch pada layout linear. tambahkan atribut id pada widget switch. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textDarkMode"
        style="@style/TextAppearance.AppCompat.Headline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="@string/app_name" />

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/switch_dark_mode"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Java Activity File

Sekarang saatnya kita memprogram widget yang telah kita pasang pada file xml layout. Tambahkan operasi boolean yang variabel false pada file MainActivity.java. Lalu panggil widget yang gunakan tadi. Setelah itu aktifkan setOnCheckedListener pada SwitchCompat. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.darkmode/MainActivity.java

[sociallocker id=”1410″]

package com.androidrion.darkmode;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatDelegate;
import androidx.appcompat.widget.SwitchCompat;
import android.widget.CompoundButton;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    public static boolean mIsNightMode = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        SwitchCompat switchCompat = findViewById(R.id.switch_dark_mode);

        switchCompat.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                mIsNightMode = b;
                int delayTime = 200;

                compoundButton.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        if (mIsNightMode) {
                            getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_YES);
                        } else {
                            getDelegate().setLocalNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                        }
                    }
                }, delayTime);

            }
        });
    }
}

[/sociallocker]

Run ‘app’

Sekarang, kalian bisa menjalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian melihat ada tombol switch di tengah-tengah layar aplikasi. Ketika kalian mengklik tombol tersebut, maka aplikasi berubah menjadi gelap. Jika kode di atas tidak terjadi kesalahan, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

TUTORIAL VIDEO

AKHIR KATA

Itulah tadi tutorial singkat tentang bagaimana cara membuat dark theme atau dark mode di aplikasi android. Tutorial di atas sangat lah mudah untuk di kerjakan karena tidak begitu banyak kode yang digunakan.

Jika kalian mengalami masalah dalam tutorial ini, silahkan berkomentar di bawah pada artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima kasih.

Download Project

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

[sociallocker id=”1406″]

[/sociallocker]

- Advertisement -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.