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

ลองใช้ Compose
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีใช้สีแบบไดนามิกใน Compose
สีแบบเปลี่ยนอัตโนมัติ - Material Design 3 →

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

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

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

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

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

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

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

  2. ระบบจะใช้สีต้นทางนั้นเพื่อคาดการณ์สีหลัก 5 สีเพิ่มเติม ซึ่งรู้จักกันในชื่อสีหลัก สีรอง สีขั้นที่ 3 สีกลาง และสีกลาง แบบต่างๆ

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

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

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

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

วิธีแสดงสีต่างๆ ในอุปกรณ์ของผู้ใช้

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

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

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

รูปที่ 5 ตัวอย่างลักษณะของผลิตภัณฑ์ย่อยสีต่างๆ บนอุปกรณ์เครื่องเดียว

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

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

คุณใช้สีแบบไดนามิกได้ที่ระดับแอปหรือกิจกรรม โดยให้เรียกใช้ 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 เพื่อนำเข้าสีเพิ่มเติม ที่จะขยายรูปแบบสีของคุณเพื่อสร้างระบบสีแบบรวมก็ได้ ตัวเลือกนี้ใช้ HarmonizedColors เพื่อเปลี่ยนโทนสีที่กำหนดเอง ซึ่งจะช่วยให้เกิดความสมดุลด้านภาพและคอนทราสต์ที่เข้าถึงได้เมื่อรวมกับสีที่ผู้ใช้สร้างขึ้น โดยจะเกิดขึ้นที่รันไทม์พร้อมกับ applyToContextIfAvailable()

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

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

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

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