Anda di halaman 1dari 5

BAB II

ANTAR-MUKA PENGGUNA (USER INTERFACE) ANDROID

LAYOUT ANTAR-MUKA PENGGUNA (UI) ANDROID


Elemen dasar penyusun antarmuka-pengguna (user-interface) Android adalah objek
View yang dibuat dari kelas View dan menempati area persegi panjang pada layar
perangkat dan bertanggung jawab baik untuk pembentukan gambar maupun
penanganan event. View merupakan kelas dasar untuk widget, yang digunakan
untuk membuat komponen user-interface interaktif seperti button, text field, dan
lain-lain.

ViewGroup adalah subclass dari View dan menyediakan wadah (container) tak
terlihat yang menampung View/ViewGroup lain dan mendefinisikan properti
layout dari View/ViewGroup tersebut.

Pada level ketiga Android memiliki layout yang berbeda, yang merupakan subclass
dari kelas ViewGroup dan merupakan tipikal layout yang mendefinisikan struktur
visual untuk user-interface, dan dapat dibuat pada saat run-time menggunakan
objek View/ViewGroup, atau dengan mendeklarasikan suatu layout menggunakan
file XML seperti file main_layout.xml yang terletak dalam direktori res/layout
proyek.

Pembahasan selanjutnya adalah mengenai bagaimana membuat GUI berdasarkan


layout yang didefinisikan dalam file XML. Suatu layout dapat berisi berbagai jenis
widget seperti button, label, textbox, dan sebagainya. Berikut ini adalah contoh
sederhana dari file XML yang memiliki LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a TextView" />

<Button android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a Button" />

<!-- More GUI components go here -->

</LinearLayout>

Setelah layout dibuat, sumber-daya (resource) layout dapat di-load dari kode
aplikasi, yaitu melalui implementasi method callback: Activity.onCreate() seperti
yang ditunjukkan di bawah ini:

public void onCreate(Bundle savedInstanceState) {


super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

TIPE LAYOUT ANDROID


Berikut ini adalah beberapa Layout yang disediakan oleh Android yang dapat
digunakan pada hampir semua aplikasi Android untuk memberikan tampilan, dan
look-and-feel yang berbeda:

 Linear Layout
LinearLayout adalah view group yang mengatur view lain (view anak) dalam
posisi satu arah, secara vertikal atau horizontal.

 Relative Layout
RelativeLayout adalah view group yang menampilkan view anak dalam posisi
relatif.

 Table Layout
TableLayout adalah view yang mengelompokkan view lain ke dalam baris dan
kolom.

 Absolut Layout
AbsoluteLayout memungkinkan untuk menentukan lokasi yang tepat dari
view anak
 Frame Layout
FrameLayout adalah placeholder di layar yang dapat digunakan untuk
menampilkan sebuah view.

 List View
ListView adalah view group yang menampilkan daftar (list) item yang dapat
digulir.

 Grid View
GridView adalah view group yang menampilkan item dalam grid dua dimensi
dan dapat digulir.

ATRIBUT LAYOUT
Setiap layout memiliki sejumlah atribut yang menentukan properti visual dari layout
tersebut. Atribut layout meliputi atribut umum dan atribut khusus. Berikut ini
adalah atribut umum yang dapat diterapkan untuk semua layout:

No Atribut Umum dan Keterangan

1 android:id, Adalah ID yang secara unik mengidentifikasi layout.

2 android:layout_width, Adalah lebar layout

3 android:layout_height, Adalah tinggi layout

4 android:layout_marginTop, Adalah ruang ekstra (extra space) di sisi atas layout

5 android:layout_marginBottom, Adalah ruang ekstra (extra space) di sisi bawah layout

6 android:layout_marginLeft, Adalah ruang ekstra (extra space) di sisi kiri layout

7 android:layout_marginRight, Adalah ruang ekstra (extra space) di sisi kanan layout

8 android:layout_gravity, Menentukan bagaimana view anak diposisikan


android:layout_weight, Menentukan berapa banyak ruang ekstra dalam layout yang harus
9
dialokasikan ke view
10 android:layout_x, Menentukan x-coordinate layout

11 android:layout_y, Menentukan y-coordinate layout

12 android:paddingLeft, Adalah padding kiri yang terisi layout

13 android:paddingRight, Adalah padding kanan yang terisi layout

14 android:paddingTop, Adalah padding atas yang terisi layout

15 android:paddingBottom, Adalah padding bawah yang terisi layout


Lebar dan tinggi adalah dimensi layout atau view yang besarnya dapat ditentukan
dengan satuan dp (Density-independent Pixels), sp (Scale-independent Pixels), pt
(Point yang sama dengan 1/72 inci), px (Pixels), mm (Millimeters), dan in (inci).

Dalam Android dimensi layout atau view dapat ditentukan dengan suatu nilai yang
berupa angka pasti atau dengan menggunakan konstanta seperti contoh berikut:

 android:layout_width="wrap_content", memberitahu view untuk


mengukur ukuran dimensi yang dibutuhkan oleh kontennya.

 android:layout_width="fill_parent", memberitahu view untuk untuk


mengukur ukuran dimensi menjadi sebesar tampilan induknya.

Atribut gravity layout mempunyai peran penting dalam memposisikan objek view.
Nilai untuk atribut gravity dapat terdiri dari satu atau lebih konstanta (biasanya
dipisahkan oleh tanda '|'). Berikut adalah konstanta untuk atribut gravity:

Konstanta Keterangan
top Memposisikan objek ke atas container-nya, tidak merubah ukuran objek
bottom Memposisikan objek ke bawah container-nya, tidak merubah ukuran objek
left Memposisikan objek ke kiri container-nya, tidak merubah ukuran objek
right Memposisikan objek ke kanan container-nya, tidak merubah ukuran objek
Menempatkan objek di bagian tengah vertikal container-nya, tidak merubah
center_vertical
ukuran objek
Menempatkan objek di bagian tengah horisontal container-nya, tidak merubah
center_horizontal
ukuran objek
Memperbesar ukuran vertikal objek jika diperlukan sehingga benar-benar
fill_vertical
mengisi container-nya.
Memperbesar ukuran horisontal objek jika diperlukan sehingga benar-benar
fill_horizontal
mengisi container-nya.
Menempatkan objek di bagian tengah container-nya pada sumbu vertikal dan
center
horisontal, tidak merubah ukuran objek
Memperbesar ukuran vertikal dan horisontal objek jika diperlukan diperlukan
fill
sehingga benar-benar mengisi container-nya.
Opsi tambahan yang dapat diatur agar bagian tepi atas dan/atau bawah child-
object terpotong sampai batas container-nya. Pemotongan didasarkan pada
clip_vertical
gravity vertikal, gravity atas akan memotong tepi bawah, gravity bawah akan
memotong tepi atas.
Opsi tambahan yang dapat diatur agar bagian tepi atas dan/atau bawah child-
object terpotong sampai batas container-nya. Pemotongan didasarkan pada
clip_horizontal
gravity horisontal, gravity kiri akan memotong tepi kanan, gravity kanan akan
memotong tepi kiri.
start Menempatkan objek ke awal container-nya, tidak merubah ukuran objek
end Menempatkan objek ke ujung container-nya, tidak merubah ukuran objek
LINEAR LAYOUT
LinearLayout adalah view group yang mengatur view lain (view anak) dalam posisi
satu arah, secara vertikal atau horizontal.

ATRIBUT KHUSUS LINEARLAYOUT

No Atribut dan Keterangan

1 android:id, adalah ID yang secara unik mengidentifikasi layout.


android:baselineAligned, harus berupa nilai boolean "true" atau "false", dan mencegah
2
layout mengatur base-line dari objek anak.
android:baselineAlignedChildIndex, jika linear layout merupakan bagian dari layout lain
3 dengan base-line yang sejajar, ia dapat menentukan objek anak mana yang sesuai dengan
base-line.
android:orientation, menentukan arah pengaturan: "horizontal" untuk orientasi baris dan
4
"vertikal" untuk orientasi kolom. Defaultnya adalah horizontal.
android:divider, digunakan sebagai pembatas vertikal antar button, menggunakan nilai
5
warna dalam bentuk #rgb, #argb, #rrggbb, dan #aarrggbb
android:gravity, menentukan bagaimana sebuah objek harus memposisikan kontennya
6
pada sumbu x dan y. Nilai yang mungkin adalah top, bottom, left, right, center, dan lain-lain.
7 android:weightSum, jumlah bobot objek anak

RELATIVE LAYOUT
RelativeLayout adalah view group yang menampilkan view anak dalam posisi relatif.