USER INTERFACE

Layout Manager

Untuk meletakan komponen (view) pada layar, android menggunakan layout manager. Karena ukuran layar device Android sangat beragam, tidak ada peletakan posisi widget secara akurat per pixel.

Terdapat empat jenis layout manager yang memiliki fungsi masing-masing. LinearLayout, TableLayout, RelativeLayout dan FrameLayout. Berikut akan dibahas lebih rinci untuk setiap layout.

1. RelativeLayout

RelativeLayout mengatur posisi secara relatif berdasarkan posisi widget yang lain atau parentnya. Sebagai contoh, dua widget pada gambar di bawah. EditText posisinya relatif terhadap textView nama.

Contoh deklarasinya adalah sebagai berikut:

Untuk layout_width dan layout_height ada dua pilihan: match_parent (view berusaha sebesar parent) dan wrap_content (view hanya berusaha sebesar content yang berada di dalamnya). Sedangkan padding menyatakan jarak antara pinggir layar dengan komponen.

Perhatikan penggunaan atribut layout_toRightOf yang menyatakan bahwa EditText berada disebelah kanan label. Sedangkan atribut layout_baseLine digunakan agar TextView dan EditText aligned. Jika layout_baseLine dihapus efeknya akan sebagai berikut (Text View terlalu tinggi posisinya):

Beberapa atribut lain yang mengatur posisi widget dibandingkan dengan widget lain adalah:

android:layout_above
android:layout_below
android:layout_toLeftOf
android:layout_toRightOf.

Untuk mengatur posisi ada tambahan lima atribut: android: layout_alignTop, android:layout_alignBottom, android:layout_alignLeft, android:layout_alignBaseline

Contoh jika ingin menambahkan button sehingga posisinya sebagai berikut:

Maka deklarasi buttonnya adalah sebagai berikut:

Artinya button tersebut dibawah dan disebelah kanan EditText.

Widget juga dapat diatur berdasarkan gravity android:layout_gravity ada beberapa pilihan untuk gravity ini: left, right, center_horizontal, center_vertical, bottom, top. Gravity ini juga berlaku untuk layout manager yang lain. Berikut adalah contohnya:

Hasilnya:

Silahkan bereksperimen dengan berbagai setting atribut layout.

2. TableLayout

Untuk memilih layout manager, selain dengan cara manual dapat juga ditentukan membuat layout (File à New à Other à Android XML Layout File). Saat muncul dialog berikut, pilih Root Element sebagai TableLayout.

TableLayout meletakan komponen dalam bentuk tabel (baris dan kolom), mirip seperti Table yang digunakan di HTML. Pengguna mendefinisikan baris dengan tag <TableRow> dan sistem secara otomatis mendefinisikan kolomnya. Contoh deklarasi berikut:

Hasilnya adalah sebagai berikut. Bayangkan sebagai sebuah tabel dengan dua kolom dan dua baris.

Misalnya bila ingin agar EditText sampai ke bagian belakang, maka tambahkan android:stretchColumns="1" pada TableLayout. Maka kolom 1 akan terisi penuh.

Hasilnya:

Untuk menambahkan widget di kolom tertentu, gunakan aandroid:layout_column. Misalnya kita akan menambahkan TextView di kolom 1 (ingat kolom dimulai dari 0). Ini bisa dilakukan dengan menggunakan atribut android:layout_column. Tanpa atribut ini, TextView akan muncul di kolom 0

Hasilnya sebagai berikut:

3. Frame Layout

Framelayout digunakan untuk menampilkan satu komponen dalam satu layar. Jika ada lebih dari satu widget, maka akan ditampilkan secara bertumpuk, walaupun posisi widget dapat diatur dengan gravity. Layout lain bias ditambahkan sebagai child di dalam frame layout.

Contoh untuk deklarasi berikut menampilkan dua ImageView (pastikan file image telah disimpan di direktori [project]/res/drawable-mdpi ). Pada contoh berikut, nama file photonya adalah waden.

Hasilnya adalah seperti berikut:

4. LinearLayout

Sesuai dengan namanya, linear layout menyimpan widget dalam satu baris atau satu kolom (tergantung orientasinya).

Jika orientasinya vertical (android:orientation="vertical") maka hasilnya akan seperti ini

Sedangkan jika orientasinya horizontal (android:orientation="horizontal"), maka hasilnya akan seperti ini.

Berikut adalah contoh linear layout dengan satu textview dan satu button.

5. ScrollView

Dengan scrollview, layout seolah-olah memiliki layar yang lebih luas. Pengguna dapat melakukan scroll. Scrollview hanya mempunyai satu child dan umumnya adalah LinearLayout. Scrollview hanya dapat melakukan vertical scrolling, gunakan HorizontalScrollView untuk layout yang dapat discroll secara horizontal.

Jangan gunakan Listview bersama layout ini karena listview telah memiliki mekanisme scrolling tersendiri.

Berikut adalah contoh scrollview yang menghasilkan layout seperti ini yang dapat discroll. Dua button teratas menggunakan RelativeLayout yang disisipkan dalam ScrollView. Berikut adalah contoh penggabungan antara dua layout.

6. Kombinasi Layout

Kombinasi beberapa layout dalam satu activity dalam dilakukan. Contoh berikut menggunakan linearlayout yang memiliki dua anak yaitu relativelayout dan tablelayout.

Latihan Layout

Berdasarkan latihan pada pembuatan program yang me-link-kan 2 halaman dan latihan pada pengambilan input dari komponen edit text, maka buatlah sebuah program yang terdiri dari 2 halaman yang terdiri dari:

- Halaman pertama adalah halaman yang menyediakan fasilitas bagi pengguna untuk menginputkan nama mahasiswa beserta nilai untuk 2 buah matakuliah dimana nilai tersebut terdiri dari nilai UTS.

- Sedangkan halaman kedua menampilkan hasil inputan sesuai dengan yang diinputkan pada halaman pertama, akan tetapi, hasil pengaturan tampilannya sesuai dengan tampilan pada latihan Kombinasi Layout.