สร้างไอคอนแอป

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

• ไอคอน Launcher และไอคอนการแจ้งเตือนที่กำหนดเอง: ใช้ สตูดิโอเนื้อหารูปภาพ เพื่อสร้างไอคอน Launcher แบบปรับอัตโนมัติและชิ้นงานการแจ้งเตือนที่ตรงตามข้อกำหนดของระบบ
• ไอคอน UI มาตรฐาน: ใช้ตัวเลือกคลิปอาร์ตใน สตูดิโอเนื้อหารูปภาพ เพื่อเพิ่มรูปภาพจากไลบรารีไอคอนจากดีไซน์ Material
• ไอคอน UI ที่กำหนดเอง: ใช้ Vector Asset Studio เพื่อ สร้างภาพวาดเวกเตอร์ที่ปรับขนาดได้สำหรับคอมโพเนนต์ต่างๆ เช่น แถบแอปด้านบน

เกี่ยวกับสตูดิโอเนื้อหารูปภาพ

Android Studio มีเครื่องมือที่เรียกว่า สตูดิโอเนื้อหารูปภาพ ซึ่งช่วยให้คุณสร้างไอคอนแอปของคุณเองจาก ไอคอนจากดีไซน์ Material, รูปภาพที่กำหนดเอง และสตริงข้อความ เครื่องมือนี้จะสร้างชุดไอคอนที่มีความละเอียดเหมาะสมสำหรับความหนาแน่นของพิกเซลแต่ละรายการที่แอปของคุณรองรับ สตูดิโอเนื้อหารูปภาพ จะวางไอคอนที่สร้างขึ้นใหม่ในโฟลเดอร์เฉพาะความหนาแน่นภายใต้ไดเรกทอรี res/ ในโปรเจ็กต์ เมื่อรันไทม์ Android จะใช้ทรัพยากรที่เหมาะสมตามความหนาแน่นของหน้าจอของอุปกรณ์ที่แอปของคุณทำงานอยู่

Image Asset Studio ช่วยให้คุณสร้างไอคอนประเภทต่อไปนี้ได้

• ไอคอน Launcher
• ไอคอนการแจ้งเตือน

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

ไอคอน Launcher แบบปรับอัตโนมัติและแบบเดิม

ไอคอน Launcher เป็นกราฟิกที่แสดงแอปของคุณต่อผู้ใช้ โดยไอคอนดังกล่าวสามารถทำสิ่งต่อไปนี้ได้

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

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

ไอคอน Launcher แบบเดิมเป็นกราฟิกที่แสดงแอปของคุณในหน้าจอหลักของอุปกรณ์และในหน้าต่าง Launcher ไอคอน Launcher แบบเดิมมีไว้สำหรับใช้ในอุปกรณ์ที่ใช้ Android 7.1 (ระดับ API 25) หรือต่ำกว่า ซึ่งไม่รองรับไอคอนแบบปรับอัตโนมัติและไม่แสดงเป็นรูปร่างต่างๆ ในอุปกรณ์รุ่นต่างๆ เราขอแนะนำให้คุณใช้สไตล์ Material Design สำหรับไอคอน Launcher แม้ว่าคุณจะรองรับ Android เวอร์ชันเก่ากว่าก็ตาม

สตูดิโอเนื้อหารูปภาพ จะวางไอคอนไว้ในตำแหน่งที่เหมาะสมในไดเรกทอรี res/mipmap-<density>/ นอกจากนี้ยังสร้างรูปภาพขนาด 512 x 512 พิกเซลที่เหมาะสำหรับ Google Play Store ด้วย

สำหรับไอคอน Launcher ไฟล์ AndroidManifest.xml ต้องอ้างอิงตำแหน่ง mipmap/ สตูดิโอเนื้อหารูปภาพจะเพิ่มโค้ดนี้โดยอัตโนมัติ โค้ดไฟล์ Manifest ต่อไปนี้อ้างอิงไอคอน ic_launcher ในไดเรกทอรี mipmap/

<application android:name="ApplicationTitle"
          android:label="@string/app_label"
          android:icon="@mipmap/ic_launcher" >

ดูข้อมูลเพิ่มเติมได้ที่ ไอคอน Launcher แบบปรับอัตโนมัติ และ ไอคอนผลิตภัณฑ์ - Material Design

ไอคอนการแจ้งเตือน

การแจ้งเตือนคือข้อความที่คุณแสดงต่อผู้ใช้นอก UI ปกติของแอปได้ สตูดิโอเนื้อหารูปภาพ จะวางไอคอนการแจ้งเตือนไว้ในตำแหน่งที่เหมาะสมในไดเรกทอรี res/drawable-<density>/ ดังนี้

• ไอคอนสำหรับ Android 3 (API ระดับ 11) ขึ้นไปจะอยู่ใน res/drawable-<density>-v11/ ไดเรกทอรี
• ไอคอนสำหรับ Android 2.3 ถึง 2.3.7 (API ระดับ 9 ถึง 10) จะอยู่ใน res/drawable-<density>-v9/ ไดเรกทอรี
• ไอคอนสำหรับ Android 2.2 (API ระดับ 8) และต่ำกว่าจะอยู่ใน res/drawable-<density>/ ไดเรกทอรี

หากแอปของคุณรองรับ Android 2.3 ถึง 2.3.7 (API ระดับ 9 ถึง 10) Image Asset Studio จะสร้างไอคอนเวอร์ชันสีเทา Android เวอร์ชันใหม่กว่าจะใช้ไอคอนสีขาวที่ สตูดิโอเนื้อหารูปภาพ สร้างขึ้น

ดูข้อมูลเพิ่มเติมได้ที่เกี่ยวกับการแจ้งเตือนและ การแจ้งเตือน Material Design

คลิปอาร์ต

สตูดิโอเนื้อหารูปภาพช่วยให้คุณนำเข้าไอคอนจากดีไซน์ Material ในรูปแบบ VectorDrawable และ PNG ได้โดยเลือกไอคอนจากกล่องโต้ตอบ ดูข้อมูลเพิ่มเติมได้ที่ ไอคอน Material

รูปภาพ

คุณสามารถนำเข้ารูปภาพของคุณเองและปรับรูปภาพให้เหมาะกับไอคอนประเภทต่างๆ ได้ Image Asset Studio รองรับไฟล์ประเภทต่อไปนี้ PNG (แนะนำ), JPG (ยอมรับได้) และ GIF (ไม่แนะนำ)

สตริงข้อความ

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

เรียกใช้สตูดิโอเนื้อหารูปภาพ

หากต้องการเริ่มใช้ Image Asset Studio ให้ทำตามขั้นตอนต่อไปนี้

1. ในหน้าต่างโปรเจ็กต์ ให้เลือกมุมมอง Android

2. คลิกขวาที่โฟลเดอร์ res แล้วเลือกใหม่ > ชิ้นงานรูปภาพ

   

3. ทำตามขั้นตอนต่อไปนี้

   • สร้างไอคอน Launcher แบบปรับอัตโนมัติและแบบเดิม

   • สร้างไอคอนการแจ้งเตือน

สร้างไอคอน Launcher แบบปรับอัตโนมัติและแบบเดิม

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

1. ในช่องประเภทไอคอน ให้เลือกไอคอน Launcher (แบบปรับอัตโนมัติและแบบเดิม)
2. ในแท็บเลเยอร์เบื้องหน้า ให้เลือกประเภทชิ้นงาน แล้วระบุ ชิ้นงานในช่องด้านล่าง:
   • เลือกรูปภาพ เพื่อระบุเส้นทางของไฟล์รูปภาพ
   • เลือกคลิปอาร์ต เพื่อระบุรูปภาพจากชุดไอคอนMaterial Design
   • เลือกข้อความ เพื่อระบุสตริงข้อความและเลือกแบบอักษร
3. ในแท็บเลเยอร์พื้นหลัง ให้เลือกประเภทชิ้นงาน แล้วระบุ ชิ้นงานในช่องด้านล่าง คุณสามารถเลือกสีหรือระบุรูปภาพที่จะใช้เป็นเลเยอร์พื้นหลังก็ได้
4. ในแท็บเลเยอร์ขาวดำ ให้เลือกประเภทชิ้นงาน (รูปภาพ คลิป อาร์ต หรือข้อความ) หรือปล่อยให้ Android Studio ใช้ ชิ้นงานเดียวกับเลเยอร์เบื้องหน้าโดยค่าเริ่มต้น
5. ในแท็บตัวเลือก ให้ตรวจสอบการตั้งค่าเริ่มต้นและยืนยันว่าต้องการสร้างไอคอนแบบเดิม แบบกลม และแบบ Google Play Store
6. คุณสามารถเปลี่ยนชื่อและการตั้งค่าการแสดงผลสำหรับแท็บเลเยอร์เบื้องหน้า และเลเยอร์พื้นหลัง แต่ละแท็บได้ (ไม่บังคับ) โดยทำดังนี้
   • ชื่อ - หากไม่ต้องการใช้ชื่อเริ่มต้น ให้พิมพ์ชื่อใหม่ หากชื่อทรัพยากรนั้นมีอยู่ในโปรเจ็กต์แล้ว ระบบจะเขียนทับทรัพยากรนั้น ดังที่ระบุโดยข้อผิดพลาดที่ด้านล่างของวิซาร์ด ชื่อต้องมีแต่ตัวอักษรพิมพ์เล็ก ขีดล่าง และตัวเลขเท่านั้น
   • ตัดขอบ - หากต้องการปรับระยะขอบระหว่างกราฟิกไอคอนกับเส้นขอบใน ชิ้นงานต้นทาง ให้เลือก ใช่ การดำเนินการนี้จะนำพื้นที่โปร่งใสออกโดยรักษาสัดส่วนภาพไว้ หากต้องการปล่อยให้ชิ้นงานต้นทางไม่มีการเปลี่ยนแปลง ให้เลือกไม่
   • สี - หากต้องการเปลี่ยนสีสำหรับไอคอนคลิปอาร์ต หรือข้อความ ให้คลิกช่อง ในกล่องโต้ตอบเลือกสี ให้ระบุสี แล้วคลิกเลือก ค่าใหม่จะปรากฏในช่อง
   • ปรับขนาด - ใช้แถบเลื่อนเพื่อระบุค่าตัวคูณมาตราส่วนเป็นเปอร์เซ็นต์เพื่อ ปรับขนาดไอคอนรูปภาพ คลิปอาร์ต หรือข้อความ การควบคุมนี้จะปิดใช้สำหรับเลเยอร์พื้นหลังเมื่อคุณระบุประเภทชิ้นงานสี
7. คลิกถัดไป
8. คุณสามารถเปลี่ยนไดเรกทอรีทรัพยากรได้ (ไม่บังคับ) โดยเลือกชุดซอร์สของทรัพยากรที่ต้องการเพิ่มชิ้นงานรูปภาพ ได้แก่ src/main/res, src/debug/res, src/release/res หรือชุดซอร์สที่กำหนดเอง ชุดซอร์สหลักใช้ได้กับตัวแปรบิลด์ทั้งหมด รวมถึงตัวแปรบิลด์สำหรับแก้ไขข้อบกพร่องและตัวแปรบิลด์สำหรับเผยแพร่ ชุดซอร์สสำหรับแก้ไขข้อบกพร่องและชุดซอร์สสำหรับเผยแพร่จะลบล้างชุดซอร์สหลักและใช้ได้กับบิลด์เวอร์ชันเดียว ชุดซอร์สสำหรับแก้ไขข้อบกพร่องมีไว้สำหรับการแก้ไขข้อบกพร่องเท่านั้น หากต้องการกำหนดชุดซอร์สใหม่ ให้เลือกไฟล์ > โครงสร้างโปรเจ็กต์ > แอป > ตัวแปรบิลด์ > ประเภทบิลด์ เช่น คุณสามารถกำหนดชุดซอร์สเบต้าและสร้างไอคอนเวอร์ชันหนึ่งที่มีข้อความ "เบต้า" ที่มุมขวาล่าง ดูข้อมูลเพิ่มเติมได้ที่ กำหนดค่าตัวแปรบิลด์ Variants
9. คลิกเสร็จสิ้น สตูดิโอเนื้อหารูปภาพจะเพิ่มรูปภาพลงในโฟลเดอร์ mipmap สำหรับความหนาแน่นต่างๆ

แสดงตัวอย่างไอคอนแอปแบบมีธีม

Android Studio ช่วยให้คุณแสดงตัวอย่างไอคอนแอปแบบมีธีมและ ทดสอบวิธีที่ไอคอนปรับให้เข้ากับสีของวอลเปเปอร์ของผู้ใช้ หากต้องการแสดงตัวอย่างไอคอนแอปแบบมีธีม ให้เปิดไฟล์ launcher.xml ที่กำหนดไอคอน แล้วใช้ตัวเลือกโหมด UI ของระบบ บนแถบเครื่องมือเพื่อเปลี่ยนวอลเปเปอร์และดูว่าไอคอนตอบสนองอย่างไร

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

สร้างไอคอนการแจ้งเตือน

หลังจากที่คุณเปิด Image Asset Studio คุณสามารถเพิ่มไอคอนการแจ้งเตือน ได้โดยทำตามขั้นตอนต่อไปนี้

1. ในช่องประเภทไอคอน ให้เลือกไอคอนการแจ้งเตือน
2. เลือกประเภทชิ้นงาน แล้วระบุชิ้นงานในช่อง ด้านล่าง:
   • ในช่องคลิปอาร์ต ให้คลิกปุ่ม ในกล่องโต้ตอบเลือกไอคอน ให้เลือกไอคอนจากดีไซน์ Material แล้วคลิกตกลง
   • ในช่องเส้นทาง ให้ระบุเส้นทางและชื่อไฟล์ของรูปภาพ คลิก ... เพื่อใช้กล่องโต้ตอบ
   • ในช่องข้อความ ให้พิมพ์สตริงข้อความและเลือกแบบอักษร ไอคอนจะปรากฏในส่วนชิ้นงานต้นทาง ทางด้านขวา และในส่วนแสดงตัวอย่างที่ด้านล่างของวิซาร์ด
3. คุณสามารถเปลี่ยนชื่อและตัวเลือกการแสดงผลได้ (ไม่บังคับ) โดยทำดังนี้
   • ชื่อ - หากไม่ต้องการใช้ชื่อเริ่มต้น ให้พิมพ์ชื่อใหม่ หากชื่อทรัพยากรนั้นมีอยู่ในโปรเจ็กต์แล้ว ระบบจะเขียนทับทรัพยากรนั้น ดังที่ระบุโดยคำเตือนที่ด้านล่างของวิซาร์ด ชื่อต้องมีแต่ตัวอักษรพิมพ์เล็ก ขีดล่าง และตัวเลขเท่านั้น
   • ตัดขอบ - หากต้องการปรับระยะขอบระหว่างกราฟิกไอคอนกับเส้นขอบใน ชิ้นงานต้นทาง ให้เลือก ใช่ การดำเนินการนี้จะนำพื้นที่โปร่งใสออกโดยรักษาสัดส่วนภาพไว้ หากต้องการปล่อยให้ชิ้นงานต้นทางไม่มีการเปลี่ยนแปลง ให้เลือกไม่
   • ระยะห่างจากขอบ - หากต้องการปรับระยะห่างจากขอบของชิ้นงานต้นทางทั้ง 4 ด้าน ให้เลื่อนแถบเลื่อน เลือกค่าระหว่าง -10% ถึง 50% หากเลือกตัดขอบ ด้วย ระบบจะตัดขอบก่อน
4. คลิกถัดไป
5. คุณสามารถเปลี่ยนไดเรกทอรีทรัพยากรได้ (ไม่บังคับ) โดยทำดังนี้
   • ไดเรกทอรี Res - เลือกชุดซอร์สทรัพยากรที่ต้องการเพิ่มชิ้นงานรูปภาพ ได้แก่ src/main/res, src/debug/res, src/release/res หรือชุดซอร์สที่ผู้ใช้กำหนด ชุดซอร์สหลักใช้ได้กับตัวแปรบิลด์ทั้งหมด รวมถึงตัวแปรบิลด์สำหรับแก้ไขข้อบกพร่องและตัวแปรบิลด์สำหรับเผยแพร่ ชุดซอร์สสำหรับแก้ไขข้อบกพร่องและชุดซอร์สสำหรับเผยแพร่จะลบล้างชุดซอร์สหลักและใช้ได้กับบิลด์เวอร์ชันเดียว ชุดซอร์สสำหรับแก้ไขข้อบกพร่องมีไว้สำหรับการแก้ไขข้อบกพร่องเท่านั้น หากต้องการกำหนดชุดซอร์สใหม่ ให้เลือกไฟล์ > โครงสร้างโปรเจ็กต์ > แอป > ประเภทบิลด์ เช่น คุณสามารถกำหนดชุดแหล่งที่มาเบต้าและสร้างไอคอนเวอร์ชันหนึ่งที่มีข้อความ "เบต้า" ที่มุมขวาล่าง ดูข้อมูลเพิ่มเติมได้ที่ กำหนดค่าตัวแปรบิลด์ Variants
6. คลิกเสร็จสิ้น สตูดิโอเนื้อหารูปภาพจะเพิ่มรูปภาพลงในโฟลเดอร์ drawable สำหรับความหนาแน่นและเวอร์ชันต่างๆ

อ้างอิงทรัพยากรรูปภาพ

ดูข้อมูลเกี่ยวกับการอ้างอิงทรัพยากรไอคอนได้ที่ ทรัพยากรใน Compose ดูข้อมูลเกี่ยวกับการอ้างอิงกราฟิกแบบเต็มสี หรือรูปภาพที่ซับซ้อนกว่าได้ที่การโหลดรูปภาพ

ลบไอคอนออกจากโปรเจ็กต์

วิธีนำไอคอนออกจากโปรเจ็กต์

1. ในหน้าต่างโปรเจ็กต์ ให้เลือกมุมมอง Android
2. ขยายโฟลเดอร์ res/mipmap สำหรับไอคอน Launcher หรือโฟลเดอร์ res/drawable สำหรับไอคอนประเภทอื่นๆ
3. ค้นหาโฟลเดอร์ย่อยที่มีชื่อไอคอนที่ต้องการลบ โฟลเดอร์นี้มีไอคอนที่มีความหนาแน่นต่างๆ
4. เลือกโฟลเดอร์แล้วกดปุ่มลบ หรือเลือก แก้ไข > ลบ หรือคลิกขวาที่ไฟล์แล้วเลือกลบ กล่องโต้ตอบลบอย่างปลอดภัย จะปรากฏขึ้น
5. คุณเลือกตัวเลือกเพื่อค้นหาตำแหน่งที่ใช้ไอคอนในโปรเจ็กต์ได้ (ไม่บังคับ) แล้วคลิกตกลง Android Studio จะลบไฟล์ออกจากโปรเจ็กต์และไดรฟ์ อย่างไรก็ตาม หากคุณเลือกค้นหาสถานที่ในโปรเจ็กต์ที่ใช้ไฟล์และพบการใช้งานบางอย่าง คุณสามารถดูการใช้งานเหล่านั้นและตัดสินใจว่าจะลบหรือไม่ คุณต้องลบหรือแทนที่การอ้างอิงเหล่านี้เพื่อให้คอมไพล์โปรเจ็กต์ได้สำเร็จ
6. เลือกบิลด์ > ล้างโปรเจ็กต์ Android Studio จะนำไฟล์รูปภาพที่สร้างขึ้นซึ่งสอดคล้องกับทรัพยากรรูปภาพที่ลบออก โดยจะนำไฟล์เหล่านั้นออกจากโปรเจ็กต์และไดรฟ์
7. หากจำเป็น ให้แก้ไขข้อผิดพลาดที่เหลืออยู่เนื่องจากโค้ดบางส่วนอ้างอิงทรัพยากร Android Studio จะไฮไลต์ข้อผิดพลาดเหล่านี้ในโค้ด เมื่อนำการอ้างอิงทั้งหมดออกจากโค้ดแล้ว คุณจะสร้างโปรเจ็กต์ได้อีกครั้ง

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

• สร้างไอคอนแอป (มุมมอง)