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 kisi-kisi dasar, tetap gunakan ukuran 4 dan 8.
- Catat spesifikasi dalam dp dan sp, bukan piksel.
- Mengekspor grafik bitmap/raster untuk semua bucket.
- Buat desain dengan pola pikir responsif dengan mempertimbangkan class ukuran, resolusi, dan rasio aspek.
- Piksel kepadatan mandiri (dp): Piksel kepadatan mandiri adalah unit fleksibel yang diskalakan agar memiliki dimensi seragam di layar apa pun. Iklan didasarkan pada kepadatan fisik layar. Satuan ini relatif terhadap layar 160 dpi (titik per inci), dengan 1 dp kurang lebih sama dengan 1 px.
- Piksel skalabel (sp): Piksel skalabel memiliki fungsi yang sama dengan dp, tetapi untuk font. Nilai default sp sama dengan nilai default untuk dp. Sistem Android menghitung ukuran font sebenarnya untuk digunakan berdasarkan perangkat dan preferensi pengguna yang ditetapkan di aplikasi Setelan perangkat Android mereka.
Perbedaan utama antara unit 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 ini untuk membantu menskalakan dan menerjemahkan di 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 mengapa Anda tidak boleh mendeklarasikan pengukuran dalam {i>pixel<i}.
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 per resolusi perangkat, biasanya
digunakan untuk vektor drawable) masing-masing terkait dengan file resource aplikasi Anda.
Untuk menghitung dp:
dp = (lebar dalam piksel * 160) / kepadatan layar
Petak
Petak dasar
Mem-build dengan petak dasar akan membantu membuat spasi dan perataan yang konsisten di seluruh UI. UI Android menggunakan petak 8 dp untuk tata letak, komponen, dan jarak.
Elemen yang lebih kecil seperti ikon, jenis, dan beberapa elemen dalam komponen paling baik disejajarkan dengan petak 4 dp.
Petak 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. Menyelaraskan dengan petak yang mendasarinya untuk menyelaraskan konten, tetapi harus mempertahankan ukuran yang fleksibel. Pelajari dasar-dasar cara menyiapkan petak kolom dan menerapkan konten di Dasar-dasar tata letak.
Lihat halaman Tata letak kanonis Material 3 untuk mengetahui detail cara membuat tata letak yang 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 mendukung berbagai ukuran layar.
Rasio aspek
Rasio aspek adalah proporsi antara lebar elemen dan tingginya. Rasio lebar tinggi 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