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

ترجمه و تالیف : پوریا شریفی
تاریخ انتشار : 04 خرداد 99
خواندن در 2 دقیقه
دسته بندی ها : اندروید

اخیرا شاهد اپلیکیشن‌هایی بوده‌ایم که از 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 تغییر کند. اگر اپلیکیشن را اجرا کنید می‌بینید که چگونه براساس تنظیمات دستگاه رفتار خواهد کرد.

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

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

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

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

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

پشتیبانی اندروید از 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' اضافه کنید.

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

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

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

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

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

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

پشتیبانی اندروید از 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 اپلیکیشن را تغییر دهید.

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

همچنین شما می‌توانید از مخزن گیت‌هاب این پروژه استفاده کنید.

امیدوارم این مقاله در درک مفهوم theme روشن و تاریک برای شما مفید بوده باشه.

منبع

گردآوری و تالیف پوریا شریفی

ابتدا که با برنامه‌نویسی آشنا شدم به سمت php و طراحی وب رفتم، بعد از اون به توسعه‌ی اندروید علاقه‌مند شدم و تقریبا ۲ سال است که مشغول به برنامه‌نویسی اندروید هستم، همچنین عاشق یادگیری چیزهای جدید هستم.