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

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

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

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

  

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

  

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

  

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

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

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

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

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

  

  

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

  

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

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

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

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

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

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

ไอคอนแบบปรับอัตโนมัติจะระบุโดยใช้แอตทริบิวต์ using the 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>
...

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

นอกจากนี้ คุณยังกำหนดเนื้อหาที่ถอนออกได้เป็นองค์ประกอบได้โดย อินไลน์ เนื้อหาดังกล่าวลงในองค์ประกอบ <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() เมธอดเมื่อสร้างทางลัด

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

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

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

• เทมเพลตหน้าชุมชน Figma
• ทำความเข้าใจไอคอนแบบปรับอัตโนมัติของ Android
• ออกแบบไอคอนแบบปรับอัตโนมัติ
• นำไอคอนแบบปรับอัตโนมัติไปใช้
• สร้างไอคอนแอปใน Android Studio
• ข้อกำหนดในการออกแบบไอคอนของ Google Play