Workshop 2: ใส่ไอคอน App ให้กับ Android
อุปกรณ์ Android นอกจากมีหลากหลายขนาดแล้ว (Physical size) ความระเอียดหน้าจอ (Denity) ก็ยังแตกต่างกันอีกด้วย ดังนั้นเพื่อให้การออกแบบไอคอนและภาพต่างๆ รองรับกับทุกขนาด Android จึงแบ่งความละเอียดจออกเป็นกลุ่ม ดังนี้
โฟลเดอร์ที่เก็บไอคอน (รวมไปถึงภาพที่ใช้ใน App) จะถูกเฏบไว้ในโฟลเดอร์ platforms/android/res/drwable-xxx ซึ่ง xxx คือกลุ่มความละเอียด mdpi,hdpi… ที่กล่าวไว้ข้างต้น
ตอนนี้ลองเปิดโฟลเดอร์ platforms/android/res/drawable-hdpi ดังภาพล่าง จะพบว่ามีไอคอน icon.png อยู่ภายในแต่ละโฟลเดอร์ ซึ่งไฟล์นี้ก็คือไอคอนสำหรับ App ที่ Cordova สร้างให้นั่นเอง ในโฟลเดอร์อื่นเช่น drawable-xhdpi ก็จะมีไอคอนอยู่เช่นกัน แต่ขนาดใหญ่กว่า
สร้างไอคอนขนาดต่างๆ ดังตาราง โดยตั้งชื่อเป็น icon.png เหมือนกับอันที่เครื่องสร้างให้
- dpi ความละเอียดน้อยที่สด
- mdpi ปลางกลาง
- hdpi สูง
- xdpi สูงมาก
- xxdpi สูงมากๆ
- xxdpi สูงมากๆๆ
โฟลเดอร์ที่เก็บไอคอน (รวมไปถึงภาพที่ใช้ใน App) จะถูกเฏบไว้ในโฟลเดอร์ platforms/android/res/drwable-xxx ซึ่ง xxx คือกลุ่มความละเอียด mdpi,hdpi… ที่กล่าวไว้ข้างต้น
ตอนนี้ลองเปิดโฟลเดอร์ platforms/android/res/drawable-hdpi ดังภาพล่าง จะพบว่ามีไอคอน icon.png อยู่ภายในแต่ละโฟลเดอร์ ซึ่งไฟล์นี้ก็คือไอคอนสำหรับ App ที่ Cordova สร้างให้นั่นเอง ในโฟลเดอร์อื่นเช่น drawable-xhdpi ก็จะมีไอคอนอยู่เช่นกัน แต่ขนาดใหญ่กว่า
สร้างไอคอนขนาดต่างๆ ดังตาราง โดยตั้งชื่อเป็น icon.png เหมือนกับอันที่เครื่องสร้างให้
สำหรับที่มาของขนาดก็คือสัดส่วนในรูปหน้าที่ผ่านมา โดยเอา mdpi เป็นฐาน เช่น
hdpi = 1.5x48 =72 , xhdpi = 2x48 = 96 ฯลฯ
- นำ icon.png เข้าไปใส่ใน drawable-xxx ให้ครบ (เช่น hdpi ldpi mdpi…)
- เสร็จแล้วทดลองรัน (cordova run android หรือ cordova emulate android) ก็จะได้ไอคอน App ที่ต้องการ
กรณีที่ไอคอน App ไม่เปลี่ยน
ในกรณีที่โปรเจค App เคยรันมาก่อนโดยที่ใช้ไอคอนเดิม อาจมีปัญหาว่า ไอคอนตัวใหม่ ที่ใส่เข้าไป ไม่โชว์ (คือยังโชว์ของเก่าอยู่) วิธีแก้คือ
- อินพอร์ทโปรเจคเข้าไปรันใน Android Studio
- เปลี่ยนชื่อไฟล์ icon.png เป็นชื่ออื่น แล้วแก้ไขไฟล์ AndroidManifest.xml ดังนี้
1. เปลี่ยนชื่อไฟล์ icon.png (ไฟล์ไอคอนที่เพิ่งสร้าง) เป็นชื่ออื่น เช่น icon2.png โดยเปลี่ยนทุกไฟล์ (ทุกโฟล์เดอร์ drawable*xxx)
2. เปิดไฟล์ platforms/android/AndroidManifest.xml แล้วแก้ชื่อๆฟล์ให้ชี้ไปที่ไฟล์ข้อ 1 เป็น android=”@drawable/icon2” ดังตัวอย่าง
<application android:hardwareAccelerated=”true” android:icon=@drawable/ion2”>
ความหมายคือ ตั้งค่ากำหนดว่า ให้ใช้ไฟล์ icon2(.png) เป็นไอคอนของ App แทนของเดิม (ไฟล์ไอคอนอยู่ในโฟลเดอร์ต่างๆภายใต้ drawable…) เมื่อเปลี่ยนชื่อเสร็จแล้ว Save และปิดไฟล์ทดลองรัน จะได้ไอคอนใหม่ตามต้องการ
hdpi = 1.5x48 =72 , xhdpi = 2x48 = 96 ฯลฯ
- นำ icon.png เข้าไปใส่ใน drawable-xxx ให้ครบ (เช่น hdpi ldpi mdpi…)
- เสร็จแล้วทดลองรัน (cordova run android หรือ cordova emulate android) ก็จะได้ไอคอน App ที่ต้องการ
กรณีที่ไอคอน App ไม่เปลี่ยน
ในกรณีที่โปรเจค App เคยรันมาก่อนโดยที่ใช้ไอคอนเดิม อาจมีปัญหาว่า ไอคอนตัวใหม่ ที่ใส่เข้าไป ไม่โชว์ (คือยังโชว์ของเก่าอยู่) วิธีแก้คือ
- อินพอร์ทโปรเจคเข้าไปรันใน Android Studio
- เปลี่ยนชื่อไฟล์ icon.png เป็นชื่ออื่น แล้วแก้ไขไฟล์ AndroidManifest.xml ดังนี้
1. เปลี่ยนชื่อไฟล์ icon.png (ไฟล์ไอคอนที่เพิ่งสร้าง) เป็นชื่ออื่น เช่น icon2.png โดยเปลี่ยนทุกไฟล์ (ทุกโฟล์เดอร์ drawable*xxx)
2. เปิดไฟล์ platforms/android/AndroidManifest.xml แล้วแก้ชื่อๆฟล์ให้ชี้ไปที่ไฟล์ข้อ 1 เป็น android=”@drawable/icon2” ดังตัวอย่าง
<application android:hardwareAccelerated=”true” android:icon=@drawable/ion2”>
ความหมายคือ ตั้งค่ากำหนดว่า ให้ใช้ไฟล์ icon2(.png) เป็นไอคอนของ App แทนของเดิม (ไฟล์ไอคอนอยู่ในโฟลเดอร์ต่างๆภายใต้ drawable…) เมื่อเปลี่ยนชื่อเสร็จแล้ว Save และปิดไฟล์ทดลองรัน จะได้ไอคอนใหม่ตามต้องการ