ช่วงนี้ใน Google Play Store เริ่มมี App Watch Face มาให้ดาวน์โหลดกันเยอะขึ้น มี Watch Face ใหม่ๆ แทบจะทุกสัปดาห์ มีทั้งแบบฟรีและเสียเงิน ก็เลยคิดว่าถ้าจะเขียน Watch Face ในแบบที่ต้องการบ้างจะทำอย่างไร ซึ่งเท่าที่ลองค้นหาข้อมูลก็พบว่า Watch Face เขียนคล้ายกับ Launcher บน Android คือเขียน Wear App ปกติแต่ไปกำหนดใน AndroidManifest ว่าให้ทำหน้าที่เป็นอะไร ซึ่งถือว่าง่ายมากๆ ลองมาทำเล่นกันครับ

สิ่งที่ต้องมี

  • Android Studio รุ่นล่าสุด
  • Android SDK Rev 20
  • Android Wear System Image

อันดับแรกสร้าง AVD ขึ้นมาก่อนตามนี้

จากนั้น Start AVD เอาไว้ สำหรับท่านที่ใช้ Intel HAXM การทำงานของ Emulator ก็จะเร็วขึ้นมาบ้างนิดหน่อย T_T

สร้าง Project ขึ้นมาใหม่ เลือกเป็น Mobile และ Wear App เลือก Blank Activity ทั้งคู่

จากนั้น แก้ไข Android Manifest ที่ Wear Module เพิ่ม user permission ดังนี้

<uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

จากนั้นกำหนดให้ Activity ฝังเป็น background ดังนี้

android:allowEmbedded="true"

เพิ่ม meta-data ลงไป เพื่อให้แสดง preview ตอนเลือกเปลี่ยน watch face ทำภาพขนาด 320×320 ใส่ลงใน res/drawable-hdpi

<meta-data
android:name="com.google.android.clockwork.home.preview"
android:resource="@drawable/ic_preview" />

ในส่วน intent-filter เพิ่ม category เพื่อกำหนดให้แสดงผลเป็น Background

<category android:name="com.google.android.clockwork.home.category.HOME_BACKGROUND" />

ตัวอย่าง Android Manifest

ทีนี้มาทำ Watch Face กัน แบบง่ายๆ แก้ไข layout ในไฟล์ rect_activity_wear.xml และ round_activity_wear.xml เพิ่ม ImageView และ TextClock ลงไปดังนี้

ใครอยากได้ภาพ Background ก็ทำภาพสวยๆ ขนาด 320x320px ใส่ลงไปได้ใน ImageView จากนั้นมาลองทดสอบ Wear App กัน วิธีการทดสอบทำได้ง่ายๆ สั่ง Run App บน AVD ที่เราสร้างขึ้น App จะ Run ขึ้นมาปกติ ให้เลื่อนขวา แล้วกดค้างที่หน้าจอ เพื่อเปลี่ยน watch face คุณก็จะเห็น watch face ของคุณขึ้นมา

วิธีการทำ Package สำหรับเผยแพร่ใน Play Store เนื่องจาก Wear Device ไม่สามารถเชื่อมต่อกับ Play Store ได้โดยตรง จำเป็นต้องใช้ Mobile App เป็น Payload ถ้าสั่งติดตั้ง Mobile App ที่มี Wear App อยู่ด้วย ตัวมือถือจะ Sync App ไปยังนาฬิกาให้อัตโนมัติ วิธีเพิ่ม wear apk ลงไปใน Mobile App ซึ่งก็มีอยู่ 2 วิธี คือ

  • Sign Package ของ Wear App แล้วเพิ่มเข้าไปใน Mobile App เอง
  • Sign Package ของ Wear App แล้วเพิ่มเข้าไปใน Mobile App แบบอัตโนมัติ

ก็เลือกอย่างหลังจะง่ายที่สุดครับ ให้ดู build.gradle ใน Mobile Module ว่าตั้งค่า WearApp เป็น dependencies แล้วหรือยัง (ถ้าเราสร้าง project มาพร้อมกัน Android Studio จะเพิ่ม WearApp เป็น dependency ให้อยู่แล้ว) จากนั้นสั่ง Generated Sign APK ที่ Mobile Module ได้เลย คุณก็จะได้ APK ที่เป็น Mobile App และมี Wear App อยู่ข้างใน ทีนี้ก็เอา Apk ที่ได้ เอาไปทดสอบกัน

วิธีการสร้าง Custom Watch Face นี้อาจไม่ถูกต้องนัก ทำสอบจาก Emulator มีผลข้างเคียงในเรื่องของการแสดงผล Notification และอาการ Screen Flick ซึ่งบนนาฬิกาจริงๆ ไม่รู้ว่ามีอาการแบบเดียวกันหรือไม่ ถ้าใครมี LG G Watch หรือ Gear Live ก็ฝากลองด้วย :P เอาไว้ถ้ามีวิธีการที่ดีกว่านี้ หรือ Google ปล่อย Watch Face API ออกมาแล้ว เดี๋ยวจะมาอัพเดทกันอีกรอบ :)

Comments are closed.