Mengoptimalkan aplikasi untuk ChromeOS

Aplikasi Android berperan penting dalam mengubah penampilan komputasi modern di layar lebar. Namun, menjalankan aplikasi seluler di Chromebook tidak memberikan pengalaman terbaik kepada pengguna.

Halaman ini menjelaskan beberapa cara yang dapat Anda lakukan untuk menyesuaikan pengalaman Anda ke arah laptop dan faktor bentuk konvertibel. Lihat daftar lengkap pengujian untuk mempelajari lebih lanjut cara menguji kompatibilitas aplikasi di perangkat ini.

Memanfaatkan dukungan untuk multi-jendela dengan format bebas

Implementasi aplikasi Android di ChromeOS mencakup multi-aplikasi dasar dukungan teknis IT. Alih-alih selalu menggunakan layar penuh, Android merender aplikasi di ChromeOS ke dalam penampung jendela bentuk bebas, yang lebih sesuai untuk perangkat ini.

Pengguna dapat mengubah ukuran jendela yang berisi aplikasi Android Anda, seperti yang ditunjukkan pada gambar 1. Untuk memastikan bahwa ukuran jendela bentuk bebas Anda mengubah ukuran secara halus dan ditampilkan seluruh kontennya kepada pengguna, baca panduan di Pengelolaan jendela.

Gambar 1. Jendela aplikasi yang dapat diubah ukurannya.

Anda dapat meningkatkan pengalaman pengguna jika aplikasi berjalan di ChromeOS dengan mengikuti saran praktik:

  • Tangani siklus proses aktivitas dengan benar di mode multi-aplikasi dan pastikan Anda terus mengupdate UI, bahkan saat aplikasi Anda yang paling fokus.
  • Pastikan bahwa aplikasi Anda menyesuaikan tata letaknya dengan tepat setiap kali pengguna mengubah ukuran jendela.
  • Sesuaikan dimensi awal jendela aplikasi dengan menentukan ukuran peluncurannya.
  • Perlu diketahui bahwa orientasi aktivitas root aplikasi memengaruhi semua jendelanya.

Menyesuaikan warna kolom atas

ChromeOS menggunakan tema aplikasi untuk mewarnai panel atas yang ditampilkan di bagian atas aplikasi, yang muncul ketika pengguna menahan kontrol jendela dan tombol kembali. Untuk membuat aplikasi Anda terlihat bagus dan dapat disesuaikan untuk ChromeOS, colorPrimary dan, jika memungkinkan, colorPrimaryDark pada tema aplikasi Anda.

colorPrimaryDark digunakan untuk mewarnai panel atas. Jika saja colorPrimary sudah ditentukan, ChromeOS akan menggunakan versi yang lebih gelap di bilah atas. Untuk mengetahui informasi selengkapnya, lihat Gaya dan tema.

Mendukung keyboard, trackpad, dan mouse

Semua Chromebook memiliki keyboard fisik dan trackpad, dan sebagian juga memiliki layar sentuh. Beberapa perangkat bisa berubah dari laptop menjadi tablet.

Di aplikasi Anda untuk ChromeOS, dukung input dari mouse, trackpad, dan keyboard sehingga aplikasi dapat digunakan tanpa layar sentuh. Banyak aplikasi yang sudah mendukung {i>mouse<i} dan {i>trackpad<i} tanpa perlu pekerjaan tambahan. Namun, sebaiknya sesuaikan berperilaku secara tepat untuk {i>mouse<i} dan untuk mendukung dan membedakan antara input mouse dan sentuh.

Pastikan bahwa:

  • Semua target dapat diklik dengan mouse.
  • Semua permukaan sentuh yang dapat di-scroll akan men-scroll peristiwa roda mouse, seperti yang ditunjukkan dalam gambar 2.
  • Status arahkan kursor diterapkan dengan pertimbangan yang cermat untuk meningkatkan Penemuan UI tanpa membingungkan pengguna, seperti yang ditunjukkan pada gambar 3.

Gambar 2. Men-scroll dengan roda mouse.

Gambar 3. Status pengarahan kursor tombol.

Jika perlu, bedakan antara input mouse dan sentuh. Sebagai contoh, sentuh & menahan item dapat memicu UI multi-pilihan, sementara mengklik kanan item yang sama mungkin akan memicu menu opsi.

Kursor khusus

Sesuaikan aplikasi Anda kursor mouse untuk menunjukkan elemen UI apa yang digunakan pengguna berinteraksi dan bagaimana caranya. Anda dapat menetapkan PointerIcon agar digunakan saat pengguna berinteraksi dengan tampilan dengan memanggil metode setPointerIcon().

Di aplikasi, tampilkan semua hal berikut:

  • Pointer I-beam untuk teks
  • Handel pengubah ukuran pada tepi lapisan yang dapat diubah ukurannya
  • Pointer tangan terbuka dan tertutup untuk konten yang dapat digeser atau ditarik menggunakan gestur klik dan tarik
  • Indikator lingkaran berputar saat sedang memproses

Class PointerIcon memberikan konstanta yang dapat Anda gunakan untuk mengimplementasikan kursor kustom.

Pintasan keyboard dan navigasi

Karena setiap Chromebook memiliki keyboard fisik, sediakan tombol pintas untuk memungkinkan pengguna menjadi lebih produktif. Misalnya, jika aplikasi Anda mendukung pencetakan, Anda dapat menggunakan Control+P untuk membuka dialog cetak.

Demikian pula, tangani semua elemen UI penting menggunakan navigasi tab. Hal ini sangat penting untuk aksesibilitas. Untuk memenuhi standar aksesibilitas, semua platform UI harus memiliki fokus yang jelas dan mematuhi aksesibilitas status, seperti yang ditunjukkan dalam gambar berikut:

Gambar 4. Penggunaan tombol tab transversal.

Gambar 5. Mengganti gestur geser dengan kontrol yang muncul saat kursor diarahkan.

Pastikan untuk mengimplementasikan alternatif {i>keyboard<i} atau mouse untuk inti fitur yang tersembunyi dalam interaksi khusus sentuhan, seperti sentuhan & tindakan menahan, geser, atau gestur multi-kontrol lainnya. Contoh solusinya adalah dengan menyediakan yang muncul di permukaan saat kursor diarahkan ke atasnya.

Untuk mengetahui informasi selengkapnya tentang dukungan keyboard, trackpad, dan mouse, lihat Kompatibilitas input di perangkat layar besar.

Meningkatkan input pengguna lebih lanjut

Agar aplikasi Anda memiliki fungsi tingkat desktop, pertimbangkan hal-hal berikut input yang berorientasi pada produktivitas.

Menu konteks

Menu konteks Android, yang merupakan akselerator lain untuk membawa pengguna ke aplikasi Anda, dapat dipicu dengan mengeklik mouse atau tombol {i>trackpad<i} tombol sekunder atau dengan sentuhan & tahan layar sentuh:

Gambar 6. Menu konteks yang muncul saat mengklik kanan.

Tarik lalu lepas

Membangun interaksi tarik lalu lepas, seperti dalam gambar berikut, dapat menghadirkan produktivitas yang efisien dan intuitif fungsionalitas baru ini pada aplikasi Anda. Untuk informasi selengkapnya, lihat Tarik lalu lepas.

Gambar 7. Tarik lalu lepas pada antarmuka hierarki file.

Dukungan stilus

Dukungan stilus sangat penting untuk aplikasi menggambar dan mencatat. Berikan dukungan yang ditingkatkan untuk Chromebook dan tablet yang dilengkapi stilus dengan menerapkan interaksi yang disesuaikan untuk penggunaan input stilus.

Pertimbangkan potensi variasi hardware stilus yang berbeda saat merancang interaksi stilus Anda. Untuk garis besar API stilus, lihat Kompatibilitas input di perangkat layar besar.

Menjadikan tata letak Anda responsif

Manfaatkan dengan baik real estate layar yang tersedia untuk aplikasi Anda, terlepas dari kondisi visualnya (layar penuh, potret, lanskap, atau jendela). Beberapa contoh penggunaan ruang yang baik meliputi hal berikut:

  • Menampilkan arsitektur aplikasi.
  • Batasi panjang teks dan ukuran gambar ke lebar maksimum.
  • Manfaatkan properti di toolbar aplikasi dengan lebih baik.
  • Meningkatkan penempatan kemampuan UI dengan menyesuaikan aplikasi ke penggunaan mouse yang besar.
  • Mengoptimalkan ukuran video dan gambar, menetapkan serangkaian lebar maksimum dan tinggi untuk semua media, serta memaksimalkan keterbacaan dan keterpindaian.
  • Terapkan sistem kolom responsif. Untuk informasi selengkapnya, lihat Responsif petak tata letak.
  • Ubah ukuran dan ubah UI saat diperlukan menggunakan sistem kolom. Jika memungkinkan, hindari membuka jendela baru.
  • Hapus atau kurangi pentingnya komponen scroll horizontal.
  • Hindari UI modal layar penuh. Gunakan UI inline, seperti indikator progres dan untuk semua tindakan non-kritis.
  • Gunakan komponen UI yang ditingkatkan, seperti pemilih waktu dan tanggal, kolom teks, dan menu yang dirancang untuk {i>mouse<i}, {i> keyboard<i}, dan layar yang lebih besar.
  • Menggunakan pengeditan inline, kolom tambahan, atau UI modal, bukan aktivitas baru untuk fitur edit kecil hingga sedang.
  • Hapus atau ubah tombol tindakan mengambang (FAB) untuk keyboard yang lebih baik navigasi. Secara default, posisi FAB terakhir di tab transversal pesanan. Sebaliknya, jadikan sebagai tindakan utama, karena itu adalah tindakan utama, atau gantilah dengan {i>affordance<i} lain yang lebih tinggi.

Gambar 8. Tiruan tata letak responsif pada layar ukuran ponsel dan desktop.

Tombol kembali level sistem adalah pola yang dibawa dari root perangkat Android, yang tidak cocok seperti dalam konteks desktop.

Seiring aplikasi Anda makin disesuaikan untuk lingkungan laptop, pertimbangkan bergerak ke arah pola navigasi yang tidak mengutamakan tombol kembali. Biarkan aplikasi menangani tumpukan historinya sendiri dengan memberikan pengembalian dalam aplikasi tombol, breadcrumb, atau rute keluar lainnya seperti tombol tutup atau batal bagian dari UI layar besarnya.

Anda dapat mengontrol apakah aplikasi menampilkan tombol kembali di jendelanya dengan cara mengatur preferensi di dalam <activity> . Setelan true menyembunyikan tombol kembali:

<meta-data android:name="WindowManagerPreference:SuppressWindowControlNavigationButton" android:value="true" />

Menyelesaikan masalah dengan gambar pratinjau kamera

Masalah kamera dapat muncul jika aplikasi hanya dapat berjalan dalam orientasi potret, tetapi pengguna menjalankannya di layar lanskap. Dalam hal ini, pratinjau atau hasil yang diambil mungkin dirotasi dengan tidak benar.

Mode kompatibilitas mengubah cara sistem menangani peristiwa, seperti perubahan orientasi, di ChromeOS. Hal ini membantu mencegah masalah saat kamera digunakan pada kesalahan mode orientasi. Untuk mengaktifkan mode kompatibilitas, penuhi kriteria berikut:

  • Targetkan minimal Android 7.0 (API level 24). Tujuan SDK tingkat minimum bisa lebih rendah.
  • Buat aplikasi agar dapat diubah ukurannya.

Menangani setelan perangkat

Pertimbangkan setelan perangkat berikut untuk aplikasi yang berjalan di ChromeOS.

Mengubah volume

Perangkat ChromeOS adalah perangkat dengan volume tetap: aplikasi yang memutar suara memiliki menggunakan kontrol volume. Ikuti panduan untuk Bekerja dengan perangkat volume tetap.

Mengubah kecerahan layar

Anda tidak dapat menyesuaikan kecerahan perangkat di ChromeOS. Panggilan ke system settings dan WindowManager.LayoutParams akan diabaikan.

Materi belajar tambahan

Guna mempelajari lebih lanjut cara mengoptimalkan aplikasi Android untuk Chromebook, lihat referensi berikut: