ไอคอนแบบปรับอัตโนมัติ

ส่วนหัวของไอคอนแบบปรับอัตโนมัติ

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

ไอคอนแบบปรับอัตโนมัติสามารถปรับให้เข้ากับ Use Case ต่างๆ ได้ ซึ่งต่างจากรูปภาพบิตแมป ดังนี้

  • รูปร่างที่แตกต่างกัน: ไอคอนแบบปรับอัตโนมัติสามารถแสดงรูปร่างที่หลากหลายในอุปกรณ์รุ่นต่างๆ เช่น อาจแสดงรูปทรงกลมในอุปกรณ์ OEM เครื่องหนึ่ง และแสดงรูปทรงสี่เหลี่ยมมุมมน (รูปทรงระหว่างสี่เหลี่ยมจัตุรัสกับวงกลม) ในอุปกรณ์อีกเครื่องหนึ่ง OEM ของอุปกรณ์แต่ละรายต้องจัดเตรียมมาสก์ซึ่งระบบจะใช้เพื่อแสดงผลไอคอนแบบปรับอัตโนมัติทั้งหมดที่มีรูปร่างเดียวกัน

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

  • เอฟเฟกต์ภาพ: ไอคอนแบบปรับอัตโนมัติรองรับเอฟเฟกต์ภาพที่น่าสนใจหลากหลายรูปแบบ ซึ่งจะแสดงเมื่อผู้ใช้วางหรือย้ายไอคอนไปรอบๆ หน้าจอหลัก

    GIF แสดงตัวอย่างไอคอนตัวอย่าง Android รูปวงกลม 2 รายการ ซึ่งเคลื่อนไหวเพื่อแสดงการตอบสนองของผู้ใช้ ไอคอนแรกแสดงโลโก้ Android ที่สั่นไปทางซ้ายแล้วขวา จากนั้นขึ้นและลงภายในวงกลม ไอคอนที่ 2 จะขยายและหดกลับอีกครั้ง
    รูปที่ 2 ตัวอย่างเอฟเฟกต์ภาพที่แสดงโดยไอคอนแบบปรับอัตโนมัติ

  • การกำหนดธีมของผู้ใช้: ตั้งแต่ Android 13 (ระดับ API 33) เป็นต้นไป ผู้ใช้จะกำหนดธีมไอคอนแบบปรับอัตโนมัติได้ หากผู้ใช้เปิดใช้ไอคอนแอปที่มีธีมในการตั้งค่าระบบ และ Launcher รองรับฟีเจอร์นี้ ระบบจะใช้สีของวอลเปเปอร์และธีมที่ผู้ใช้เลือกเพื่อกำหนดสีอ่อนของไอคอนแอปสำหรับแอปที่มีเลเยอร์ monochrome ในไอคอนแบบปรับอัตโนมัติ ตั้งแต่ Android 16 QPR 2 เป็นต้นไป Android จะปรับธีมไอคอนแอปโดยอัตโนมัติสำหรับแอปที่ไม่ได้ระบุธีมของตนเอง

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

    ในสถานการณ์ต่อไปนี้ หน้าจอหลักจะไม่แสดงไอคอนแอปตามธีม แต่จะแสดงไอคอนแอปแบบปรับอัตโนมัติหรือแบบมาตรฐานแทน

    • หากผู้ใช้ไม่ได้เปิดใช้ไอคอนแอปตามธีม
    • หากแอปของคุณไม่มีไอคอนแอปสีเดียวและอุปกรณ์ของผู้ใช้ใช้ Android เวอร์ชันก่อน Android 16 QPR 2
    • หาก Launcher ไม่รองรับไอคอนแอปตามธีม

ออกแบบไอคอนแบบปรับอัตโนมัติ

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

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

    ตัวอย่างเลเยอร์พื้นหน้า (ซ้าย) และเลเยอร์พื้นหลัง (ขวา) ส่วนพื้นหน้าแสดงไอคอน 16 ด้านของโลโก้ Android ตัวอย่างที่อยู่ตรงกลางภายในพื้นที่ที่ควรวางองค์ประกอบที่สำคัญไว้ขนาด 66x66 โซนปลอดภัยจะอยู่ตรงกลางภายในคอนเทนเนอร์ขนาด 108x108 พื้นหลังจะแสดงขนาดที่วัดได้เท่ากันสำหรับโซนปลอดภัยและคอนเทนเนอร์ แต่มีเพียงพื้นหลังสีน้ำเงินและไม่มีโลโก้
    รูปที่ 4 ไอคอนแบบปรับอัตโนมัติที่กำหนดโดยใช้เลเยอร์พื้นหน้าและพื้นหลัง โซนที่ปลอดภัยขนาด 66x66 ที่แสดงคือพื้นที่ซึ่งจะไม่ถูกตัดออกโดยมาสก์รูปทรงที่กำหนดโดย OEM
    ตัวอย่างที่แสดงไอคอนจากรูปภาพก่อนหน้าซึ่งวางซ้อนบนมาสก์วงกลม
    รูปที่ 5 ตัวอย่างลักษณะของเลเยอร์พื้นหน้าและพื้นหลังเมื่อใช้มาสก์วงกลม

  • หากต้องการรองรับการปรับธีมไอคอนแอปตามผู้ใช้ ให้ระบุเลเยอร์เดียวสำหรับไอคอนเวอร์ชันขาวดำ

    ตัวอย่างเลเยอร์ไอคอนสีเดียว (ซ้าย) และตัวอย่างสี (ขวา) เลเยอร์สีเดียวแสดงไอคอน 16 ด้านของโลโก้ Android ตัวอย่างที่อยู่ตรงกลางภายในพื้นที่ที่ควรวางองค์ประกอบที่สำคัญไว้ขนาด 66x66 โซนปลอดภัยจะอยู่ตรงกลางภายในคอนเทนเนอร์ขนาด 108x108 ตัวอย่างสีจะแสดงการแสดงผลของเลเยอร์นี้เมื่อใช้กับธีมของผู้ใช้ที่มีสีต่างกัน (ส้ม ชมพู เหลือง และเขียว)
    รูปที่ 6 เลเยอร์ไอคอนสีเดียว (ซ้าย) พร้อมตัวอย่างการแสดงตัวอย่างสี (ขวา)

  • ปรับขนาดเลเยอร์ทั้งหมดเป็น 108x108 dp

  • ใช้ไอคอนที่มีขอบชัดเจน เลเยอร์ต้องไม่มีมาสก์หรือเงาพื้นหลังรอบๆ โครงร่างของไอคอน

  • ใช้โลโก้ที่มีขนาดอย่างน้อย 48x48 dp โดยต้องมีขนาดไม่เกิน 66x66 dp เนื่องจากพื้นที่ 66x66 dp ด้านในของไอคอนจะปรากฏภายในวิวพอร์ตที่มาสก์ไว้

พื้นที่ 18 dp ด้านนอกของแต่ละด้านทั้ง 4 ด้านของเลเยอร์จะสงวนไว้สำหรับการมาสก์และการสร้างเอฟเฟกต์ภาพ เช่น พารัลแลกซ์หรือการกะพริบ

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

เพิ่มไอคอนแบบปรับอัตโนมัติลงในแอป

ไอคอนแบบปรับอัตโนมัติจะระบุโดยใช้แอตทริบิวต์ android:icon ในไฟล์ Manifest ของแอปเช่นเดียวกับไอคอนแบบไม่ปรับอัตโนมัติ

Launcher ที่แสดงแอปด้วยไอคอนวงกลมจะใช้แอตทริบิวต์ที่ไม่บังคับ android:roundIcon และอาจเป็นประโยชน์หากไอคอนของแอปมีพื้นหลังวงกลมเป็นส่วนหลักของการออกแบบ Launcher ดังกล่าวจำเป็นต้องสร้างไอคอนแอปโดยใช้มาสก์วงกลมกับ android:roundIcon และการรับประกันนี้อาจช่วยให้คุณเพิ่มประสิทธิภาพรูปลักษณ์ของไอคอนแอปได้ เช่น ขยายโลโก้เล็กน้อยและตรวจสอบว่าเมื่อครอบตัดแล้ว พื้นหลังวงกลมจะเต็มขอบ

ข้อมูลโค้ดต่อไปนี้แสดงแอตทริบิวต์ทั้ง 2 รายการ แต่แอปส่วนใหญ่จะระบุเฉพาะ android:icon เท่านั้น

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

จากนั้นบันทึกไอคอนแบบปรับอัตโนมัติลงใน res/mipmap-anydpi-v26/ic_launcher.xml ใช้องค์ประกอบ <adaptive-icon> เพื่อกำหนดทรัพยากรเลเยอร์พื้นหน้า พื้นหลัง และสีเดียวสำหรับไอคอน องค์ประกอบภายใน <foreground>, <background> และ <monochrome> รองรับทั้งรูปภาพเวกเตอร์และบิตแมป

ตัวอย่างต่อไปนี้แสดงวิธีกำหนดเอลิเมนต์ <foreground>, <background> และ <monochrome> ภายใน <adaptive-icon>

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

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

นอกจากนี้ คุณยังกำหนด Drawable เป็นองค์ประกอบได้โดยแทรกลงในองค์ประกอบ <foreground>, <background> และ <monochrome> ข้อมูลโค้ดต่อไปนี้แสดงตัวอย่างการดำเนินการนี้กับภาพที่ถอดออกได้ในเบื้องหน้า

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

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

  • สำหรับทางลัดแบบคงที่ ให้ใช้องค์ประกอบ <adaptive-icon>
  • สำหรับทางลัดแบบไดนามิก ให้เรียกใช้เมธอด createWithAdaptiveBitmap() เมื่อสร้างทางลัด

ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ไอคอนแบบปรับอัตโนมัติได้ที่การใช้ไอคอนแบบปรับอัตโนมัติ ดูข้อมูลเพิ่มเติมเกี่ยวกับทางลัดได้ที่ภาพรวมทางลัดของแอป

แหล่งข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการออกแบบและการใช้ไอคอนแบบปรับอัตโนมัติได้จากแหล่งข้อมูลต่อไปนี้

ก่อนหน้า
ใช้แนวทางปฏิบัติแนะนำสำหรับทางลัด
ถัดไป
ฟองอากาศ