การเพิ่มสีแบบไดนามิกให้กับแอป

1. ก่อนเริ่มต้น

ใน Codelab นี้ คุณจะได้อัปเดตแอปเริ่มต้น ซึ่งเป็นแอปเครื่องคำนวณทิปเพื่อใช้ฟีเจอร์ใหม่ๆ ในดีไซน์ Material 3 ซึ่งทำให้อินเทอร์เฟซผู้ใช้ของแอปพลิเคชันมีธีมแบบไดนามิกโดยอิงตามวอลเปเปอร์ของผู้ใช้ ด้านล่างนี้คือภาพหน้าจอของแอปพลิเคชันที่ใช้สีแบบไดนามิก นอกจากนี้ คุณยังสามารถตรวจสอบสถานการณ์เพิ่มเติมบางอย่างที่ช่วยให้คุณควบคุมวิธีการใส่สีได้ด้วย

ข้อกำหนดเบื้องต้น

นักพัฒนาแอปควรเป็น

• ทำความคุ้นเคยกับแนวคิดธีมพื้นฐานใน Android
• สะดวกกับการแก้ไขธีมของแอป

สิ่งที่คุณจะได้เรียนรู้

• วิธีแยกความแตกต่างระหว่างธีมของ Material Components กับ Material 3
• วิธีอัปเดตธีมเป็น Material 3
• วิธีสร้างธีมโดยใช้เครื่องมือของเราและนำไปใช้
• แอตทริบิวต์ของธีมเกี่ยวข้องกันอย่างไร

สิ่งที่ต้องมี

• คอมพิวเตอร์ที่ติดตั้ง Android Studio ไว้
• รหัสสำหรับแอปพลิเคชันเวลาทิป https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution

2. ภาพรวมแอปเริ่มต้น

แอป Tip Time เป็นแอปเครื่องคำนวณทิปที่มีตัวเลือกในการปรับแต่งทิป ซึ่งเป็นหนึ่งในแอปตัวอย่างจากข้อมูลเบื้องต้นเกี่ยวกับ Android ในหลักสูตรการฝึกอบรม Kotlin

3. การอัปเดตการขึ้นต่อกันของ Gradle

ก่อนที่เราจะอัปเดตธีมจริงและใช้สีแบบไดนามิก จะต้องมีการเปลี่ยนแปลงบางอย่างในไฟล์ create.gradle สำหรับแอปพลิเคชันของคุณ

ในส่วนทรัพยากร Dependency ให้ตรวจสอบว่าไลบรารี Material เป็น 1.5.0-alpha04 ขึ้นไป ดังนี้

dependencies {
    // ...
    implementation 'com.google.android.material:material:<version>'
}

ในส่วน Android ให้เปลี่ยน compileSdkVersion และ targetSdkVersion

เป็น 31 ขึ้นไป:

android {
    compileSdkVersion 31
    // ...

    defaultConfig {
        // ...
        targetSdkVersion 31
    }
}

วิธีการเหล่านี้จะสมมติว่าเป็นแอปที่มีทรัพยากร Dependency ที่ค่อนข้างใหม่ สำหรับแอปที่ยังไม่ได้ใช้ Material หรือเวอร์ชันที่ใหม่กว่า โปรดตรวจสอบวิธีการในเอกสารประกอบการเริ่มต้นใช้งานของคอมโพเนนต์ดีไซน์ Material สำหรับ Android

เมื่อใดก็ตามที่คุณได้สร้างธีม ให้เปลี่ยนการอ้างอิงของ Theme.MaterialComponents.* เป็น Theme.Material3.* บางสไตล์ยังไม่มีรูปแบบใหม่ในเนมสเปซ Material3 แต่คอมโพเนนต์ส่วนใหญ่จะยังคงรับค่าการจัดรูปแบบใหม่เมื่ออัปเดตธีมหลักเป็น Theme.Material3.* เราจะเห็นได้ที่ด้านล่างว่าตอนนี้ปุ่มต่างๆ จะมีการจัดรูปแบบใหม่แบบโค้งมน

สิ่งเดียวที่เปลี่ยนแปลงในไฟล์ธีมด้านล่างนี้คือธีมหลัก เราจะแทนที่ธีมนี้อย่างสมบูรณ์ในอีกสักครู่ แอตทริบิวต์สีบางอย่างล้าสมัยและสไตล์ที่กำหนดเองบางอย่างที่เราสร้างขึ้นตอนนี้เป็นแอตทริบิวต์มาตรฐานใน Material3 แต่เราอยากให้คุณ

themes.xml

<style name="Theme.TipTime" parent="Theme.Material3.Light">
   <!-- Primary brand color. -->
   <item name="colorPrimary">@color/green</item>
   <item name="colorPrimaryVariant">@color/green_dark</item>
   <item name="colorOnPrimary">@color/white</item>
   <!-- Secondary brand color. -->
   <item name="colorSecondary">@color/blue</item>
   <item name="colorSecondaryVariant">@color/blue_dark</item>
   <item name="colorOnSecondary">@color/black</item>
   <!-- Status bar color. -->
   <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
   <!-- For text input fields -->
   <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
   <!-- For radio buttons -->
   <item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
   <!-- For switches -->
   <item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>

4. ทำความเข้าใจธีมสีและบทบาทสี

ระบบสี Material 3 ใช้วิธีที่มีการจัดระเบียบเพื่อใส่สีให้กับ UI ของคุณ แอตทริบิวต์จำนวนหนึ่งจาก Theme.AppCompat ยังคงใช้งานอยู่ อย่างไรก็ตาม เราได้เพิ่มแอตทริบิวต์ใน Theme.MaterialComponents.* มากขึ้นและแอตทริบิวต์เพิ่มเติมมากยิ่งขึ้นใน Theme.Material3.* คุณจึงต้องตรวจสอบทุกหน้าจอของแอปเพื่อให้แน่ใจว่าไม่มีพร็อพเพอร์ตี้ที่ไม่ได้ใช้งานจากธีมพื้นฐาน

การทำความเข้าใจบทบาทเกี่ยวกับสี

แอตทริบิวต์ที่เกี่ยวข้องกับสีในธีม Material 3 มีมากกว่า 20 รายการ ตอนแรกอาจดูน่ากังวล แต่จริงๆ แล้วมีสีหลักๆ เพียงไม่กี่สีที่ผสมผสานกับบทบาทของสี 4-5 สีแบบเดียวกันเพื่อสร้างสีที่นำมาใช้

กลุ่มสีดังกล่าวมีดังนี้

• สีหลักของแอป
• รอง ซึ่งเป็นสีรองของแอป
• 3. สีที่ 3 เป็นสีที่ 3 ที่ตรงข้ามกับสีหลักและรอง
• ข้อผิดพลาด ใช้สำหรับข้อความแสดงข้อผิดพลาดและกล่องโต้ตอบ
• ข้อมูลเบื้องต้น
• พื้นผิว, ตัวแปรพื้นผิว, ผกผันพื้นผิว

บทบาทสำหรับบทบาทหลัก ลำดับรอง ระดับอุดมศึกษา และข้อผิดพลาด

<สีฐาน>	สีฐาน
เปิด<สีฐาน>	สีของไอคอนและข้อความที่ปรากฏบนสีฐาน
<base color>คอนเทนเนอร์	มาจากฐาน สี ใช้สำหรับปุ่ม กล่องโต้ตอบ ฯลฯ
on<base color>คอนเทนเนอร์	สีของไอคอนและข้อความบนคอนเทนเนอร์

เช่น ปุ่มการทำงานแบบลอยที่มีการจัดรูปแบบเริ่มต้นใน Material 3 จะใช้ Primary เป็นสีฐาน จึงใช้ primaryContainer เป็นสีพื้นหลังของปุ่มและ onPrimaryContainer สำหรับเนื้อหาของปุ่ม

เมื่อปรับแต่งธีมด้วยตนเอง คุณควรตรวจสอบอย่างน้อยที่สุดว่าแอตทริบิวต์ on<base color> สำหรับสีฐานทุกสีที่เปลี่ยนยังอ่านได้ชัดเจน

แนวทางปฏิบัติแนะนำคือการปรับบทบาททั้งหมดในกลุ่มสีพร้อมกันเพื่อให้ไม่มีอาร์ติแฟกต์จากฐานไปจนถึงแอป

โดยทั่วไปพื้นหลังและสีฐานพื้นผิวจะมี 2 บทบาท คือสีฐานนั้นและ on<base color> สำหรับไอคอนหรือข้อความที่แสดงบนสี

5. การสร้างธีม Material 3 ด้วย Material Theme Builder

Material Theme Builder ทำให้การสร้างรูปแบบสีที่กำหนดเองเป็นเรื่องง่าย ใช้การส่งออกโค้ดในตัวเพื่อย้ายข้อมูลไปยังระบบสี M3 และใช้ประโยชน์จากสีแบบไดนามิก ดูข้อมูลเพิ่มเติม material.io/material-theme-builder

ธีมของแอป Tip Time มีหลายสไตล์สําหรับคอมโพเนนต์ แต่สไตล์ส่วนใหญ่นั้นเป็นค่าเริ่มต้นในธีม Material 3 สีหลักเพียง 2 สีที่เราต้องคำนึงถึงคือสีหลักและสีรอง

สีดังกล่าวจะตรงกับสีหลักสีเขียว (#1B5E20) และสีรองสีฟ้า (#0288D1)

คุณสามารถป้อนสีเหล่านั้นลงใน Material Theme Builder และส่งออกธีมแบบเต็ม (สมมติว่ามีลิงก์ไปยังภาพรวมฉบับเต็มที่อื่น)

โปรดทราบว่าสีที่คุณป้อนอาจเปลี่ยนเป็นโทนสีให้พอดีกับอัลกอริทึมการสร้างสี และอย่าลืมใช้สีที่เสริมและอ่านได้

ด้านล่างคือค่าย่อยของค่าที่สร้างขึ้นเมื่อคุณป้อนสีที่กำหนดเอง

6. การทำงานกับไฟล์ส่งออกของ Material Theme Builder

ที่เก็บถาวรการส่งออกประกอบด้วยค่าและไดเรกทอรี value-night/ ที่มีไฟล์ธีม XML ของตนเอง ซึ่งสอดคล้องกับธีมสว่างและธีมมืด สีทั้งหมดกำหนดไว้ใน value/colors.xml

คุณสามารถคัดลอกไฟล์ตามเดิมได้ แต่คุณจะต้องเปลี่ยนชื่อธีมของคุณ AndroidManifest.xml หรือในไฟล์ธีมให้ตรงกัน ชื่อเริ่มต้นจากเครื่องมือคือ AppTheme

รีสตาร์ทแอปและหน้าดูจะเหมือนเดิมทุกประการ การเปลี่ยนแปลงที่เห็นได้ชัดอย่างหนึ่งคือ "สวิตช์" และ "ปุ่มตัวเลือก" ซึ่งตอนนี้สถานะที่เลือกจะมีธีมโดยใช้โทนสีจากสีหลักเทียบกับสีรอง ในแอปพลิเคชันขนาดใหญ่ คุณอาจต้องกลับไปดูการออกแบบบางรูปแบบอีกครั้ง

หมายเหตุ: คุณอาจได้รับข้อความแสดงข้อผิดพลาดเกี่ยวกับไฟล์ AndroidManifest.xml และแอป Android 12 ที่ต้องระบุค่า android:exported ที่ชัดเจนสำหรับกิจกรรม

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.tiptime">

   <application ...>
       <activity android:name=".MainActivity"
           android:exported="true">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
       </activity>
   </application>

</manifest>

7. กำลังเพิ่มสีแบบเปลี่ยนอัตโนมัติ

เมื่อใช้งานธีม Material 3 ที่เหมาะสม เราสามารถทำให้ UI เป็นแบบไดนามิกได้ด้วยการเพิ่มเติมเล็กๆ น้อยๆ 2-3 อย่าง

Dynamic Colors API ช่วยให้คุณใช้สีแบบไดนามิกกับกิจกรรมทั้งหมดได้

ในแอป กิจกรรมแต่ละรายการ หรือไปยังการดูหรือส่วนย่อยแต่ละรายการ สำหรับ

แอปนี้เราจะใช้สีแบบเปลี่ยนอัตโนมัติทั่วโลก

สร้างไฟล์คลาสของแอปพลิเคชัน

class TipTimeApplication: Application() {
    override fun onCreate() {
        // Apply dynamic color
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

เราต้องอ้างอิงไฟล์ที่สร้างใหม่นี้ในไฟล์ Manifest ของ Android

AndroidManifest.xml

< application android name=".TipTimeApplication
<!--- Other existing attributes –>

</application >

ระบบ Android 12 ขึ้นไปจะตรวจสอบกระดาษตกแต่งเริ่มต้นของผู้ใช้) เพื่อสร้างชุดสีโทนยาวหลายชุด ค่าจากชุดสีเหล่านี้จะใช้เพื่อสร้าง ThemeOverlay

คลาส DynamicColors จะลงทะเบียน ActivityLifecycleCallbacks ที่สกัดกั้นใน ActivityPreCreated เพื่อใช้การวางซ้อนธีมแบบไดนามิกที่ระบบสร้างขึ้นหรือที่คุณให้มา

8. การใช้การวางซ้อนธีมที่กำหนดเอง

เครื่องมือของเราสามารถส่งออกการวางซ้อนธีมได้ แต่คุณยังสามารถสร้างการวางซ้อนธีมด้วยตนเองหากคุณลบล้างแอตทริบิวต์จำนวนน้อย

การวางซ้อนธีมมีไว้เพื่อใช้ร่วมกับธีมอื่นและแสดงเฉพาะค่าที่จะเปลี่ยนแปลงที่ด้านบนของธีมพื้นฐาน

สมมติว่า ด้วยเหตุผลบางอย่าง บางทีอาจเป็นการแสดงแบรนด์ เราก็ต้องการให้โทนสีหลักเป็นเฉดสีแดง ซึ่งสามารถทำได้ด้วยไฟล์และแอตทริบิวต์ต่อไปนี้

colors.xml

<resources>
    <color name="overlay_light_primary">#9C4146</color>
    <color name="overlay_light_onPrimary">#FFFFFF</color> 
    <color name= "overlay_light_primaryContainer">#FFDADB</color>
    <color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >

themes_overlays.xml

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
    <item name="colorPrimary">@color/overlay_light_primary</item>
    <item name="colorOnPrimary">@color/overlay_light_onPrimary</item> 
    <item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item> 
    <item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>

สำหรับโค้ดข้างต้น Android 12 จะใช้ธีมสว่างแบบไดนามิกและซ้อนทับการเปลี่ยนแปลง หรือคุณสามารถใช้ ThemeOverlay ที่ถูกต้องใดก็ได้เป็นระดับบนสุด โดยรวมอย่างใดอย่างหนึ่งต่อไปนี้

ThemeOverlay.Material3.Light

ThemeOverlay.Material3.Dark

ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark

ThemeOverlay.Material3.DynamicColors.DayNight

หากต้องการใช้การวางซ้อนธีมนี้แทนค่าเริ่มต้นของ Material ให้เปลี่ยนการเรียกใช้เป็น DynamicColors.applyToActivitiesIfAvailable เป็น

DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)

9. การเพิ่มสีแบบไดนามิกในแอตทริบิวต์ที่กำหนดเอง

ที่ผ่านมาเราได้ลบล้างพร็อพเพอร์ตี้ที่มีอยู่แล้วในธีม Material 3 เรามีอีกกรณีหนึ่งที่เป็นไปได้ในสีแบบไดนามิก ซึ่งเราอาจมีแอตทริบิวต์ที่กำหนดเองอย่างน้อย 1 รายการที่ต้องจัดสรร

เมื่อเลือกใช้สีแบบไดนามิก แอปจะมีสิทธิ์เข้าถึงชุดสีโทน 5 สี ได้แก่ ชุดสีเฉพาะจุด 3 ชุดและชุดสีกลาง 2 ชุดซึ่งมีบทบาทโดยประมาณดังต่อไปนี้

system_accent1	โทนสีหลัก
system_accent2	โทนสีรอง
system_accent3	โทนสีลำดับที่ 3
system_neutral1	พื้นหลังและพื้นผิวเฉยๆ
system_neutral2	พื้นผิวและโครงร่างที่เป็นกลาง

แต่ละชุดสีจะมีขั้นตอนโทนสีหลายแบบ ตั้งแต่สีขาว

เป็นสีดำ: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000

เมื่อออกแบบ UI สำหรับสีแบบไดนามิก คุณควรคิดถึงสีเฉพาะให้น้อยลงและควรคำนึงถึงความสัมพันธ์ของโทนและความสว่างของส่วนประกอบนั้นกับองค์ประกอบอื่นๆ ในระบบการออกแบบ

สมมติว่าคุณต้องการให้ไอคอนมีธีมโดยใช้ชุดสีรองและคุณได้เพิ่มแอตทริบิวต์ให้กับไอคอนแต้มสีโดยมีรายการต่อไปนี้ใน attrs.xml

attrs.xml

<resources>
    <attr name="iconColor" format="color" />
</resources>

การวางซ้อนธีมอาจมีลักษณะดังนี้

<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight"> 
<item name="iconColor">@android:color/system_accent2_600</item>
</style>

เมื่อคุณติดตั้งแอปอีกครั้งและเปลี่ยนวอลเปเปอร์ แอปจะเลือกชุดสีรองนั้น

จานสีเหล่านี้ใช้สําหรับ Android 12 (API 31) เท่านั้น คุณจึงต้องวางไฟล์ที่เกี่ยวข้องในโฟลเดอร์ที่มีคำต่อท้าย -v31 เว้นแต่แอปจะตั้งค่า SDK ขั้นต่ำเป็น 31 ขึ้นไป

10. สรุป

ใน Codelab นี้ คุณสามารถทำสิ่งต่อไปนี้ได้

• เพิ่มทรัพยากร Dependency เพื่ออัปเกรดธีมเป็น Material 3
• ทำความเข้าใจกลุ่มสีและบทบาทใหม่
• ทำความเข้าใจวิธีย้ายข้อมูลจากธีมแบบคงที่ไปเป็นสีแบบไดนามิก
• ทำความเข้าใจวิธีใช้การวางซ้อนธีมและการใช้สีแบบไดนามิกสำหรับแอตทริบิวต์ธีมที่กำหนดเอง