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

ลองใช้วิธีเขียน

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนําสําหรับ Android ดูวิธีใช้สีแบบไดนามิกในเครื่องมือเขียน

สีแบบเปลี่ยนอัตโนมัติ - Material Design 3 →

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

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

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

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

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

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

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

   

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

   

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

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

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

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

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

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

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

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

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>

Colors 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()

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

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

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