منوهای نصب در پنل مدیریت

ایجاد dark mode در اندروید

ایجاد dark mode در اندروید

ایجاد dark mode در اندروید 10 و بالاتر

از api 29 به بعد سیستم عامل دارای dark mode پیشفرض می باشد که با فعال سازی آن برنامه های پیشفرض و اپلیکیشن هایی که از dark mode پشتیبانی کنند وارد این حالت میشوند.

ساده ترین روش برای پیاده سازی و ایجاد dark mode در اندروید 10 و بالاتر این است که اجازه بدهیم سیستم اندروید به طور خودکار رنگ های برنامه مارو تغییر دهد و حالت شب را در برنامه اعمال کند.

برای این کار کافیست فایل styles.xml را باز کرده و کد زیر را به قسمت AppTheme اضافه کنیم.

<item name="android:forceDarkAllowed">true</item>

در این صورت هر زمان در سیستم عامل حالت شب فعال شود، روی برنامه ما نیز اعمال می گردد.

چرا نباید از این روش استفاده کنیم؟

حالات مختلفی وجود دارد که ممکن است دارک مود پیشفرض اعمال شده رو اپلیکیشن ما بدون مشکل و به خوبی اجرا گردد. اما حالات بسیاری وجود دارد که رنگ های تغییر یافته، UI و UX ما را خراب کنند و نتیجه حاصل شده مورد انتظار ما نباشد. 

راه حل چیست؟

بهترین راه حل این است که از روش ساده و استانداردی که در این مقاله آموزش داده می شود برای ایجاد dark mode در اندروید استفاده کنید و به آسانی حالت شب زیبا و مناسبی را برای اپلیکیشن خود طراحی کنید.

در اینجا تنها تفاوتی که بین حالت روز و شب وجود دارد رنگ ها می باشند بنابراین باید دو دسته رنگ داشته باشیم. یک دسته برای حالت روز و یک دسته برای حالت شب.

ایجاد dark mode در اندروید

برای ایجاد dark mode در اندروید باید از کتابخانه متریال دیزاین و تم هایی که حالت DayNight دارند استفاده کنیم. سپس رنگ های مورد نظر را در دو فایل مجزا قرار میدهیم.

با کمک فایل های ایجاد شده، سیستم عامل به طور خودکار تشخیص خواهد داد که برای هر حالت از کدام دسته از رنگ ها استفاده کند.

اضافه کردن کتابخانه متریال دیزاین

برای این کار کافیست کد زیر را به فایل build.gradle بخش dependencies اضافه کنیم

api 'com.google.android.material:material:1.1.0'

تغییر تم برنامه

حال باید وارد فایل styles.xml شویم و AppTheme را پیدا کنیم.

سپس در قسمت parent یکی از تم هایی را وارد کنیم در آنها DayNight وجود داشته باشد.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

دو حالته کردن رنگ های برنامه

روی values راست کلیک میکنیم و از مسیر New و سپس Values Resource File یک فایل جدید ایجاد میکنیم. 

مانند تصویر زیر نام فایل را colors و قسمت دایرکتوری را values-night قرار میدهیم.

انتخاب رنگ در ایجاد dark mode در اندروید

اکنون مشاهده می کنید که دو فایل با نام colors.xml وجود دارد و مشخص است که کدام برای حالت روز و کدام برای حالت شب می باشد.

اضافه کردن رنگ ها

پیش از این گفتیم که هر رنگ دارای دو حالت روز و شب خواهد بود. بنابراین در هرکدام از دو فایل colors رنگ هایی که قرار میدهیم دارای نام های یکسان اما مقادیر متفاوت خواهند بود. برای نمونه میتوانید موارد زیر را مشاهده کنید.

colors.xml

<color name="cardBg">#fff</color>
<color name="backgroundMain">#FAFAFA</color>
<color name="shadow">#eee</color>

colors.xml (night)

 #30475e
#222831
#0277BD
مشاهده میکنید که نام رنگ ها یکسان اما مقدار آنها متفاوت می باشد.

طراحی اکتیویتی

میخواهیم اکتیویتی مورد نظر را مانند تصویر زیر طراحی کنیم و با کمک رنگ های انتخاب شده حالت شب نیز مانند تصویر دوم به طور خودکار ایجاد می شود.

ایجاد dark mode در اندروید استودیو برای صفحه لاگین
نمایش dark mode مربوط به صفحه لاگین در اندروید

با کد زیر میتوانید صفحه نمایش داده شده در تصویر بالا را طراحی کنید.

توجه داشته باشید که در این قسمت از آیکن ها اشکالی استفاده شده است که بدست آوردن یا طراحی آنها کار دشواری نبوده و بر عهده خودتان گذاشته شده است.

<?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"
    tools:context=".MainActivity"
    android:background="@color/backgroundMain">

    <androidx.appcompat.widget.AppCompatImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:src="@drawable/lightmode"
        android:padding="10dp"
        android:id="@+id/mode"/>

    <androidx.cardview.widget.CardView
        android:id="@+id/card"
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:cardCornerRadius="20dp"
        android:layout_marginTop="150dp"
        app:cardBackgroundColor="@color/cardBg">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="20dp">
            <com.google.android.material.textview.MaterialTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Login"
                android:layout_marginBottom="30dp"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                android:fontFamily="@font/myfont"
                android:layout_gravity="center"
                />

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="260dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:hint="email@example.com"
                android:gravity="center"
                android:background="@android:color/transparent"/>

            <View
                android:layout_width="260dp"
                android:layout_height="1dp"
                android:layout_gravity="center"
                android:background="#ccc"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="20dp"/>

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="260dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:hint="password"
                android:gravity="center"
                android:background="@android:color/transparent"/>
            <View
                android:layout_width="260dp"
                android:layout_height="1dp"
                android:layout_gravity="center"
                android:background="#ccc"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="20dp"/>

            <com.google.android.material.textview.MaterialTextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="@string/forget"
                android:layout_marginBottom="20dp"/>

            <com.google.android.material.button.MaterialButton
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:insetBottom="0dp"
                android:insetTop="0dp"
                app:cornerRadius="0dp"
                android:text="Login"
                app:backgroundTint="@color/colorAccent"
                android:textColor="#fff"
                />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/or"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/card"
        android:text="Or"
        android:gravity="center"
        android:layout_margin="20dp"
        android:textSize="20sp"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:textColor="#999" />

    <com.google.android.material.textview.MaterialTextView
        android:id="@+id/info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/or"
        android:text="Login with your social network"
        android:gravity="center"
        android:layout_margin="10dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:textSize="15sp"
        />

    <LinearLayout
        android:id="@+id/social"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@id/info"
        android:gravity="center"
        android:layout_margin="20dp"
        >
        <androidx.appcompat.widget.AppCompatImageButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/facebook"
            android:background="@drawable/circle"
            android:layout_margin="5dp"
            />

        <androidx.appcompat.widget.AppCompatImageButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/google_outlined"
            android:background="@drawable/circle"
            android:layout_margin="5dp"
            />

        <androidx.appcompat.widget.AppCompatImageButton
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:src="@drawable/twitter"
            android:background="@drawable/circle"
            android:layout_margin="5dp"
            />
    </LinearLayout>

    <com.google.android.material.textview.MaterialTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/account"
        app:layout_constraintTop_toBottomOf="@id/social"
        app:layout_constraintBottom_toBottomOf="parent"
        android:gravity="center"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:textSize="15sp"
        android:textColor="#777"/>

دکمه تغییر تم

در کد بالا یک دکمه برای تغییر تم با کمک یک ایمیج باتن و دو آیکن قرار داده شده است. 

در اکتیویتی با کمک این دکمه و sharedpreferences تم برنامه را تغییر داده و ذخیره میکنیم.

ایجاد Theme Helper

در این قسمت یک فایل جدید از نوع Object می سازیم و کدی در آن قرار میدهیم که با کمک آن کد و تابعی که تعریف میکنیم بتوانیم در هر قسمت از برنامه تم برنامه را به حالت روز یا شب و … تغییر دهیم. بنابراین یک فایل جدید با نام ThemeHelper.kt از نوع Object می سازیم و کد زیر را در آن قرار میدهیم.
package net.hetbo.tutorials

import androidx.appcompat.app.AppCompatDelegate

object ThemeHelper {
private const val lightMode = "light"
private const val darkMode = "dark"
private const val batterySaverMode = "battery"
private const val default = "default"

fun applyTheme(theme: String) {
when (theme) {
lightMode -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
darkMode -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
batterySaverMode -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY)
default -> AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM)
}
}
}
 

تغییر تم و ذخیره سازی حالت برنامه

حال به اکتیویتی مورد نظر خود رفته و با کمک شیردپریفرنسز و دکمه ای که ایجاد کردیم بین حالت روز و شب سوییچ میکنیم.
val pref = getSharedPreferences("MyAppPrefs", Context.MODE_PRIVATE)
val theme = pref.getBoolean("lightTheme", true)
mode.setImageResource(if (theme) R.drawable.lightmode else R.drawable.darkmode)
ThemeHelper.applyTheme(if (theme) "light" else "dark")

mode.setOnClickListener {
val tm = if (theme) "dark" else "light"
pref.edit().putBoolean("lightTheme", !theme).apply()
ThemeHelper.applyTheme(tm)
}

سازگاری با اندروید 10

در این آموزش ما تغییر تم را به صورت دو حالته قرار دادیم اما برای تجربه کاربری بهتر میتوان یک حالت دیگر تحت عنوان حالت خودکار اضافه کرد که در آن صورت تم سیستم را دنبال کند و در حالت شب به حالت شب برود و بالعکس.

1 پاسخ به "ایجاد dark mode در اندروید"

  1. خیلی عالی. ببخشید من این کدها رو تو جاوا زدم،وقتی دکمه تغییر تم رو میزنم، میخوام تم با انیمیشن عوض بشه. اینجوری فک کنم کاربر پسند نیست.باید چیکار کنم؟

ارسال یک پیام

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Hetbo.net 2016 - 2020