پشتیبانی اندروید از theme تاریک

اخیرا شاهد اپلیکیشن‌هایی بوده‌ایم که از theme تاریک استفاده کرده‌اند. همچنین از اندروید 10+ که رسما از theme تاریک پشتیبانی می‌کنند، بسیاری از توسعه‌دهنده‌ها می‌خواهند این ویژگی را در اپلیکیشن خود پیاده‌سازی کنند. بنابراین در این مقاله یاد‌می‌گیریم که چگونه اپلیکیشن‌های ما theme تاریک را با استفاده از کتابخانه‌های google matrial design پشتیبانی کنند.

ابتدا کتابخانه‌ی matrial را به build.gradle اضافه کنید و یک بار پروژه‌ی خود را build کنید.

//Material design
implementation 'com.google.android.material:material:1.1.0'

اکنون theme پیش‌فرض اپلیکیشن خود را باید در style.xml تغییر دهید و parent را به matrialComponent DayNight تغییر دهید.

<resources>

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

</resources>

با انجام این مراحل، اپلیکیشن شما از Day Night theme به صورت پیش‌فرض براساس تنظیمات دستگاه کاربر پشتیبانی می‌کند (اندروید 10).

اکنون با اجرای اپلیکیشن اگر دستگاه شما اندروید 10 باشد، اپلیکیشن شما براساس theme سیستم تغییر میکند. اما اگر از نسخه‌ی اندروید پایین تر از 10 استفاده می‌کنید باید به صورت دستی یک toggle در تنظیمات اپلیکیشن قرار‌دهید که با استفاده از آن، theme تغییر کند. اگر اپلیکیشن را اجرا کنید می‌بینید که چگونه براساس تنظیمات دستگاه رفتار خواهد کرد.

همانطور که می‌بینید textview و پیش‌زمینه به طور خودکار براساس آن تنظیمات رنگشان تغییر کرده‌ است، حتی بدون اینکه مقداری به آن‌ها اختصاص دهیم. این جادوی کتابخانه‌ی جدید matrialComponenet است.

اکنون همانطور که theme تاریک را در اپلیکیشن فعال کردیم، یاد گرفتیم که چگونه می‌توانیم رنگ‌های پیش‌فرض را براساس تنظیمات theme تغییردهیم.

آنچه که نیاز داریم انجام دهیم:

ما به آیکون های سفید در هنگام استفاده از theme تاریک و به آیکون‌های مشکی در هنگام استفاده از theme روشن نیاز داریم.
نیاز داریم که تنظیمات theme اپلیکیشن را دستی و بدون متکی شدن به تنظیمات سیستم تغییردهیم.
نیاز داریم رنگ متن را براساس theme انتخاب شده تغییردهیم.
نیاز داریم که تصویر داخل imageview را براساس تنظیمات theme تغییر‌دهیم.

این ui قرار است برای اپلیکیشن ساخته‌شود. که از switch, imageview و textview استفاده شده است.

<?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:padding="10dp"
    tools:context=".MainActivity">

    <com.google.android.material.switchmaterial.SwitchMaterial
        android:id="@+id/switch_theme"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Switch theme"
        app:switchPadding="10dp"
        android:layout_margin="10dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_margin="10dp"
        app:layout_constraintTop_toBottomOf="@+id/switch_theme"
        app:layout_constraintBottom_toTopOf="@+id/text_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/text_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHeight_default="wrap"
        android:layout_margin="10dp"
        android:text="Light Theme Enabled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

اکنون داخل کلاس اکتیویتی، یک 'checkedChangedListener' به switch برای تغییر theme به صورت برنامه‌نویسی در زمان اجرا اضافه می‌کنیم.

switch_theme.setOnCheckedChangeListener { buttonView, isChecked ->
            if (isChecked) {
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO)
            } else {
                AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
            }
        }

با این پیکربندی، اگر کاربر حالت switch را از off به on تغییردهد، theme اپلیکیشن به روشن تغییرداده می‌شود. و اگر از on به off تغییرکند به theme تاریک تغییر داده می‌شود.

اکنون خواهیم دید که چگونه منابع مختلفی را هم به theme تاریک و هم روشن اضافه کنیم.

ابتدا، یک فایل 'Resource' با کلیک راست کردن برروی مسیر value > new > 'value resource file' اضافه کنید.

اکنون یک پنجره برای ساختن یک فایل resource جدید باز خواهد شد. نام آن‌را colors بگذارید و گزینه‌ی night mode را انتخاب کنید در سمت راست حالت آنرا به night تغییر دهید، که در تصاویر زیر می‌بینید:

اکنون ok را انتخاب کنید.

همانطور که می‌بینید color.xml جدید ساخته شده است. که این برای ارائه‌ی همه‌ی پیکربندی‌های color به ما اگر theme تاریک فعال باشد استفاده می‌شود. در غیر این صورت، اپلیکیشن به صورت خودکار color.xml دیگر را برای theme روشن انتخاب می‌کند.

با این روش می‌توانیم منابع مختلف را برای هر دو theme اینجاد کنیم. مانند drawable, strings, dimens و غیره.

اکنون به همین ترتیب string.xml و drawable را برای حالت night mode ایجاد کنید.

(Strings (Light theme:

<resources>
    <string name="app_name">DarkThemeDemo</string>
    <string name="theme_type">Light Theme Enabled</string>
</resources>

(Strings (Dark theme:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="theme_type">Dark Theme Enabled</string>
</resources>

(Icon (Light them:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>

(Icon (Dark them:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</vector>

(Colors.xml (Light them:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="colorPrimaryDark">#3700B3</color>
    <color name="colorAccent">#03DAC5</color>

    <color name="colorBackground">#FFFFFF</color>
    <color name="colorText">#000000</color>
</resources>

(Colors.xml (Dark them:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#202020</color>
    <color name="colorPrimaryDark">#202020</color>
    <color name="colorAccent">#03DAC5</color>

    <color name="colorBackground">#000000</color>
    <color name="colorText">#ffffff</color>
</resources>

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

پس از قرار دادن همه‌ی منابع در پروژه‌ی خود. هنگامی که اپلیکیشن را اجرا کنید می‌توانید با تغییر حالت switch ،theme تغییر می‌کند. بنابراین می‌توانید با این عمل در هنگام اجرا براساس assets های ارائه شده theme اپلیکیشن را تغییر دهید.