Mengoptimalkan aplikasi untuk Chrome OS

Aplikasi Android berperan penting dalam mengubah penampilan komputasi modern di layar lebar. Meskipun demikian, hanya menjalankan aplikasi seluler di Chromebook saja tidak akan memberikan pengalaman terbaik bagi pengguna. Halaman ini menjelaskan beberapa cara yang dapat Anda lakukan untuk menyesuaikan pengalaman aplikasi Anda dengan perangkat laptop dan perangkat berfaktor 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 Chrome OS meliputi dukungan multi-jendela dasar. Alih-alih selalu menggunakan layar penuh, Android merender aplikasi di Chrome OS ke dalam penampung jendela dengan format 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 jendela dengan format bebas tersebut diubah ukurannya secara halus dan dapat menampilkan seluruh kontennya kepada pengguna, baca panduan di Pengelolaan Jendela.

Gambar 1. Jendela aplikasi yang dapat diubah ukurannya

Anda dapat meningkatkan pengalaman pengguna saat aplikasi berjalan di Chrome OS dengan mengikuti praktik terbaik berikut:

Tangani siklus proses aktivitas dengan benar dalam mode multi-jendela dan pastikan Anda terus mengupdate UI meskipun aplikasi Anda bukan jendela 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.
Orientasi aktivitas root aplikasi memengaruhi semua jendelanya. Perhatikan aturan aktivitas root.

Untuk informasi selengkapnya, baca tentang pengelolaan jendela.

Menyesuaikan warna kolom atas

Chrome OS menggunakan tema aplikasi untuk mewarnai kolom atas yang ditampilkan di bagian atas aplikasi, yang muncul saat pengguna menahan kontrol jendela dan tombol kembali. Untuk membuat aplikasi tampak menarik dan dapat disesuaikan untuk Chrome OS, tentukan nilai colorPrimary dan colorPrimaryDark (jika memungkinkan) di tema aplikasi Anda. Nilai yang terakhir digunakan untuk mewarnai kolom atas. Jika hanya colorPrimary yang ditentukan, Chrome OS akan menggunakan versi yang lebih gelap di kolom atas. Untuk mengetahui informasi selengkapnya, lihat Menggunakan tema material.

Mendukung keyboard, trackpad, dan mouse

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

Semua aplikasi untuk Chrome OS harus mendukung mouse, trackpad, dan keyboard, serta dapat digunakan tanpa layar sentuh. Banyak aplikasi yang sudah mendukung mouse dan trackpad tanpa memerlukan pekerjaan tambahan. Namun, sebaiknya sesuaikan perilaku aplikasi untuk mouse dengan tepat, dan Anda harus mendukung serta membedakan antara input mouse dan sentuhan. Baca dukungan mouse lebih lanjut pada Kompatibilitas input untuk Chromebook.

Anda harus memastikan bahwa:

Semua target dapat diklik dengan mouse
Semua permukaan sentuh yang dapat di-scroll akan melakukan scroll setiap kali roda mouse digulir.
Perilaku saat kursor diarahkan diimplementasikan dengan tujuan dan pertimbangan terbaik guna meningkatkan visibilitas UI tanpa membingungkan pengguna.

Gambar 2. Men-scroll dengan roda mouse

Gambar 3. Perilaku saat kursor diarahkan pada tombol

Jika perlu, Anda harus membedakan antara input mouse dan sentuh. Misalnya, menekan lama item dapat memicu UI multi-pilihan, sementara mengklik kanan item yang sama dapat memicu menu opsi.

Kursor khusus

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

Aplikasi akan menampilkan:

Pointer I-beam untuk teks.
Tuas pengubah ukuran pada tepi lapisan yang dapat diubah.
Kursor tangan terbuka/tangan tertutup untuk konten yang dapat digeser atau ditarik melalui gestur klik dan tarik.
Indikator lingkaran berputar saat sedang memproses.

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

Karena setiap Chromebook memiliki keyboard fisik, Anda harus menyediakan tombol cepat (hotkey) untuk memungkinkan pengguna menjadi lebih produktif. Misalnya, jika aplikasi mendukung pencetakan, Anda bisa menggunakan Control + P untuk membuka dialog cetak. Demikian pula, semua elemen UI yang penting juga harus ditangani oleh navigasi tab. Hal ini sangat penting untuk aksesibilitas. Namun, untuk memenuhi standar aksesibilitas, semua permukaan UI harus memiliki status yang jelas dan berfokus pada kepatuhan aksesibilitas.

Gambar 4. Penggunaan tombol Tab secara transversal

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

Anda juga harus memastikan untuk mengimplementasikan alternatif keyboard atau mouse ke fitur inti yang tersembunyi di bawah interaksi khusus sentuhan, seperti menekan lama, menggeser, atau gestur multi-sentuh lainnya. Contoh solusinya adalah dengan menyediakan tombol yang muncul di permukaan saat kursor diarahkan.

Meningkatkan input pengguna lebih lanjut

Agar mencapai fungsi tingkat desktop untuk aplikasi Anda, pertimbangkan input tambahan berikut ini yang berorientasi pada produktivitas.

Menu konteks

Gambar 6. Menu konteks yang muncul pada klik kanan

Menu konteks Android, yaitu akselerator lain untuk mengarahkan pengguna ke fitur aplikasi Anda, dapat dipicu dengan mengklik tombol sekunder mouse atau trackpad, atau melalui tekan lama pada layar sentuh.

Tarik lalu lepas

Gambar 7. Tarik lalu lepas pada antarmuka hierarki file

Membuat interaksi tarik lalu lepas dapat menghadirkan fungsi produktivitas yang efisien dan intuitif ke aplikasi Anda. Untuk mengetahui informasi selengkapnya, lihat Tarik lalu lepas.

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 mengetahui uraian API stilus, lihat Kompatibilitas input untuk Chromebook.

Menjadikan tata letak Anda responsif

Gambar 8. Model tata letak responsif di layar ponsel dan ukuran desktop

Aplikasi Anda harus memanfaatkan luas layar yang tersedia, terlepas dari status visualnya (layar penuh, potret, lanskap, jendela). Beberapa contoh penggunaan ruang yang baik meliputi, tetapi tidak terbatas pada:

Menampilkan arsitektur aplikasi.
Membatasi panjang teks dan ukuran gambar hingga lebar maksimum.
Memanfaatkan ruang layar dengan optimal di toolbar aplikasi.
Meningkatkan penempatan atribut UI, dengan mengadaptasinya ke penggunaan mouse, bukan penggunaan sentuh.
Mengoptimalkan ukuran layar untuk video dan gambar, menetapkan set tinggi dan lebar maksimum untuk semua media, serta memaksimalkan keterbacaan dan keterpindaian.
Menerapkan sistem kolom responsif. Untuk mengetahui informasi selengkapnya, lihat UI Responsif.
Mengubah ukuran dan memodifikasi UI saat diperlukan menggunakan sistem kolom, dan menghindari pembukaan jendela baru jika memungkinkan.
Menghapus atau mengurangi kepentingan komponen scroll horizontal.
Menghindari UI modal layar penuh. Gunakan UI inline, seperti indikator progres dan pemberitahuan, untuk semua tindakan yang tidak penting
Menggunakan komponen UI yang disempurnakan, seperti alat pilih waktu dan tanggal, kolom teks, serta menu drop-down, yang dirancang untuk mouse, keyboard, dan layar yang lebih besar.
Menggunakan edit langsung, seperti kolom tambahan atau UI modal, daripada aktivitas baru untuk fitur edit kecil dan menengah.
Menghapus atau memodifikasi tombol tindakan mengambang (FAB) untuk navigasi keyboard yang lebih baik. Secara default, FAB diposisikan terakhir dalam urutan penggunaan tombol Tab transversal. Ini harus dilakukan terlebih dahulu karena merupakan tindakan utama atau harus diganti oleh atribut lain dengan tingkat yang lebih tinggi.

Seiring aplikasi semakin disesuaikan untuk lingkungan laptop, pertimbangkan untuk beralih ke pola navigasi yang tidak mengutamakan tombol kembali. Aplikasi harus dapat menangani tumpukan historinya sendiri dengan menyediakan tombol kembali dalam aplikasi, breadcrumb, atau rute keluar lainnya seperti tombol tutup atau batalkan sebagai bagian dari UI layar yang besar. Tombol kembali level sistem adalah pola yang dibawa dari root perangkat Android, yang tidak cocok seperti dalam konteks desktop.

Anda dapat mengontrol apakah aplikasi menampilkan tombol kembali di jendelanya atau tidak dengan menyetel preferensi di dalam tag <activity>. Setelan true akan 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, bisa salah dirotasi.

Mode kompatibilitas mengubah cara sistem menangani peristiwa, seperti perubahan orientasi, di Chrome OS. Ini membantu mencegah masalah saat kamera digunakan dalam mode orientasi yang salah. Untuk mengaktifkan mode kompatibilitas:

Targetkan minimal Android 7.0 (API level 24). Anda masih bisa memilih tingkat SDK minimum yang lebih rendah.
Izinkan ukuran aplikasi dapat diubah.

Menangani setelan perangkat

Ubah volume

Perangkat Chrome OS adalah perangkat dengan volume tetap. Aplikasi yang memutar suara harus memiliki kontrol volumenya sendiri. Ikuti panduan untuk Menangani perangkat volume tetap.