ให้ผู้ใช้ปรับประสบการณ์การใช้งานตามสีในแอปได้

สีแบบไดนามิกซึ่งเพิ่มเข้ามาใน Android 12 ช่วยให้ผู้ใช้สามารถปรับเปลี่ยนในแบบของคุณ อุปกรณ์ของตนเพื่อให้สอดคล้องกับรูปแบบสีของวอลเปเปอร์ส่วนตัว หรือผ่านสีที่เลือกไว้ในเครื่องมือเลือกวอลเปเปอร์

คุณใช้ประโยชน์จากฟีเจอร์นี้ได้โดยการเพิ่ม DynamicColors API ซึ่ง นำธีมนี้ไปใช้กับแอปหรือกิจกรรมเพื่อปรับแอปให้เหมาะกับคุณมากขึ้น แก่ผู้ใช้ได้

วันที่

รูปที่ 1 ตัวอย่างรูปแบบโทนสีที่ได้จากวอลเปเปอร์ต่างๆ

หน้านี้มีวิธีการในการใช้ Dynamic Colors ในแอป ฟีเจอร์นี้มีให้บริการแยกต่างหากสำหรับ วิดเจ็ตและไอคอนแบบปรับอัตโนมัติ ตามที่อธิบายไว้ภายหลังในหน้านี้ นอกจากนี้ คุณยังลองใช้ Codelab ได้ด้วย

หมายเหตุ: ข้อมูลในหน้านี้ขึ้นอยู่กับการทำความเข้าใจรูปแบบ สี และธีมต่างๆ ใน Android ดูรายละเอียดได้ที่รูปแบบและธีม

วิธีที่ Android สร้างรูปแบบสี

Android ทําตามขั้นตอนต่อไปนี้เพื่อสร้างรูปแบบสีจาก วอลเปเปอร์

1. ระบบจะตรวจหาสีหลักในรูปภาพวอลเปเปอร์ที่เลือกและ แยกสีแหล่งที่มา

2. ระบบจะใช้สีต้นฉบับดังกล่าวเพื่อประเมินสีหลัก 5 สีเพิ่มเติม เรียกว่าหลัก รอง ตติยภูมิ เฉยๆ และปานกลาง รายละเอียดปลีกย่อย

   วันที่

   รูปที่ 2 ตัวอย่างการดึงสีต้นฉบับจากรูปภาพวอลเปเปอร์และการดึงสีหลัก 5 สี

3. ระบบจะตีความสีหลักแต่ละสีเป็นโทนสี 13 โทน

   วันที่

   รูปที่ 3 ตัวอย่างการสร้างชุดสีโทนที่กำหนด

4. ระบบใช้วอลเปเปอร์เดียวนี้เพื่อให้ได้สีที่แตกต่างกัน 5 สี ซึ่งเป็นพื้นฐานสำหรับธีมสว่างและมืด

วิธีแสดงผลิตภัณฑ์ย่อยของสีในอุปกรณ์ของผู้ใช้

ผู้ใช้สามารถเลือกรายละเอียดปลีกย่อยของสีจากสีที่ดึงมาจากวอลเปเปอร์และสีต่างๆ ธีมต่างๆ เริ่มตั้งแต่ Android 12 โดยมีตัวแปรเพิ่มเติมใน Android 13 สำหรับ เช่น ผู้ใช้ที่มีโทรศัพท์ Pixel ที่ใช้ Android 13 จะเลือกตัวแปร จากวอลเปเปอร์และ การตั้งค่ารูปแบบดังที่แสดงในรูปที่ 4

วันที่

รูปที่ 4 การเลือกผลิตภัณฑ์ย่อยของสีในการตั้งค่าวอลเปเปอร์ (แสดงในอุปกรณ์ Pixel)

Android 12 เพิ่มเวอร์ชัน Tonal Spot ตามด้วยเวอร์ชันสีกลาง, Vibrant ตัวแปร Tonal และ Expressive ใน Android 13 ตัวแปรแต่ละรายการมีลักษณะเฉพาะตัว สูตรอาหารที่เปลี่ยนสีเมล็ดของวอลเปเปอร์ของผู้ใช้ด้วยความมีชีวิตชีวา และหมุนโทนสี ตัวอย่างต่อไปนี้จะแสดงรูปแบบสีเดียว ที่แสดงผ่านตัวแปรสี 4 สีนี้

วันที่

รูปที่ 5 ตัวอย่างลักษณะของรายละเอียดปลีกย่อยของสีต่างๆ ในอุปกรณ์เดียว

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

เริ่มต้นใช้งาน Compose

หากคุณกำลังสร้าง UI ด้วย Compose โปรดดู ธีม Material ใน Compose เพื่อดูรายละเอียดการใช้ไดนามิกสีกับ แอป

เริ่มต้นใช้งานข้อมูลพร็อพเพอร์ตี้

โดยสามารถใช้สีแบบไดนามิกได้ที่ระดับแอปหรือกิจกรรม โดยโทร applyToActivitiesIfAvailable() เพื่อลงทะเบียน ActivityLifeCycleCallbacks ไปยังแอปของคุณ

Kotlin

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

Java

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    DynamicColors.applyToActivitiesIfAvailable(this);
  }
}

ต่อไป ให้เพิ่มธีมลงในแอป

<style
    name="AppTheme"
    parent="ThemeOverlay.Material3.DynamicColors.DayNight">
    ...
</style>

สร้างธีมด้วยโทเค็น

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

ข้อมูลโค้ดต่อไปนี้แสดงตัวอย่างธีมสว่างและมืด และ XML สีที่สอดคล้องกัน หลังจากใช้โทเค็นสีแบบไดนามิก

ธีมสว่าง

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
    <item name="colorPrimary">@color/md_theme_light_primary</item>
    <item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_light_error</item>
    <item name="colorOnError">@color/md_theme_light_onError</item>
    <item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_light_onBackground</item>
    <item name="colorSurface">@color/md_theme_light_surface</item>
    <item name="colorOnSurface">@color/md_theme_light_onSurface</item>
    …..
  </style>
</resources>

ธีมมืด

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
    <item name="colorPrimary">@color/md_theme_dark_primary</item>
    <item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
    <item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
    <item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
    <item name="colorError">@color/md_theme_dark_error</item>
    <item name="colorOnError">@color/md_theme_dark_onError</item>
    <item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
    <item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
    <item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
    <item name="colorSurface">@color/md_theme_dark_surface</item>
    <item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
    ……
  </style>
</resources>

XML สี

Colors.xml

<resources>
  <color name="md_theme_light_primary">#6750A4</color>
  <color name="md_theme_light_onPrimary">#FFFFFF</color>
  <color name="md_theme_light_primaryContainer">#EADDFF</color>
  <color name="md_theme_light_onPrimaryContainer">#21005D</color>
  <color name="md_theme_light_error">#B3261E</color>
  <color name="md_theme_light_onError">#FFFFFF</color>
  <color name="md_theme_light_errorContainer">#F9DEDC</color>
  <color name="md_theme_light_onErrorContainer">#410E0B</color>
  <color name="md_theme_light_surface">#FFFBFE</color>
  <color name="md_theme_light_onSurface">#1C1B1F</color>
  <color name="md_theme_light_surfaceVariant">#E7E0EC</color>
  <color name="md_theme_dark_primary">#D0BCFF</color>
  <color name="md_theme_dark_onPrimary">#381E72</color>
  <color name="md_theme_dark_primaryContainer">#4F378B</color>
  <color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
  <color name="md_theme_dark_secondary">#CCC2DC</color>
  <color name="md_theme_dark_onSecondary">#332D41</color>
  <color name="md_theme_dark_secondaryContainer">#4A4458</color>
  <color name="md_theme_dark_onSurface">#E6E1E5</color>
  <color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>

ดูข้อมูลเพิ่มเติม:

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

• หากต้องการสร้างชุดสีพื้นฐาน รวมถึงสีและธีมของแอป ให้เลือก ใน Material Theme Builder ซึ่งมีให้ผ่าน ปลั๊กอิน Figma หรือในเบราว์เซอร์)

• ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่รูปแบบสีช่วยให้การช่วยเหลือพิเศษดีขึ้นได้ ในแอปของคุณ โปรดดูหน้า Material 3 เกี่ยวกับ การช่วยเหลือพิเศษของระบบสี

ใช้สีที่กำหนดเองหรือสีของแบรนด์

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

Themes.xml

<resources>
    <style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
        ...
        <item name="home_lamp">@color/home_yellow</item>
          ...
    </style>
</resources>

Colors.xml
<resources>
   <color name="home_yellow">#E8D655</color>
</resources>

หรือ คุณสามารถใช้ Material Theme Builder เพื่อนำเข้า สีต่างๆ ที่ขยายรูปแบบสีของคุณ จึงเป็นการสร้างระบบสีที่เป็นหนึ่งเดียว เมื่อใช้ตัวเลือกนี้ ให้ใช้ HarmonizedColors เพื่อเปลี่ยนระดับของภาษาที่กำหนดเอง สีต่างๆ เพื่อรักษาสมดุลของภาพและคอนทราสต์ที่เข้าถึงได้เมื่อนำมารวมกัน ด้วยสีที่ผู้ใช้สร้างขึ้น จะเกิดขึ้นขณะรันไทม์กับ applyToContextIfAvailable()

วันที่

รูปที่ 6 ตัวอย่างการทำให้สีที่กำหนดเองกลมกลืน

ดูคำแนะนำของ Material 3 เกี่ยวกับการทำให้สีที่กำหนดเองมีความกลมกลืน

ใช้สีแบบไดนามิกกับไอคอนและวิดเจ็ตแบบปรับอัตโนมัติ

นอกจากการเปิดใช้ธีม "สีแบบไดนามิก" ในแอปแล้ว คุณยังรองรับ ธีมสีแบบไดนามิกสำหรับ Widgets จะเริ่มต้นใน Android 12 และสำหรับ ไอคอนแบบปรับอัตโนมัติจะเริ่มต้นใน Android 13