Layar besar akan meningkatkan peluang pengembangan aplikasi Anda. Layar besar tablet, perangkat foldable, dan perangkat ChromeOS menampilkan konten, memudahkan multitasking, serta memungkinkan antarmuka pengguna yang tidak mungkin dilakukan di layar kecil.
Untuk memulai pengembangan perangkat layar besar, ikuti pedoman kualitas aplikasi perangkat layar besar. Pedoman ini adalah serangkaian persyaratan komprehensif yang dirancang untuk membantu Anda mengoptimalkan aplikasi di layar besar.
Pedoman kualitas diatur dalam tiga tingkatan: Siap digunakan perangkat layar besar, Dioptimalkan untuk perangkat layar besar, dan Terdiferensiasi di perangkat layar besar. Tambahkan kemampuan layar besar ke aplikasi Anda secara bertahap melalui beberapa tingkatan, dimulai dengan Siap digunakan perangkat layar besar. Jika Anda memiliki aplikasi yang sudah ada, gunakan pengujian pedoman kualitas untuk menentukan tingkat yang saat ini didukung aplikasi Anda, lalu terapkan fitur tingkat demi tingkat hingga aplikasi untuk layar besar dapat dibedakan secara unik.
Siap digunakan perangkat layar besar
Aplikasi Anda siap digunakan di perangkat layar besar saat pengguna dapat mengakses semua fungsi aplikasi Anda di perangkat layar besar. Aplikasi harus mendukung orientasi potret dan lanskap serta mode multi-aplikasi, tetapi tata letak aplikasi dan antarmuka pengguna bisa menjadi kurang optimal.
Konfigurasi dan kontinuitas
Perubahan konfigurasi seperti rotasi perangkat, perubahan ukuran jendela dalam mode multi-aplikasi, dan tindakan melipat dan membentangkan perangkat foldable dapat menyebabkan pengguna kehilangan konteks atau bahkan lebih buruk, yaitu kehilangan data.
Pastikan aplikasi Anda mempertahankan dan memulihkan status selama perubahan konfigurasi dan melanjutkan proses yang sedang berlangsung seperti pemutaran media.
Untuk informasi selengkapnya, lihat panduan developer berikut:
Mode multi-aplikasi
Perangkat layar besar membuat mode multi-aplikasi lebih berguna dan produktif. Buat aplikasi Anda dapat berjalan dalam mode multi-aplikasi bersama aplikasi lainnya dalam mode layar terpisah atau bentuk bebas.
Saat aplikasi berada dalam mode multi-aplikasi, gunakan WindowMetrics
API untuk menentukan ukuran jendela aplikasi secara akurat.
Lihat Dukungan multi-aplikasi.
Multi-resume
Di Android 10 (API level 29) dan versi lebih baru, semua aktivitas tetap dalam status RESUMED
saat perangkat dalam mode multi-aplikasi. Sebelum Android 10, aktivitas yang tidak difokuskan tetap berada di status STARTED
, tetapi tidak RESUMED
.
Pastikan aplikasi Anda mendukung multi-resume dengan melanjutkan proses yang sedang berlangsung, seperti pemutaran media atau download file, saat aplikasi tidak difokuskan. Aplikasi Anda juga harus menangani hilangnya resource eksklusif seperti kamera dan mikrofon perangkat.
Lihat Siklus proses multi-aplikasi di Dukungan multi-aplikasi.
Pratinjau kamera
Jika aplikasi Anda menyertakan pratinjau kamera, validasikan pratinjau untuk mengetahui orientasi dan rasio aspek di perangkat layar besar. Perangkat foldable layar besar dalam orientasi potret dapat memiliki rasio aspek lanskap, dan mode multi-aplikasi dapat menampilkan aplikasi dalam orientasi potret di jendela yang dapat diubah ukurannya jika perangkat menggunakan orientasi lanskap.
Lihat referensi berikut:
Proyeksi media
Proyeksi media membuat tampilan virtual berdasarkan batas tampilan (sumber) asli. Tampilan sebenarnya adalah seluruh layar perangkat, meskipun perangkat sedang berada dalam mode multi-aplikasi dan aplikasi yang membuat proyeksi media berjalan di jendela.
Untuk mendapatkan batas yang benar bagi proyeksi media layar besar, gunakan WindowMetrics
API yang diperkenalkan di Android 11 (level API 30) atau, untuk kompatibilitas hingga level API 14, gunakan WindowMetrics
API WindowManager Jetpack.
Lihat Proyeksi media di perangkat layar besar.
Dukungan dasar untuk perangkat input eksternal
Pengguna sering kali menghubungkan keyboard atau mouse eksternal ke tablet. Chromebook dilengkapi dengan keyboard dan trackpad bawaan. Dukung perangkat input eksternal dengan memungkinkan aplikasi Anda menangani tindakan keyboard, mouse, dan trackpad seperti berikut:
- Memilih tombol, kolom input, dan ikon navigasi
- Memilih item menu, tombol pilihan, kotak centang, dan teks
- Men-scroll secara vertikal dan horizontal dalam elemen yang dapat di-scroll, seperti daftar
Lihat Kompatibilitas input di layar besar.
Dioptimalkan untuk perangkat layar besar
Jika aplikasi Anda dioptimalkan untuk perangkat layar besar, pengalaman pengguna menjadi lebih imersif, produktif, dan menarik—pengguna akan menyukai aplikasi Anda di perangkat layar besar.
Tata letak responsif/adaptif
Untuk mendukung layar besar dan kecil, buat desain tata letak responsif/adaptif yang memberikan pengalaman pengguna yang optimal di semua jenis perangkat.
Mulailah dengan memahami hal-hal berikut:
- Desain Material — Memahami tata letak
- Mendukung berbagai ukuran layar
Class ukuran jendela
Class ukuran jendela adalah sekumpulan titik henti sementara area pandang tak berubah yang membantu Anda menerapkan desain responsif/adaptif. Gunakan class ukuran jendela untuk mengelompokkan area tampilan yang tersedia bagi aplikasi sebagai ringkas, sedang, atau diperluas, lalu terapkan tata letak yang dioptimalkan.
Lihat Class ukuran jendela di Mendukung berbagai ukuran layar.
Navigasi aplikasi adaptif
Pada layar kecil, menu navigasi bagian bawah berfungsi dengan baik. Tetapi pada layar besar, kolom samping navigasi atau panel navigasi memanfaatkan ruang layar yang ditingkatkan dengan lebih baik. Sesuaikan navigasi aplikasi Anda dengan perubahan ukuran layar.
Lihat Desain Material — Menerapkan tata letak.
Elemen UI responsif
Memformat elemen UI berdasarkan ukuran layar. Membatasi lebar tombol, kartu, dan kolom teks yang memiliki lebar penuh di layar kecil ke ukuran yang sesuai secara fungsional di perangkat layar besar. Jangan sampai kotak dialog dan jendela modal lainnya mengisi seluruh layar. Posisikan tampilan menu konteks dan pop-up terkait elemen lainnya bersebelahan dengan elemen yang dipilih pengguna, bukan di tengah layar.
Lihat Komponen di Desain Material, termasuk Tombol, Kolom teks, Menu, dan Dialog.
Aksesibilitas
Optimalkan aplikasi Anda untuk fitur aksesibilitas (a11y) seperti Tab dan navigasi tombol panah. Sediakan pintasan keyboard untuk tindakan yang biasa digunakan seperti pilih, salin, potong, dan tempel. Aktifkan kontrol keyboard untuk pemutaran media; misalnya, aktifkan tombol spasi untuk memutar dan menjeda media, atau tombol Enter untuk mengirim pesan di aplikasi komunikasi.
Lihat Membuat aplikasi yang lebih mudah diakses.
Meningkatkan dukungan untuk perangkat input eksternal
Aplikasi yang dioptimalkan untuk perangkat layar besar memberikan dukungan yang ditingkatkan untuk input keyboard, mouse, dan trackpad. Menu opsi dapat diakses dengan perilaku klik kanan mouse dan trackpad. Konten aplikasi dapat di-zoom menggunakan roda scroll mouse dan gestur cubit trackpad. Elemen UI memiliki status arahkan kursor.
Terdiferensiasi di perangkat layar besar
Aplikasi yang terdiferensiasi di perangkat layar besar tampil berbeda dari aplikasi lainnya. Aplikasi yang terdiferensiasi memberikan pengalaman pengguna yang tidak dapat diterapkan di layar kecil.
Multitasking
Layar besar memudahkan multitasking. Mode multi-aplikasi memungkinkan multitasking, begitu juga dengan mode tampilan khusus picture-in-picture dan multi-instance.
Mode picture-in-picture
Jika aplikasi Anda memutar konten video, implementasikan mode picture-in-picture agar aplikasi dapat terus diputar saat pengguna berinteraksi dengan aplikasi lain.
Lihat Dukungan picture-in-picture (PiP).
Mode multi-instance
Tingkatkan produktivitas di aplikasi seperti editor dokumen atau pengelola konten dengan mengaktifkan dua instance aplikasi atau lebih untuk dijalankan secara bersamaan.
Lihat Multi-instance di Dukungan multi-aplikasi.
Perangkat foldable
Perangkat foldable layar besar itu layaknya ponsel dan tablet yang menjadi satu. Fitur lipatan seperti postur mode di atas meja dan postur buku menawarkan kemungkinan pengalaman pengguna baru. Buat aplikasi Anda berbeda dari yang lain dengan mendukung fitur unik perangkat foldable.
Lihat referensi berikut:
- Mempelajari perangkat foldable
- Membuat aplikasi Anda fold aware
- Menguji aplikasi di perangkat foldable
Tarik lalu lepas
Layar besar sangat cocok untuk interaksi tarik lalu lepas—dalam aplikasi atau, di Android 7.0 (API level 24) dan yang lebih tinggi, di antara aplikasi dalam mode multi-aplikasi.
Tingkatkan produktivitas dan interaksi pengguna dengan menambahkan kemampuan tarik lalu lepas ke aplikasi Anda.
Lihat Tarik lalu lepas.
Dukungan terdiferensiasi untuk perangkat input eksternal
Berikan dukungan seperti desktop untuk perangkat input eksternal. Buat rangkaian lengkap pintasan keyboard yang dapat disesuaikan. Aktifkan kombinasi keyboard dan mouse atau keyboard dan trackpad, seperti Ctrl+klik/Ctrl+ketuk dan Shift+klik/Shift+ketuk untuk memberikan kemampuan yang diperluas.
Tampilkan scrollbar saat pengguna men-scroll konten menggunakan mouse atau trackpad. Tampilkan elemen konten tersembunyi seperti menu fly-out atau tooltip saat mengarahkan kursor menggunakan mouse atau trackpad. Sertakan menu dan menu konteks bergaya desktop. Buat panel UI dapat diubah ukurannya dengan mouse atau trackpad. Aktifkan beberapa klik dengan mouse dan beberapa ketukan dengan trackpad.
Stilus
Aplikasi tingkat atas mendukung perangkat layar besar yang dilengkapi stilus. Dengan stilus, pengguna dapat menggambar, menulis, menghapus, menarik lalu melepas, serta melakukan berbagai interaksi sentuh dan gestur lainnya.
Dukungan stilus yang ditingkatkan mencakup sensitivitas tekanan, deteksi kemiringan, dan penolakan telapak tangan dan jari (sehingga sentuhan asal tidak terdeteksi).
Berikan pengalaman pengguna yang luar biasa di perangkat premium dengan mendukung input stilus sepenuhnya.
Lihat Stilus di Kompatibilitas input di perangkat layar besar.
Langkah berikutnya
Lihat pedoman kualitas aplikasi perangkat layar besar untuk mulai membuat aplikasi agar memenuhi kriteria siap digunakan, dioptimalkan, atau terdiferensiasi di perangkat layar besar.
Referensi lainnya
Koleksi video: