Mendukung Layar Yang Berbeda-beda

Android menggolongkan layar-layar perangkat berdasarkan dua properti umum: ukuran dan densitas. Kita mungkin berharap bahwa app kita akan di-install pada perangkat-perangkat dengan layar dengan ukuran dan densitas apapun. Dengan demikian, kita sebaiknya memasukkan beberapa 'resources' alternatif yang meng-optimasi tampilan app kita untuk berbagai macam ukuran dan densitas layar.
  • Ada empat ukuran layar secara umum: 'small, normal, large, xlarge'
  • Dan ada empat densitas secara umum: 'low (ldpi), medium (mdpi), high (hdpi), extra high (xhdpi)'
Untuk membuat 'layout' dan 'bitmap' yang berbeda-beda yang ingin kita gunakan untuk berbagai macam layar yang berbeda-beda, kita harus menempatkan berbagai 'resources' alternatif ini ke dalam direktori-direktori terpisah, mirip dengan ketika kita melakukannya pada strings untuk bahasa yang berbeda-beda.

Juga perlu diketahui bahwa orientasi layar (landscape atau portrait) dianggap sebagai variasi dari ukuran layar, jadi banyak app sebaiknya merevisi 'layout' nya supaya meng-optimasi 'user experience' pada setiap orientasi.

Membuat 'Layout' Yang Berbeda-beda

Untuk mengoptimalkan 'user experience' kita pada ukuran layar yang berbeda-beda, kita sebaiknya membuat file XML layout yang unique untuk masing-masing ukuran layar yang ingin kita support. Masing-masing layout sebaiknya disimpan di dalam direktori 'resources' yang tepat, dinamai dengan akhiran -. Contohnya, layout untuk layar besar sebaiknya disimpan dengan 'res/layout-large/'.
Catatan:
Android secara otomatis akan men-scale layout kita supaya sesuai dengan layar. Dengan demikian, layout-layout kita untuk berbagai macam ukuran layar tidak perlu dikhawatirkan mengenai ukuran absolut dari komponen-komponen UI tetapi sebaliknya kita cukup berfokus pada struktur layout yang berpengaruh pada 'user-experience' (misalnya ukuran atau posisi dari beberapa 'view' yang penting relatif terhadap beberapa 'view' di sampingnya).
Contohnya, project ini akan memasukkan layout 'default' dan suatu layout alternatif untuk layar besar ('large'):

MyProject/
    res/
        layout/
            main.xml
        layout-large/
            main.xml
Nama-nama file haruslah tepat sama, tetapi konten-nya berbeda supaya memberikan UI yang optimal untuk ukuran layar yang dimaksudkan.

Gampangnya, silahkan kita melihat ke file layout di dalam app kita seperti biasa:

@Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);
}

Sistem akan me-load file dari direktori layout yang tepat berdasarkan ukuran layar perangkat dimana app kita sedang berjalan. Untuk lebih detik tentang bagaimana Android memilih 'resource' yang tepat bisa dibaca di pedoman Providing Resource.

Sebagai contohnya, dibawah ini adalah suatu project dengan layout alternatif untuk orientasi 'landscape':

MyProject/
    res/
        layout/
            main.xml
        layout-land/
            main.xml

Secara default, file 'layout/main.xml' akan digunakan untuk orientasi 'portrait'.

Bila kita ingin memberikan layout khusus untuk 'landscape', termasuk untuk layar besar, maka kita perlu untuk menggunakan 'qualifier' dua-duanya yaitu 'large' dan 'land'.

MyProject/
    res/
        layout/              # default (portrait)
            main.xml
        layout-land/         # landscape
            main.xml
        layout-large/        # large (portrait)
            main.xml
        layout-large-land/   # large landscape
            main.xml

Catatan:
Android 3.2 dan di atasnya mendukung metode yang lebih canggih dalam mendefinisikan ukuran layar yang membolehkan kita untuk menentukan 'resources' untuk ukuran layar berdasarkan 'width' dan 'height' minimum berkaitan dengan pixel yang tidak tergantung pada densitas. Latihan ini tidak akan mencakup tentang teknik ini. Untuk informasi lebih jauh bisa dibaca di: Designing for Multiple Screens.

Membuat Bitmap Yang Berbeda-beda

Kita sebaiknya selalu membuat 'resources' untuk bitmap yang akan di-scale dengan tepat untuk masing-masing jenis densitas: 'low', 'medium', 'high' dan 'extra-high'. Ini akan membantu kita untuk mendapatkan kualitas gambar dan performa yang bagus pada semua densitas layar.

Untuk menghasilkan gambar-gambar tersebut, kita sebaiknya mulai dengan gambar-gambar mentah/asli-nya dulu dan memproses gambar-gambar tersebut dan dibuat untuk masing-masing densitas dengan skala ukuran berikut:
  • xhdpi: 2.0
  • hdpi: 1.5
  • mdpi: 1.0 (dasar yang dijadikan patokan ukuran)
  • ldpi: 0.75
Artinya, bila kita membuat gambar 200x200 untuk perangkat xhdpi, kita juga harus membuat untuk resource yang sama pada 150x150 untuk hdpi, 100x100 untuk mdpi, dan 75x75 untuk perangkat ldpi (dengan panduan skala seperti di atas).

Kemudian, taruh file-file tersebut di direkroti 'drawable resource' yang tepat:

MyProject/
    res/
        drawable-xhdpi/
            awesomeimage.png
        drawable-hdpi/
            awesomeimage.png
        drawable-mdpi/
            awesomeimage.png
        drawable-ldpi/
            awesomeimage.png
Kapanpun kita mengacu ke '@drawable/awesomeimage', sistem akan memilih bitmap yang tepat berdasarkan densitas layar.
Catatan:
'Resources' ldpi (low-density) tidak selalu diperlukan. Ketika kita menyediakan gambar-gambar hdpi, sistem akan mengecilkan satu setengah kali supaya pas untuk layar ldpi.

Untuk petunjuk praktis dan pedoman yang lebih detil tentang membuat aset-aset untuk icon di app kita, bisa mengakses ke Iconography design guide.

Label: ,

No comments:

Post a Comment