Mendesain UI Untuk Beberapa Layar Yang Berbeda

Assalamualaikum Warahmatullahi Wabarakatuh. Semakin beragamnya ukuran layar pada prangkat Android, mulai dari 2 inch sampai dengan 10 inch, dengan begitu banyak jenis ukuran layar yang berbeda, aplikasi yang kita buat pun harus mendukung beberapa layar yang berbeda pula, untuk menyesuaikan antarmuka pengguna aplikasi ke layar yang menampilkannya.


Untuk mengoptimalkan desain UI pada aplikasi yang kita buat, kita membuatuhkan beberapa desain layout yang berbeda ukurannya, yaitu small(Kecil), normal(Sedang), large(Besar) dan xlarge(ExtraBesar).

Pada android studio, kita sering mendengar istilah idpi(~120dpi), mdpi(~160dpi), hdpi(~240dpi), xhdpi(~320dpi),  xxhdpi(~480dpi), xxxhdpi(~640dpi), Dll. Itu merupakan direktori untuk membedakan jenis kepadatan gambar/image , dengan adanya direktori tersebut, saat kita menjalakan aplikasi pada ukuran layar yang berbeda, secara otomatis image/gambar akan menyesuaikan ukurannya.

Mendesain UI Untuk Beberapa Layar Yang Berbeda

Untuk membuat desain layout dengan jenis ukuran yang berbeda, kita perlu membuat sebuah direktori bernama layout-sw<n>dp, dimana huruf n adalah nilai Qualifier, pada contoh berikut ini, kita akan membuat direktori tersebut dengan nilai Qualifier yang berbeda, contohnya seperti:

  • layout-sw320dp: Digunakan untuk layar ponsel yang mempunyai lebar minimal 320Idpi. 
  • layout-sw480dp: Digunakan untuk layar ponsel yang mempunyai lebar minimal 480Idpi. 
  • layout-sw600dp: Digunakan untuk layar tablet 7 inch, yang mempunyai lebar minimal 600Idpi. 
  • layout-sw720dp: Digunakan untuk layar tablet 10 inch, yang mempunyai lebar minimal 720Idpi. 

Konfigurasi ini diperkenalkan dalam Android 3.2 Honeycomb (API 13), nilai n(
Qualifier) bisa kalian rubah sesuai keinginan.

Cara membuatnya cukup sederhana, klik kanan pada direktori res > New > Directory,
WildanTechnoArt-Membuat Direktori Layout
Membuat Direktori Layout

Baca Juga:

Berinama direktori tersebut dengan nama layout-sw320dp, layout-sw480dp, layout-sw600dp, layout-sw720dp. Salin/Copy layout activity_main kalian pada masing-maing direktori tersebut, seperti ini:
WildanTechnoArt-Direktori Layout Multiple Screen Support
Layout Multiple Screen Support

Terakhir tinggal edit layout tersebut dan masukan komponen-komponen yang diperlukan untuk aplikasi yang kita buat, dengan begitu, kita bisa menyesuaikan ukuran komponen didalam layout tersebut dengan ukuran layar yang berbeda beda.

Sekian dari saya, mohon maaf bila ada kesalahan pada tutorial ini, jika ada yang ingin ditanyakan silakan ini kolom komentar dibawah, terakhir dari saya. Wassalamualaikum Warahmatullahi Wabarakatuh.


Berlangganan Untuk Menerima Update Terbaru:

Posting Komentar