Membangun tampilan jam untuk Wear OS
Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Sebelum memulai

Untuk membuat tampilan jam untuk Wear OS, developer harus menggunakan Format Tampilan Jam, yaitu format berbasis XML yang memungkinkan Anda membuat tampilan jam yang ekspresif dan berperforma tinggi.

Codelab ini ditujukan bagi orang yang ingin membuat tampilan jam secara manual menggunakan XML, atau bagi orang yang ingin lebih memahami formatnya untuk membantu mereka membuat alat desain mereka sendiri.

Jika Anda ingin menggunakan alat grafis untuk membuat tampilan jam sendiri, sebaiknya lihat alat yang ada seperti Watch Face Studio.

Prasyarat

Pengalaman menggunakan XML.

Yang akan Anda lakukan

Dalam codelab ini, Anda akan mempelajari:

Cara memaketkan tampilan jam WFF
Cara membuat tampilan jam, termasuk mode standby
Menambahkan elemen, seperti bentuk
Menyertakan sumber data ke dalam tampilan jam
Cara memecahkan masalah tampilan jam

Anda akan membuat tampilan jam yang dapat disesuaikan, dengan berbagai pilihan tema warna, indikator tanggal, dan jumlah langkah bawaan.

Yang akan Anda butuhkan

Android Studio Meerkat atau yang lebih baru, meskipun tidak perlu menggunakan Android Studio secara langsung, menggunakannya adalah cara termudah untuk memastikan Anda telah menginstal Android Build Tools dan Platform Tools, yang akan digunakan.
Emulator Wear OS atau smartwatch Wear OS fisik, dengan opsi developer diaktifkan.

2. Memahami struktur project Format Tampilan Jam

Mendownload file codelab

Untuk memulai, download file codelab di sini

$ git clone https://github.com/android/codelab-watch-face-format

Atau, Anda dapat mendownload repositorinya sebagai file ZIP:

Ada dua project di direktori watch-face-format: start dan finish. Kita akan menggunakan project start, tetapi Anda dapat melihat project finish kapan saja, yang berisi codelab yang sudah selesai.

Mari periksa struktur dasar project Format Tampilan Jam. Anda dapat menggunakan editor pilihan Anda, atau membuka project awal itu sendiri di Android Studio menggunakan File > Open... dan memilih direktori start.

Di direktori start/watchface/src/main, Anda akan melihat file berikut. Mari lihat fungsi setiap file:

File	Deskripsi
`AndroidManifest.xml`	Sama seperti di aplikasi Android biasa, file ini berisi informasi penting tentang tampilan jam dan hal-hal yang diperlukan untuk membangunnya.
`res/xml/watch_face_info.xml`	File info tampilan jam berisi metadata tentang tampilan jam, seperti cara menemukan gambar pratinjau dan apakah tampilan jam dapat disesuaikan.
`res/raw/watchface.xml`	File ini berisi definisi tampilan jam itu sendiri. Meskipun Anda boleh memiliki lebih dari satu definisi, file ini adalah file default yang akan digunakan.
`res/drawable/preview.png`	Setiap tampilan jam memerlukan gambar pratinjau yang digunakan oleh sistem. Agar project ini dapat dibangun, folder start/ berisi pratinjau kosong. Kita akan memperbaruinya nanti
`res/drawable/hour.pngres/drawable/minute.pngres/drawable/second.png`	File ini berisi jarum jam yang akan kita gunakan di tampilan jam.
`res/values/strings.xml`	Sama seperti di aplikasi Android, file ini berisi string yang dapat digunakan di tampilan jam.

Di mana kodenya?

Perhatikan bahwa sebenarnya tidak ada kode dalam project ini. Selain file AndroidManifest.xml, semua file untuk project ada di res/ - direktori resource. Hal ini karena tampilan jam Format Tampilan Jam tidak boleh berisi kode apa pun. Misalnya, jika Anda mencoba menyertakan kode Kotlin atau Java, kode tersebut tidak akan diterima oleh Play Store.

Sistem Wear OS membaca resource ini dan menangani pembuatan serta pengoperasian tampilan jam untuk Anda. Artinya, tidak perlu runtime atau logika lainnya, sehingga menghemat upaya pengembangan Anda.

3. Membangun tampilan jam

Kita akan memperbarui setiap file di atas untuk membuat tampilan jam yang berfungsi.

Menyiapkan manifes

Untuk mengidentifikasi paket sebagai tampilan jam Format Tampilan Jam, manifes harus mendeklarasikan dua hal:

Bahwa tidak ada kode dalam project.
Versi Format Tampilan Jam yang digunakan.

Pertama, perbarui elemen <application> untuk menambahkan atribut hasCode:

<application
    android:label="@string/watch_face_name"
    android:hasCode="false">

Kedua, tambahkan <property> ke elemen <application> yang menentukan versi Format Tampilan Jam yang digunakan dalam tampilan jam ini:

<property
    android:name="com.google.wear.watchface.format.version"
    android:value="1" />

Menentukan file `watch_face_info`

File watch_face_info.xml memiliki satu persyaratan wajib: menentukan lokasi gambar pratinjau. Dalam project ini, kami telah menyediakan gambar pratinjau di res/drawable/preview.png. File ini kosong, tetapi kita akan memperbaruinya nanti dengan screenshot sebenarnya dari tampilan jam yang sudah selesai.

Sebagai bagian dari codelab, kita juga akan membuat tampilan jam dapat disesuaikan. Kita juga mendeklarasikannya di watch_face_info.xml file menggunakan elemen <Editable>.

Perbarui res/xml/watch_face_info.xml untuk menambahkan elemen berikut:

<Preview value="@drawable/preview" />
<Editable value="true" />

Menulis XML Format Tampilan Jam

Definisi tampilan jam yang sebenarnya terdapat dalam res/raw/watchface.xml. Periksa file ini di editor Anda. Anda akan melihat bahwa elemen <WatchFace> menentukan lebar dan tinggi untuk tampilan jam Anda sebesar 450x450. Ruang koordinat ini digunakan di seluruh file lainnya, dan digunakan terlepas dari dimensi piksel sebenarnya yang digunakan tampilan jam, yang diskalakan ke atas atau ke bawah.

XML-nya adalah sebagai berikut:

<?xml version="1.0"?>
<WatchFace width="450" height="450">
  <Scene>
    <PartText x="0" y="0" width="450" height="450">
      <Text>
        <Font family="SYNC_TO_DEVICE" size="48">Hello, World!</Font>
      </Text>
    </PartText>
  </Scene>
</WatchFace>

Untuk saat ini, definisi ini hanya akan menampilkan "Halo, Dunia!" di smartwatch. Sayangnya, belum ada waktunya! Tetapi kita akan kembali untuk memperbaikinya. Mari lihat cara membangun tampilan jam dan menginstalnya ke perangkat.

Membangun dan men-deploy tampilan jam

Di command line, pastikan Anda berada di direktori awal dan berikan perintah:

./gradlew installDebug

Atau di Windows:

gradlew.bat installDebug

Tindakan ini akan membangun tampilan jam dan menginstalnya di perangkat. Tekan lama layar tampilan jam dan temukan tampilan jam Codelab. Atau, untuk menyetel tampilan jam dari command line, gunakan:

adb shell am broadcast -a com.google.android.wearable.app.DEBUG_SURFACE --es operation set-watchface --es watchFaceId com.example.codelab

Sekarang Anda akan melihat tampilan jam di smartwatch atau emulator. Selamat!

4. Menambahkan waktu

Format Tampilan Jam mendukung tampilan jam analog dan digital. Anda bahkan dapat memiliki keduanya atau beberapa jam dalam satu tampilan jam.

Mari lihat cara menambahkan jam analog menggunakan elemen < AnalogClock>. Pertama, hapus seluruh elemen < PartText> dari file watchface.xml dan ganti dengan kode berikut:

<AnalogClock x="0" y="0" width="450" height="450">
  <!-- TODO: Add shadows here later -->
  <HourHand resource="hour"
      x="215" y="50" width="20" height="190"
      pivotX="0.5" pivotY="0.921" >
  </HourHand>
  <MinuteHand resource="minute"
      x="217" y="25" width="16" height="220"
      pivotX="0.5" pivotY="0.9">
  </MinuteHand>
  <SecondHand resource="second"
      x="221" y="15" width="8" height="245"
      pivotX="0.5" pivotY="0.857">
    <Variant mode="AMBIENT" target="alpha" value="0" />
    <Sweep frequency="15" />
  </SecondHand>
</AnalogClock>

Elemen <AnalogClock> memiliki tinggi dan lebar 450, sehingga memenuhi seluruh layar. Elemen ini juga memiliki tiga elemen turunan: < HourHand>, < MinuteHand>, dan < SecondHand>. Perhatikan hal berikut tentang cara menentukannya:

Resource: Setiap elemen turunan ini memiliki atribut resource, yang sesuai dengan aset drawable. Misalnya, ada file hour.png di res/drawable, yang digunakan oleh elemen <HourHand>. Perhatikan bahwa Anda tidak perlu menentukan @drawable.
Pivot: Jarum jam diputar secara otomatis, tetapi pivotX dan pivotY menentukan tempat pivot harus dilakukan. pivotY, sebagai contoh, dihitung sebagai berikut:

Varian: <SecondHand> menyertakan elemen turunan < Variant>. Elemen ini menyembunyikan jarum detik karena tampilan jam hanya akan diperbarui setiap menit saat dalam mode standby.

Sekarang jalankan perintah berikut untuk membangun ulang dan men-deploy tampilan jam ke perangkat atau emulator Anda:

./gradlew installDebug

Kali ini, kita memiliki jam yang berfungsi, meskipun masih banyak yang dapat kita lakukan untuk meningkatkannya.

5. Menambahkan warna dan tema

Salah satu hal yang membuat tampilan jam menjadi menyenangkan adalah kemampuan untuk mempersonalisasi dan membuatnya ekspresif.

Tampilan jam kita saat ini agak biasa–semuanya berwarna putih–jadi mari kita tambahkan beberapa warna. Tidak hanya itu, mari kita buat tema warnanya dapat disesuaikan.

Membuat ColorConfiguration

Pertama, kita akan menentukan tema warna yang akan tersedia di tampilan jam. Di watchface.xml, temukan teks  dan ganti dengan:

<UserConfigurations>
  <ColorConfiguration id="themeColor" displayName="color_label" defaultValue="0">
    <ColorOption id="0" displayName="color_theme_0" colors="#ffbe0b #fb5607 #ff006e #8338ec #883c3c3c" />
    <ColorOption id="1" displayName="color_theme_1" colors="#8ecae6 #219ebc #ffb703 #fb8500 #883c3c3c" />
    <ColorOption id="2" displayName="color_theme_2" colors="#ff595e #ffca3a #8ac926 #1982c4 #883c3c3c" />
    <ColorOption id="3" displayName="color_theme_3" colors="#ff0000 #00ff00 #ff00ff #00ffff #883c3c3c" />
    <ColorOption id="4" displayName="color_theme_4" colors="#ff99c8 #fcf6bd #d0f4de #a9def9 #883c3c3c" />
    <ColorOption id="5" displayName="color_theme_5" colors="#1be7ff #6eeb83 #e4ff1a #ffb800 #883c3c3c" />
  </ColorConfiguration>
</UserConfigurations>

Tindakan ini menentukan 6 tema warna dengan setiap tema berisi 5 warna. Setiap tema adalah daftar warna yang dipisahkan spasi, seperti yang ditunjukkan dalam atribut colors.

Setiap tema akan memerlukan nama yang mudah dipahami, jadi tambahkan definisi berikut ke file res/values/strings.xml:

<string name="color_label">Color Theme</string>
<string name="color_theme_0">Bold</string>
<string name="color_theme_1">Magic</string>
<string name="color_theme_2">Breeze</string>
<string name="color_theme_3">Daytime</string>
<string name="color_theme_4">Relaxed</string>
<string name="color_theme_5">Smart</string>

Menggunakan ColorConfiguration

Setelah menentukan tema warna, terapkan ke jarum jam dengan menambahkan atribut tintColor ke setiap jarum. Ubah watchface.xml sebagai berikut:

<HourHand ... tintColor="[CONFIGURATION.themeColor.0]">
...
<MinuteHand ... tintColor="[CONFIGURATION.themeColor.1]">
...
<SecondHand ... tintColor="[CONFIGURATION.themeColor.2]">

<HourHand> mereferensikan warna pertama dalam tema yang dipilih, <MinuteHand> warna kedua, dan <SecondHand> warna ketiga.

Bangun ulang dan deploy tampilan jam, seperti sebelumnya, dan Anda akan melihat tampilan jam kini berwarna.

Tidak hanya itu, jika Anda menekan lama tampilan jam dan mengetuk tombol setelan, Anda dapat memilih dari 6 tema warna.

6. Menambahkan warna latar belakang

Ada beberapa hal lagi yang dapat kita lakukan untuk membuat tampilan jam ini terlihat menarik. Mari kita tambahkan desain latar belakang yang berani. Meskipun latar belakang akan tetap didominasi warna hitam, percikan warna ini akan membantu meningkatkan tampilan.

Kita akan menggunakan elemen Format Tampilan Jam < PartDraw> yang memungkinkan Anda membuat lapisan untuk menggambar bentuk dasar seperti garis, persegi panjang, oval, dan busur. Ganti teks:  dengan yang berikut:

<Group x="100" y="100" width="250" height="250" name="background" alpha="127">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <PartDraw x="0" y="0" width="250" height="250">
    <Ellipse x="0" y="0" width="250" height="250">
      <Fill color="[CONFIGURATION.themeColor.3]" />
    </Ellipse>
    <Ellipse x="50" y="50" width="150" height="150">
      <Fill color="#000000" />
    </Ellipse>
  </PartDraw>
</Group>

Perhatikan kembali penggunaan elemen <Variant>: Tindakan ini akan menghapus cincin latar belakang saat dalam mode standby, untuk meminimalkan jumlah piksel yang menyala.

Perhatikan juga cara kita menggunakan tema warna lagi untuk memilih warna cincin, sehingga gaya tetap sama di semua elemen tampilan jam.

7. Memvalidasi tampilan jam

Sebelum kita melanjutkan peningkatan tampilan jam, mari kita pelajari cara menyederhanakan proses pengembangan melalui penggunaan validator Format Tampilan Jam.

Validator adalah alat yang memeriksa kebenaran XML, sehingga Anda tidak lagi membangun dan men-deploy tampilan jam hanya untuk mendapati bahwa tampilan jam tersebut tidak berfungsi.

Download file JAR validator dari repositori GitHub.
Jalankan validator terhadap file watchface.xml

java -jar wff-validator.jar 1 watchface/src/main/res/raw/watchface.xml

Jika XML tampilan jam valid, Anda akan melihat pesan konfirmasi. Namun, jika ditemukan error, detail error dan lokasi akan ditampilkan, misalnya:

SEVERE: [Line 18:Column 49]: cvc-complex-type.2.4.a: Invalid content was found starting with element 'PartDrw'

8. Menggunakan sumber data

Format Tampilan Jam dapat menggunakan berbagai sumber data untuk membuat tampilan jam Anda lebih berguna.

Mari kita tambahkan dua sumber data yang umum digunakan yang memberi tampilan jam lebih banyak utilitas: Tanggal saat ini (siapa yang belum pernah lupa tanggal?) dan jumlah langkah harian.

Setiap elemen ini ditempatkan dalam penampung < PartText>, yang merupakan lapisan untuk melakukan operasi teks.

Menambahkan tanggal

Ganti teks  dengan yang berikut:

<PartText x="225" y="225" width="225" height="225">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <TextCircular centerX="0" centerY="0" width="415" height="415" startAngle="180" endAngle="90" align="CENTER" direction="COUNTER_CLOCKWISE">
    <Font family="SYNC_TO_DEVICE" size="28" color="[CONFIGURATION.themeColor.0]">
      <Template>
        <![CDATA[%d %s]]>
        <Parameter expression="[DAY]"/>
        <Parameter expression="[MONTH_S]"/>
      </Template>
    </Font>
  </TextCircular>
</PartText>

Dalam cuplikan di atas, kita menggunakan < Template> untuk memformat dua sumber data menjadi string. DAY adalah bilangan bulat dari 1–31 dan MONTH_S sudah berupa string, jadi kita menggunakan ekspresi pemformatan %d %s untuk menempatkan bilangan bulat dan string secara bersamaan.

Mengelilingi string ini dengan elemen CDATA adalah praktik yang baik karena dapat menghindari spasi kosong yang tidak sengaja disertakan dalam rendering, yang pada akhirnya memengaruhi posisi dan perataan.

Terakhir, perhatikan lagi cara kita menggunakan tema warna lagi untuk memastikan bahwa penambahan terbaru pada tampilan jam ini mempertahankan tema yang ada.

Menambahkan jumlah langkah

Ganti teks  dengan yang berikut:

<PartText x="0" y="0" width="225" height="225">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <TextCircular centerX="225" centerY="225" width="415" height="415" startAngle="270" endAngle="360" align="CENTER" direction="CLOCKWISE">
    <Font family="SYNC_TO_DEVICE" size="28" color="[CONFIGURATION.themeColor.2]">
      <Template>
        <![CDATA[%05d]]>
        <Parameter expression="[STEP_COUNT]"/>
      </Template>
    </Font>
  </TextCircular>
</PartText>

Format Tampilan Jam mendukung berbagai sumber data, dan jumlah langkah adalah tambahan yang bagus untuk tampilan jam apa pun, sehingga pengguna dapat melacak gerakan dan olahraga harian mereka.

Bangun dan deploy tampilan jam untuk memeriksa tambahan terbaru ini:

9. Sentuhan akhir dan pratinjau

Detail adalah segalanya dalam tampilan jam, jadi mari kita tambahkan beberapa sentuhan akhir tambahan.

Menambahkan bayangan ke tampilan jam

Jarum tampilan jam berfungsi dengan baik dalam berbagai warna, tetapi terlihat sedikit datar di tampilan jam. Ganti  dengan yang berikut, untuk menambahkan bayangan di belakang jarum jam:

<HourHand resource="hour" x="220" y="55" width="20" height="190"
    pivotX="0.5" pivotY="0.921" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
</HourHand>
<MinuteHand resource="minute" x="222" y="30" width="16" height="220"
    pivotX="0.5" pivotY="0.9" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
</MinuteHand>
<SecondHand resource="second" x="226" y="20" width="8" height="245"
    pivotX="0.5" pivotY="0.857" tintColor="[CONFIGURATION.themeColor.4]">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <Sweep frequency="15" />
</SecondHand>

Menambahkan logo yang menyenangkan

Setiap produsen jam terkenal memiliki logonya di tampilan jam, jadi mari kita tambahkan logo kita sendiri. Tentu saja, mari kita gunakan logo Android.

Namun, karena ini adalah smartwatch, mari kita lakukan sesuatu yang berbeda dan tambahkan logo yang dapat bergerak sebagai respons terhadap posisi pergelangan tangan pemakainya.

Untuk melakukannya, kita akan menempatkan gambar di dalam elemen < Group>, lalu menggunakan elemen < Transform> untuk menerapkan rotasi ke elemen <Group>, berdasarkan posisi pergelangan tangan. Struktur kita akan terlihat seperti ini:

Titik pivot default untuk elemen ada di tengah, sehingga kita tidak perlu menyesuaikan pivotX dan pivotY <Group>. Menerapkan <Transform> ke <Group> akan memutar <PartImage> di sekitar titik pivot tengah tersebut.

Di <Transform>, kita menggunakan sumber data [ ACCELEROMETER_ANGLE_XY], yang mewakili jumlah sudut dalam arah X dan Y.

Ganti  dengan cuplikan berikut:

<Group x="92" y="92" width="266" height="266" name="logo_container">
  <Variant mode="AMBIENT" target="alpha" value="0" />
  <Transform target="angle" mode="BY" value="0.1 * [ACCELEROMETER_ANGLE_XY]" />
  <PartImage x="97" y="0" width="72" height="72"
    tintColor="[CONFIGURATION.themeColor.2]">
    <Image resource="android"/>
  </PartImage>
</Group>

Deploy ulang tampilan jam. Jika Anda menggunakan perangkat fisik, kenakan dan gerakkan pergelangan tangan Anda untuk melihat logo Android bergerak. Jika Anda menggunakan emulator, buka kontrol emulator yang diperluas dan manipulasi sudut X dan Y di sensor virtual.

Memperbarui pratinjau

Ingatkah di awal codelab kita melihat bahwa ada file preview.png, yang digunakan oleh sistem untuk menampilkan pratinjau tampilan jam? Sekarang, mari kita perbarui file ini agar lebih mencerminkan tampilan jam yang sudah selesai.

Cara termudah untuk membuat screenshot adalah menggunakan emulator. Saat tampilan jam sedang berjalan, klik tombol screenshot:

Pastikan pengambilan gambar disetel ke Display Shape:

Simpan gambar dan ganti file res/drawable/preview.png dengan gambar baru ini. Bangun ulang dan deploy tampilan jam seperti sebelumnya.

10. Selamat

Selamat! Anda telah mempelajari dasar-dasar pembuatan tampilan jam dengan Format Tampilan Jam.

Solusi untuk codelab

Anda dapat memperoleh kode untuk solusi codelab ini dari GitHub:

$ git clone https://github.com/android/codelab-watch-face-format