Bergabunglah bersama kami di ⁠#Android11: The Beta Launch Show pada tanggal 3 Juni!

Mengoptimalkan aplikasi untuk Chrome OS

Aplikasi Android berperan penting dalam mendefinisikan kembali penampilan komputasi modern di layar lebar. Oleh karena itu, melakukan porting aplikasi ponsel ke 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.

Memanfaatkan dukungan untuk multi-aplikasi dengan format bebas

Implementasi aplikasi Android di Chrome OS meliputi dukungan multi-aplikasi dasar. Alih-alih selalu menggunakan layar penuh, Android merender aplikasi di Chrome OS ke penampung jendela dengan format bebas yang sesuai untuk faktor bentuk ini, seperti yang ditunjukkan pada gambar 1.

Gambar 1. Aplikasi dalam berbagai ukuran jendela

Pengguna dapat mengubah ukuran jendela yang menjadi host aplikasi Android Anda, seperti yang ditunjukkan pada gambar 2. Untuk memastikan jendela dengan format bebas tersebut diubah ukurannya secara halus dan dapat menampilkan seluruh kontennya kepada pengguna, baca pedoman dan hal-hal yang harus diperhatikan dalam Kompatibilitas ukuran layar untuk Chromebook.

Gambar 2. Jendela aplikasi yang dapat diubah ukurannya

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

  • 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 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 sentuh. 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.
  • Status hover diimplementasikan dengan tujuan dan pertimbangan terbaik guna meningkatkan visibilitas UI tanpa membingungkan pengguna.

Gambar 3. Men-scroll dengan roda mouse

Gambar 4. Status hover tombol

Jika perlu, Anda harus membedakan antara input mouse dan sentuh. Misalnya, mengetuk item dapat memicu UI multi-pilihan, sementara mengklik item yang sama dapat memicu pemilihan tunggal.

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.
  • Pointer 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.

Pintasan keyboard dan navigasi

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 UI penting juga harus ditangani oleh navigasi tab. Hal ini sangat penting untuk aksesibilitas. Namun, untuk memenuhi standar aksesibilitas, semua permukaan UI harus memiliki status fokus yang jelas dan memenuhi persyaratan kompatibilitas.

Gambar 5. Tabbing transversal

Gambar 6. 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 sentuh, 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 fungsionalitas tingkat desktop untuk aplikasi Anda, pertimbangkan input tambahan yang berorientasi produktivitas berikut.

Menu konteks

Gambar 7. 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 8. Tarik lalu lepas pada antarmuka hierarki file

Membuat interaksi tarik lalu lepas dapat menghadirkan fungsi produktivitas yang efisien dan intuitif ke aplikasi Anda. Untuk 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

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 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 signifikansi 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 floating (FAB) untuk navigasi keyboard yang lebih baik. Secara default, FAB diposisikan terakhir dalam urutan tabbing 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.

Mengubah kecerahan layar

Anda tidak dapat menyesuaikan kecerahan perangkat di Chrome OS. 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: