Pada bagian ini anda akan mempelajari lebih dalam tentang konsep dasar pembentukan tampilan antar muka pengguna seperti pemanfaatan komponen berbasis View dan ViewGroup yang berkolaborasi sehingga membentuk sebuah tampilan antar muka pengguna. Contohnya seperti ini,
Keren bukan? Baik, kita mulai saja pembahasannya.
Pada dasarnya semua elemen antar pengguna di aplikasi android dibangun menggunakan dua buah komponen inti yaitu : View dan ViewGroup.
Sebuah View adalah obyek yang menggambar komponen tampilan ke layar yang mana pengguna dapat melihat dan berinteraksi langsung.
Contoh komponen turunan dari View seperti :
TextView, komponen yang berguna untuk menampilkan teks ke layar.
Button, komponen yang membuat pengguna dapat berinteraksi dengan cara ditekan untuk melakukan sesuatu.
ImageView, Komponen untuk menampilkan gambar.
ListView, komponen untuk menampilkan informasi dalam bentuk list.
GridView, komponen untuk menampilkan informasi dalam bentuk grid.
RadioButton, komponen yang memungkinkan pengguna dapat memilih satu pilihan dari berbagai pilihan yang disediakan.
Checkbox, komponen yang memungkinkan pengguna dapat memilih lebih dari satu dari pilihan yang ada.
Sedangkan ViewGroup adalah sebuah obyek yang mewadahi obyek-obyek View dan ViewGroup itu sendiri sehingga membentuk satu kesatuan tampilan aplikasi yang utuh. ViewGroup lebih seperti :
LinearLayout
FrameLayout
RelativeLayout
TableLayout
Secara hierarki dalam pembentukan tampilan pengguna, kolaborasi penggunaan antara komponen View dan komponen ViewGroup memungkinkan seperti ini :
Jika diterjemahkan di dalam sebuah ViewGroup akan ditampung dua buah komponen View dan satu komponen ViewGroup yang terdiri dari 3 buah komponen View.
Ya, ini sudah bersifat bertingkat atau nested.
Salah satu contoh dari tampilan dalam file layout xml untuk merepresentasikan kolaborasi View dan ViewGroup seperti ini :
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical" >
- <TextView android:id="@+id/text"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="I am a TextView" />
- <Button android:id="@+id/button"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="I am a Button" />
- </LinearLayout>
Obyek turunan ViewGroup LinearLayout menjadi kontainer untuk obyek turunan View, Button, dan TextView guna membentuk sebuah tampilan melalui file layout xml. Beberapa komponen ViewGroup seperti LinearLayout, RelativeLayout, FrameLayout, dan TableLayout merupakan komponen yang paling banyak digunakan untuk menjadi parent / root dari komponen-komponen View di dalam sebuah tampilan aplikasi android. Berikut adalah definisi singkat dan inti dari komponen-komponen tersebut terhadap penempatan komponen View (child) di dalamnya.
LinearLayout
Akan menempatkan komponen-komponen di dalamnya secara horizontal atau vertikal. LinearLayout memilikiatribut weight untuk masing-masing child view yang berguna untuk mengontrol porsi ukuran view secara Relatif dalam sebuah ruang (space) yangtersedia.
android:orientation=”vertical” android:orientation=”horizontal”
RelativeLayout
Layout yang paling fleksible dikarenakan posisi dari masing-masing komponen di dalamnya dapat mengacu secara relatif pada komponen yang lainnya dan juga dapat mengacu secara relatif ke batas layar.
FrameLayout
Layout ini adalah layout yang paling sederhana. Layout ini akan membuat komponen yang ada di dalamnya menjadi menumpuk atau saling menutupi satu dengan yang lainnya. Komponen yang paling pertama pada layout ini akan menjadi bagian bawah dari komponen-komponen di atasnya. Pada materi penggunaan fragment di materi sebelumnya, FrameLayout memiliki kemampuan untuk menjadi kontainer buat fragment-fragment di dalam sebuah Activity. Berikut ilustrasi dari penggunaan FrameLayoutterhadap child view yang dimiliki di dalamnya.
TableLayout
Susunan komponen di dalam TableLayout akan berada dalam baris dan kolom. Namun jangan berharap layout jenis ini akan menampilkan garis pembatas untuk baris, kolom atau cell-nya menggunakan konsep yang sama pada pengembangan aplikasi berbasis web.
Jika anda sadari sebetulnya perbedaan dari masing-masing layout yang dijelaskan di atas terletak pada susunan komponen view di dalamnya. Itu saja.
Lalu pertanyaannya kapan kita menggunakan LinearLayout, RelativeLayout, FrameLayout, dan TabletLayout ? jawabannya adalah relatif tergantung pada kebutuhan dan performa.
Salah satu tips performa dari aplikasi android adalah dengan membuat susunan hierarki layout dalam sebuah file layout xml secara sederhana dan flat dalam artian kedalaman penggunaan nested layout atau layout bersarang tidak terlalu dalam. Selain itu, pemahaman yang baik terhadap dasar-dasar pembangunan UI di android, pengalaman, feeling, dan selalu mencari tahu best-practice seperti apa.
Semua tergantung latihan dan seberapa sering kita berhadapan dengan kasus-kasus melakukan transformasi UI dari bentuk mockup ke dalam bentuk kode xml di Android.
Dengan membiasakan melakukan penulisan kode sisi UI di xml tanpa penggunaan drag and drop akan membentuk pola pikir dan feeling kita dalam membangun dan mentransformasi UI ke dalam bentuk yang dibutuhkan. Ini bersifat Relatif, mungkin cara membentuk UI dari satu developer android dengan developer android lainnya akan berbeda.
Kelemahan dari layout-layout tersebut adalah ketidakmampuan untuk melakukan scroll konten secara vertikal atau horizontal. Jelas, adakalanya tampilan aplikasi anda memuat informasi yang panjangnya melebihi layar yang ada, jika hanya bergantung pada layout-layout yang dijelaskan sebelumnya maka tampilan aplikasi anda akan terpotong. Di situlah peran ScrollView membantu untuk memberikan solusi.
ScrollView
Adalah layout yang akan membuat komponen di dalamnya dapat digeser (scroll) secara vertical dan horizontal. Komponen di dalam Scrollview hanya diperbolehkan memiliki 1 parent utama dari LayoutLinear, RelativeLayout, FrameLayout, atau TableLayout.
Satuan Dimensi di Android
Platform Android dikenal karena keberagamannya, dari mulai ukuran device, layar, spesifikasi, hingga level operating system-nya. Karena keberagaman tersebut tak heran jika dibutuhkan tampilan yang konsisten agar aplikasi kita bisa berjalan dan tampil maksimal khususnya di beragam jenis layar device android yang beredar di pasaran.
Android sendiri memiliki satuan unit dimensi untuk ukuran tinggi dan lebar sebuah komponen View atauViewGroup. Berikut adalah esensi dari satuan dimensi unit di android.
Ekosistem android dikenal dengan fragmentasi spesifikasi device yang sangat bervariasi termasuk perbedaan dimensi layar dan kerapatan pixel (density) dari layar di masing-masing jenis layar device
Untuk tampilan yang konsisten di handset Android terdapat satuan untuk dimensi dan ukuran dari teks yaitu : dip/dp(density-independent pixel) dan sp (scale-independent pixels).
Satuan dp/dip digunakan untuk satuan dari nilai dimensi misal width (attribut : layout_width) dan height (attribut : layout_height) dari sebuah komponen View atau ViewGroup.
Satuan sp digunakan untuk ukuran teks. Perbedaannya dengan dp / dip adalah satuan sp android akan men-scale ukuran teks sesuai dengan setting ukuran teks di device (yang biasa dapat di akses melalui menu settings)
Contoh 1 :
Misalkan ada dua tablet 7-inch (ukuran diagonal layar), tablet pertama (A) memiliki resolusi layar 1200x1920px 320dpi dan yang lainnya (B) beresolusi 2048x1536px 326dpi. Membuat button dengan ukuran 300x300px mungkin akan tampak normal pada tablet A tapi akan tampak kecil di tablet B.
Tapi akan berbeda jika kita spesifikasikan ukuran button-nya dengan ukuran yang bergantung pada density layar alias menggunakan dip misal 300x300dp. Secara fisik ukuran button tersebut akan selalu sama pada ukuran layar yang berbeda.
Contoh 2 :
Pada gambar di atas ukuran 200dp akan dikonversi pada device mdpi (device dengan density 160dpi/dots per inch) menjadi 200px dan menjadi 400px pada device xhdpi (density 420dpi) misal pada nexus 4. Sehingga ukuran tersebut tampak sama dan konsisten secara fisik untuk beragam device dengan ukuran layar yang berbeda.