سورس ویژه پخش فیلم و سریال با درگاه زرین پال

آموزش افزودن رابط کاربری تیره و روشن با قابلیت سوییچ

اردیبهشت 11, 1399| سنا عبادی
آموزش افزودن رابط کاربری تیره dark ui به اپلیکیشن با قابلیت سوئیچ | وبلاگ مارکت اندروید ریور

در این مقاله آموزش گام به گام افزودن رابط کاربری تیره و روشن با قابلیت سوییچ بین دو حالت منتشر شده است

در پست افزودن تم تیره به اپلیکیشن اندرویدی از تم تیره و ویژگی های آن گفتیم پس اگر تا امروز این مقاله رو مطالعه نکردید لازم است برای پیاده سازی از طریق لینک بالا مقاله مرتبط با این مقاله رو مطالعه کنید. در این مقاله قرار هست با انجام چند گام ساده بین دو تم موجود در اپلیکیشن یعنی تم تیره و روشن , اصلاحا Switch کنیم ! حتما میدونید کدنویسی با یه ماگ پر از قهوه چقددددر بیشتر میچسبه! پس هرکاری لازمه انجام بده و با من در ادامه این مقاله همراه شو..

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

گام اول :

اضافه کردن کتابخانه material به dependencies های پروژه :

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

گام دوم :

تغییر Theme در فایل style.xml به این صورت که در بخش parent از MaterialComponents استفاده کنید .

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

گام سوم :

ایجاد یک لایه ی طراحی برای اپلیکیشن . به فایل layout ها بروید و لایه ایی که قصد طراحی آن را دارید باز کنید و کد های زیر را در آن قرار دهید :

<?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/colorBackground"
    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:layout_margin="10dp"
        android:text="@string/switch_theme"
        android:textColor="@color/colorText"
        android:checked="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:switchPadding="10dp" />


    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="@string/theme_type"
        android:textColor="@color/colorText"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constrainedHeight="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/switch_theme"
         />


    <androidx.appcompat.widget.AppCompatImageView
        android:id="@+id/image_view"
        android:layout_width="0dp"
        android:layout_height="200dp"
        app:srcCompat="@drawable/ic_wb_sunny"
        android:layout_marginTop="30dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text_view" />


</androidx.constraintlayout.widget.ConstraintLayout>

یک خروجی از اپلیکیشن بگیرید باید همچین تصویری را داشته باشید :

تم روشن اپلیکیشن

گام چهارم :

به اکتیویتی خود بازگردید و برای SwitchMaterial ایی که در لایه داشتید به این صورت کد بنویسید :

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

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

بسیار ساده برای سوییچ یک کلیک لیسنر تعریف کردیم و شرطی مبنی بر اینکه اگر فعال بود روی لاینت مود باشد و در غیر این صورت دارک مود باشد (در مقاله ایی که در ابتدا معرفی کردیم با این خط کد آشنا خواهید شد)

همچنین بخوانید :  آموزش رفع خطا NullPointerException در اندروید استدیو

قدم پنجم :

چند Resource که شامل Strings , colors و drawable برای بخش تیره و روشن به صورت مجزا تعریف میکنیم . ساخت values-night را در بخش قبلی توضیح دادیم ولی در این بخش نیز به آن اشاره خواهیم کرد .

ساخت colors و انتخاب NightMode ادامه در عکس بعدی

برای string ها نیز در آن فایل values-night یک فایل ایجاد کنید . این کار را برای drawable ها نیز می توانید تکرار کنید . پس در ادامه ما این resource ها را خواهیم داشت :

نکته : نام دو ریسورس در دو فایل night و light باید یکی باشد و فقط مقدار آنها متفاوت باشد .

Colors.xml (Light)

<!--?xml version="1.0" encoding="UTF-8"?-->
<resources>
    <color name="primaryColor">#00b8d4</color>
    <color name="primaryLightColor">#62ebff</color>
    <color name="primaryDarkColor">#0088a3</color>
    <color name="secondaryColor">#ffd600</color>
    <color name="secondaryLightColor">#ffff52</color>
    <color name="secondaryDarkColor">#c7a500</color>
    <color name="primaryTextColor">#000000</color>
    <color name="secondaryTextColor">#000000</color>


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

Colors.xml (Night)

<!--?xml version="1.0" encoding="UTF-8"?-->
<resources>
    <color name="primaryColor">#b71c1c</color>
    <color name="primaryLightColor">#f05545</color>
    <color name="primaryDarkColor">#7f0000</color>
    <color name="secondaryColor">#37474f</color>
    <color name="secondaryLightColor">#62727b</color>
    <color name="secondaryDarkColor">#102027</color>
    <color name="primaryTextColor">#ffffff</color>
    <color name="secondaryTextColor">#ffffff</color>


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

Strings.xml (Light)

<resources>
    <string name="app_name">LightDarkTheme</string>
    <string name="light_theme_enabled">Light Theme Enabled</string>
    <string name="theme_type">Dark Theme Enabled</string>
    <string name="switch_theme">Switch theme</string>
</resources>

Strings.xml (Night)

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

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

drawable.xml (Light)

<vector android:height="24dp" android:tint="#E9B700"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M6.76,4.84l-1.8,-1.79 -1.41,1.41 1.79,1.79 1.42,-1.41zM4,10.5L1,10.5v2h3v-2zM13,0.55h-2L11,3.5h2L13,0.55zM20.45,4.46l-1.41,-1.41 -1.79,1.79 1.41,1.41 1.79,-1.79zM17.24,18.16l1.79,1.8 1.41,-1.41 -1.8,-1.79 -1.4,1.4zM20,10.5v2h3v-2h-3zM12,5.5c-3.31,0 -6,2.69 -6,6s2.69,6 6,6 6,-2.69 6,-6 -2.69,-6 -6,-6zM11,22.45h2L13,19.5h-2v2.95zM3.55,18.54l1.41,1.41 1.79,-1.8 -1.41,-1.41 -1.79,1.8z"/>
</vector>

drawable.xml (Night)

<vector android:height="24dp" android:tint="#E9E9E2"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" android:pathData="M6.76,4.84l-1.8,-1.79 -1.41,1.41 1.79,1.79 1.42,-1.41zM4,10.5L1,10.5v2h3v-2zM13,0.55h-2L11,3.5h2L13,0.55zM20.45,4.46l-1.41,-1.41 -1.79,1.79 1.41,1.41 1.79,-1.79zM17.24,18.16l1.79,1.8 1.41,-1.41 -1.8,-1.79 -1.4,1.4zM20,10.5v2h3v-2h-3zM12,5.5c-3.31,0 -6,2.69 -6,6s2.69,6 6,6 6,-2.69 6,-6 -2.69,-6 -6,-6zM11,22.45h2L13,19.5h-2v2.95zM3.55,18.54l1.41,1.41 1.79,-1.8 -1.41,-1.41 -1.79,1.8z"/>
</vector>

خب کافیست که پروژه را اجرا کنید و با فعال یا غیر فعال کردن آن دکمه ی switch شما میتوانید به راحتی بین تم دارک و لایت جا به جا شوید .

برای دسترسی به سورس کد پروژه , می توانید به صفحه ی اندروید ریور در گیت هاب مراجعه کنید .

همچنین بخوانید :  آموزش افزودن ادموب در Basic4android

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

سنا عبادی نویسنده مقاله

توسعه دهنده موبایل به ویژه سیستم عامل اندروید ، هم بنیانگذار اندروید ریور و در تلاش برای تحقق یک رویا..



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

مقالات مرتبط را بخوانید :


سورس های اندروید شامل تخفیف رو ببین !

به این مقاله امتیاز دهید :
5/5 (1 Review)
  خرید سورس های حرفه ای بازی و اپلیکیشن اندروید

  تخفیف ها و اخبار ویژه رو در تلگراممون دنبال کن :)

دسته‌ها: آموزش برنامه نویسی اندروید

دیدگاهتان را بنویسید

راهنما : برای نوشتن موارد مختلف در دیدگاه می توانید از راهنمای نگارش اندروید ریور استفاده کنید : نگارش کد کوتاه `your code`
نگارش کد بلند یا نگارش بخش عمده یک سورس کد :
[sourcecode lang="your code language"] your code here [/sourcecode]