Piksel kepadatan mandiri (dp) dan piksel skalabel (sp) sangat penting untuk membuat tata letak dan menampilkan font yang secara seragam merespons berbagai kepadatan layar, class ukuran, faktor bentuk, dan rasio aspek yang membentuk perangkat Android.
Takeaway
- Jika menggunakan petak dasar, tetap gunakan ukuran 4 dan 8.
- Catat spesifikasi dalam dp dan sp, bukan piksel.
- Mengekspor grafis bitmap/raster untuk semua bucket.
- Buat desain dengan pola pikir responsif dengan mempertimbangkan berbagai kelas ukuran, resolusi, dan rasio aspek.
- Piksel kepadatan mandiri (dp): Piksel kepadatan mandiri adalah unit fleksibel yang diskalakan agar memiliki dimensi yang seragam di layar apa pun. Didasarkan pada kepadatan fisik layar. Satuan ini relatif terhadap layar 160 dpi (titik per inci), dengan 1 dp kira-kira sama dengan 1 px.
- Piksel skalabel (sp): Piksel skalabel memiliki fungsi yang sama seperti 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 aplikasi Setelan perangkat Android mereka.
![](https://developer.android.com/static/images/design/ui/mobile/grids-and-units-1-dp-and-sp.png?authuser=8&hl=id)
Perbedaan utama antara satuan pengukuran ini adalah piksel yang skalabel mempertahankan setelan font pengguna. Pengguna yang memiliki setelan teks yang lebih besar untuk aksesibilitas melihat ukuran {i>font<i} sesuai dengan preferensi ukuran teks mereka. Lihat cara mengubah ukuran font di Compose.
Android menggunakan unit-unit ini untuk membantu menskalakan dan menerjemahkan berbagai perangkat dan resolusi.
Bucket kepadatan
Layar berkepadatan tinggi memiliki lebih banyak piksel per inci daripada layar berkepadatan rendah. Akibatnya, elemen UI dengan dimensi piksel yang sama akan muncul lebih besar pada layar berkepadatan rendah, dan lebih kecil pada layar berkepadatan tinggi. Inilah sebabnya Anda tidak boleh mendeklarasikan pengukuran dalam piksel.
Android mengelompokkan rentang kepadatan layar ke dalam "bucket" dan menggunakannya untuk
mengirimkan kumpulan aset yang optimal ke perangkat Anda. Bucket kepadatan
yang paling umum digunakan adalah mdpi
, hdpi
, xhdpi
, xxhdpi
, dan xxxhdpi
(nodpi
dan
anydpi
merujuk pada bucket yang tidak diskalakan sesuai resolusi perangkat, biasanya
digunakan untuk vektor drawable) masing-masing sesuai dengan file resource aplikasi Anda.
![](https://developer.android.com/static/images/design/ui/mobile/grids-and-units-2-density-buckets.png?authuser=8&hl=id)
Untuk menghitung dp:
dp = (lebar dalam piksel * 160) / kepadatan layar
Petak
Petak dasar pengukuran
Membangun aplikasi dengan petak dasar akan membantu menciptakan ruang dan perataan yang konsisten di seluruh UI. UI Android menggunakan petak 8 dp untuk tata letak, komponen, dan spasi.
Elemen yang lebih kecil seperti ikon, jenis, dan beberapa elemen dalam komponen paling baik diselaraskan dengan petak 4 dp.
![](https://developer.android.com/static/images/design/ui/mobile/grids-and-units-3-baseline-grids.png?authuser=8&hl=id)
Kisi kolom
Kolom membangun struktur petak untuk memberikan definisi vertikal ke tata letak dengan membagi konten dalam area isi. Konten ditempatkan di area layar yang berisi kolom. Sejajarkan dengan petak pokok untuk menyelaraskan konten, tetapi harus tetap ukuran yang fleksibel. Pelajari dasar-dasar cara menyiapkan petak kolom dan menerapkan konten dalam Dasar-dasar tata letak.
![](https://developer.android.com/static/images/design/ui/mobile/grids-and-units-4-column-grid.png?authuser=8&hl=id)
Lihat halaman Tata letak kanonis Material 3 untuk mengetahui detail tentang cara membuat tata letak fleksibel di berbagai faktor bentuk.
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 tentang Class ukuran jendela.
Rasio aspek
Rasio aspek adalah proporsi lebar elemen dengan tingginya. Rasio aspek ditulis sebagai width:height.
Untuk mempertahankan konsistensi dalam tata letak, gunakan rasio aspek yang konsisten pada elemen seperti gambar, platform, 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