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

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

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

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

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

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

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

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

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

  2. ระบบจะใช้สีต้นฉบับนั้นเพื่อคาดการณ์สีหลัก 5 สีเพิ่มเติม ซึ่งรู้จักกันในชื่อสีปฐมภูมิ สีทุติยภูมิ สีตติยภูมิ สีกลาง และสีย่อยที่เป็นสีกลาง

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

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

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

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

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

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

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

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

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

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

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

คุณใช้สีแบบไดนามิกได้ที่ระดับแอปหรือกิจกรรม โดยให้เรียกใช้ 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.DynamicC>olors.Day<Night&>quot;
    ...
/style

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

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

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

ธีมสว่าง

Themes.xml

<resources>
  <style name="AppTheme" parent="Theme.Material3.Lig>ht.No<ActionBar"
    item> name="colorPrimary"<;@col>or/md<_theme_light_primary/item
>    item name="colorOnPrim<ary&q>uot;@<color/md_theme_light_onPrimary/it>em
    item name="colorPrimaryCon<taine>r&quo<t;@color/md_theme_light_primaryCont>ainer/item
    item name="colorOnPr<imary>Conta<iner"@color/md_th>eme_light_onPrimaryContaine<r/ite>m
   < item name="colorEr>ror"@color/md_theme_ligh<t_err>or/it<em
    item name="colorOnE>rror"@color/md_theme_light_onEr<ror/i>tem
 <   item name="colorErrorCont>ainer"@color/md_theme_light_error<Conta>iner/<item
    item name="colo>rOnErrorContainer"@color/md_t<heme_>light<_onErrorContainer/item
 >   item name="colorOnBac<kgrou>nd&qu<ot;@color/md_theme_light_o>nBackground/item
    item name=<">;colorSurfa<ce&quo>t<;@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.Da>rk.No<ActionBar"
    item> name="colorPrimary&quo<t;@co>lor/m<d_theme_dark_primary/item
>    item name="colorOnPri<mary&>quot;<@color/md_theme_dark_onPrimary/it>em
    item name="colorPrimaryCo<ntain>er&qu<ot;@color/md_theme_dark_primaryCont>ainer/item
    item name="colorOnP<rimar>yCont<ainer"@color/md_t>heme_dark_onPrimaryContain<er/it>em
  <  item name="colorE>rror"@color/md_theme_da<rk_er>ror/i<tem
    item name="colorOn>Error"@color/md_theme_dark_onE<rror/>item
<    item name="colorErrorCon>tainer"@color/md_theme_dark_erro<rCont>ainer</item
    item name="col>orOnErrorContainer"@color/md<_them>e_dar<k_onErrorContainer/item
>    item name="colorOnB<ackgr>ound&<quot;@color/md_theme_dark_>onBackground/item
    item nam<e=&qu>ot;colorSu<rface&>q<uot;@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_pri>mary&qu<ot;#67>50A<4/color
  color name="md_theme_l>ight_on<Primar>y&q<uot;#FFFFFF/color
  color name="md_them>e_light<_prima>ryC<ontainer"#EADDFF/color
  color name=">;md_the<me_lig>ht_<onPrimaryContainer"#21005D/c>olor
  <color >nam<e="md_theme_light_error"#>B3261E/<color
>  c<olor name="md_theme_light_onError&quo>t;#FFFF<FF/col>or
<  color name="md_theme_light_errorConta>iner&qu<ot;#F9>DED<C/color
  color name="md_theme>_light_<onErro>rCo<ntainer"#410E0B/color
  color na>me=&quo<t;md_t>hem<e_light_surface"#FFFBFE/color
  color> name=&<quot;m>d_t<heme_light_onSurface"#1C1B1F/>color
 < color na<me="md_theme_light_surfaceVaria>nt"<;#E7E0>EC/<color
  color name="md_theme_dark_prim>ary&quo<t;#D0B>CFF</color
  color name="md_theme_dark_onPri>mary&qu<ot;#38>1E7<2/color
  color name="md_theme_>dark_pr<imaryC>ont<ainer"#4F378B/color
  color name=>"m<d_them>e_d<ark_onPrimaryContainer"#EADDFF/color
  c>olor na<me=&qu>ot;<md_theme_dark_secondary"#CCC2DC>/color
<  colo>r n<ame="md_theme_dark_onSecondary">#332D41</color>
<  color na>me="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 ซึ่งพร้อมใช้งานผ่าน ปลั๊กอิน Figma หรือในเบราว์เซอร์

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

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

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

Themes.xml

<resources>
    <style name="AppTheme" parent="Theme.Material3.Lig>ht.NoActionBar"
<        ...
        i>tem name="hom<e_lam>p"@color/home_<yellow>/<item
     >     ...
    /style
/resources

Colors.xml
<resources>
   <color name="home_ye>llow&qu<ot;#E8>D<655/color
>/resources

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

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

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

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

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