Piksel kepadatan mandiri (dp) dan piksel skalabel (sp) sangat penting untuk membangun tata letak dan menampilkan font yang merespons secara seragam berbagai kepadatan layar, class ukuran, faktor bentuk, dan rasio aspek yang membentuk perangkat Android.
Poin-poin penting
- Jika menggunakan petak dasar, gunakan ukuran 4 dan 8.
- Mencatat spesifikasi dalam dp dan sp, bukan piksel.
- Mengekspor grafis bitmap (raster) untuk semua bucket.
- Desain dengan pola pikir responsif dengan mempertimbangkan berbagai class ukuran, resolusi, dan rasio aspek.
- Piksel kepadatan mandiri (dp): piksel kepadatan mandiri adalah unit fleksibel yang diskalakan agar memiliki dimensi seragam di layar mana pun. Satuan ini didasarkan pada kepadatan fisik layar. Satuan ini relatif terhadap layar 160 dpi (titik per inci); 1 dp kurang lebih sama dengan 1 px.
- Piksel yang dapat diskalakan (sp): Piksel yang dapat diskalakan memiliki fungsi yang sama dengan dp, tetapi untuk font. Nilai default sp sama dengan nilai default untuk dp. Sistem Android menghitung ukuran font sebenarnya yang akan digunakan berdasarkan perangkat dan preferensi pengguna yang ditetapkan di setelan perangkat.
Perbedaan utama antara satuan pengukuran ini adalah piksel yang dapat diskalakan mempertahankan setelan font pengguna. Pengguna yang memiliki setelan teks yang lebih besar untuk aksesibilitas akan melihat ukuran font yang sesuai dengan preferensi ukuran teks mereka. Lihat cara mengubah ukuran font di Compose.
Android menggunakan satuan ini untuk membantu menskalakan dan menerjemahkan di seluruh rentang perangkat dan resolusi.
Bucket kepadatan
Layar kepadatan tinggi memiliki lebih banyak piksel per inci daripada layar kepadatan rendah. Akibatnya, elemen UI dengan dimensi piksel yang sama akan tampak lebih besar di layar berkepadatan rendah, dan lebih kecil di layar berkepadatan tinggi. Itulah sebabnya Anda tidak boleh menyatakan pengukuran dalam piksel.
Android mengelompokkan rentang kepadatan layar ke dalam "bucket" dan menggunakannya untuk
menayangkan kumpulan aset yang optimal ke perangkat Anda. Bucket kepadatan yang paling umum digunakan adalah mdpi, hdpi, xhdpi, xxhdpi, dan xxxhdpi (nodpi dan
anydpi merujuk ke bucket yang tidak diskalakan per resolusi perangkat, biasanya
digunakan untuk drawable vektor), yang masing-masing sesuai dengan file resource aplikasi Anda.
Untuk menghitung dp:
dp = (lebar dalam piksel * 160) / kepadatan layar
Petak dasar
Membangun dengan petak dasar membantu menciptakan jarak dan perataan yang konsisten di seluruh UI Anda. UI Android menggunakan petak 8 dp untuk tata letak, komponen, dan jarak.
Elemen yang lebih kecil seperti ikon, huruf, dan beberapa elemen dalam komponen paling baik disejajarkan dengan petak 4 dp.
Petak tata letak
Petak adalah tulang punggung tata letak apa pun. Pertimbangkan hierarki, jumlah, dan bahkan pesan konten.
Petak hierarkis
Petak hierarkis dibuat dengan mempertimbangkan hierarki atau kepentingan konten. Bayangkan tata letak koran: berita utama yang konsisten menempati sebagian besar tata letak, sementara kolom yang lebih kecil menampilkan artikel sebelumnya.
Saat beradaptasi di berbagai ukuran layar, tata letak hierarkis dapat diatur ulang, diubah ukurannya, dan menampilkan sel petak.
Petak modular
Petak modular disiapkan dalam kolom dan baris yang konsisten, sehingga membuat sistem petak persegi panjang untuk menyelaraskan konten. Petak modular berfungsi baik untuk konten dengan tingkat kepentingan dan ukuran yang serupa, seperti galeri kartu.
Petak modular adaptif dapat menambahkan lebih banyak sel petak, dan konten di dalamnya dapat diatur, atau di-wrap, ke sel petak yang berbeda. Sel petak dapat tetap konsisten di berbagai ukuran atau mengubah ukuran bergantung pada kebutuhan konten.
Petak kolom
Kolom membangun struktur petak untuk memberikan definisi vertikal pada tata letak dengan membagi konten dalam area isi. Konten ditempatkan di area layar yang berisi kolom. Sejajarkan dengan petak di bawahnya untuk menyelaraskan konten, tetapi harus mempertahankan ukuran yang fleksibel.
Pelajari dasar-dasar cara menyiapkan petak kolom dan menerapkan konten di Dasar-dasar tata letak. Petak kolom dapat mengakomodasi faktor bentuk yang berbeda dengan mengubah ukuran kolom dan jumlah kolom sesuai kebutuhan ukuran layar pada titik tertentu sekaligus memungkinkan konten untuk diskalakan.
Class ukuran
Class ukuran jendela adalah sekumpulan titik henti sementara area pandang tidak berubah yang membantu Anda mendesain, mengembangkan, dan menguji tata letak aplikasi yang responsif dan adaptif. Android membagi class ukuran jendela menjadi 3: Rapat, Sedang, dan Diperluas. Baca selengkapnya di Class ukuran jendela.
Rasio aspek
Rasio aspek adalah proporsi antara lebar elemen dan tingginya. Rasio aspek ditulis sebagai lebar:tinggi.
Untuk menjaga konsistensi tata letak, gunakan rasio aspek yang konsisten pada elemen seperti gambar, permukaan, dan ukuran layar.
Rasio aspek berikut direkomendasikan untuk digunakan di seluruh UI Anda:
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3