CHAPTER 6. Layout User Interface Android. Ahmad Pudoli

CHAPTER 6

Layout User Interface Android

Ahmad Pudoli

ahmad.pudoli@budiluhur.ac.id

CHAPTER 6: Layout User Interface Android | 1

CHAPTER 6

Layout User Interface Android

YANG AKAN DIPELAJARI PADA PERTEMUAN INI:

 Menggunakan berbagai ViewGroups untuk layout pada tampilan

 Memahami Berbagai Layout di Android

Dalam BAB sebelumnya, kita telah belajar tentang class Activity dan life cycle-nya. Kita telah mengetahui bahwa activity merupakan sarana bagi pengguna untuk berinteraksi dengan aplikasi.

Pada bab ini, kita akan mempelajari rincian tentang membuat user interface di Android, dan kita juga akan mempelajari bagaimana menangani perubahan orientasi layar di perangkat Android.

View dan ViewGroup

Sebuah activity berisi View dan ViewGroups. View merupakan widget yang dapat digunakan untuk membuat User Interface. Contoh dari Komponen view (widget) pada android antara lain button, TextView, PlainText, EditText dan lain-lain.

Satu atau lebih view dapat dikelompokkan dalam sebuah ViewGroup. ViewGroup merupakan layout dimana anda dapat mengatur posisi dan urutan suatu view atau widget. Contoh ViewGroup yaitu LinearLayout dan FrameLayout. ViewGroup berasal dari class android.view.ViewGroup.

Android mendukung ViewGroup sebagai berikut:

➤ LinearLayout

➤ AbsoluteLayout

➤ TableLayout

➤ RelativeLayout

➤ FrameLayout

➤ ScrollView

Bagian berikut akan dijelaskan masing-masing View Grup ini secara lebih rinci. Perhatikan bahwa

dalam prakteknya adalah untuk menggabungkan berbagai jenis layout untuk membuat UI yang

Anda inginkan.

CHAPTER 6: Layout User Interface Android | 2

LinearLayout

LinearLayout mengatur tata letak widget dalam satu baris atau satu kolom. Untuk mengetahui bagaimana menggunakan LinearLayout, mari kita lihat element yang biasa digunakan seperti pada contoh kode di bawah:

<?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:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Hello World!"/>

</LinearLayout>

Pada kode di atas, perhatikan root element <LinearLayout> memiliki element <TextView> yang terkandung di dalamnya. Element <LinearLayout> mengontrol urutan view atau widget yang berada di dalamnya.

Setiap View dan ViewGroup memiliki attribute yang umum, beberapa diantaranya terdapat pada table di bawah:

ATTRIBUTE DESKRIPSI

layout_width Menentukan lebar View atau ViewGroup layout_height Menentukan tinggi View atau ViewGroup

layout_marginTop Menentukan ruang ekstra (ruang kosong) pada sisi atas View atau View Group

layout_marginBottom Menentukan ruang ekstra (ruang kosong) pada sisi bawah View atau View Group

layout_marginLeft Menentukan ruang ekstra (ruang kosong) pada sisi kiri View atau View Group

layout_marginRight Menentukan ruang ekstra (ruang kosong) pada sisi kanan View atau View Group

layout_gravity Menentukan posisi View, yaitu kiri, kanan, atau tengah layout_weight Menentukan berapa banyak ruang pada layout yang harus

dialokasikan untuk View

CHAPTER 6: Layout User Interface Android | 3 layout_x Menentukan koordinat-x View atau View Group

layout_y Menentukan koordinat-y View atau View Group

Misalnya, lebar element <TextView> mengisi seluruh lebar induknya (pada kasus ini adalah layar) dengan menggunakan konstanta atau value fill_parent. Tingginya ditunjukkan dengan konstanta wrap_content, yang berarti bahwa tingginya menyesuaikan dengan isi dari TextView. Jika Anda tidak ingin view <TextView> menempati keseluruhan layar, Anda dapat mengatur atribut layout_width dan layout_height dengan value wrap_content, seperti ini:

Kode sebelumnya mengatur lebar dari view untuk menyesuaikan lebar dari isi atau teks yang terkandung di dalamnya. Perhatikan potongan kode layout di bawah 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:layout_width="100dp"

android:layout_height="wrap_content"

android:text="Hello World!"/>

<Button

android:layout_width="160dp"

android:layout_height="wrap_content"

android:text="Button"

android:onClick="onClick"/>

</LinearLayout>

Catatan:

Beberapa attribute hanya berlaku pada GroupView tertentu. Misalnya

layout_weight dan layout_gravity hanya berlaku ketika View

berada dalam LinearLayout atau TableLayout

CHAPTER 6: Layout User Interface Android | 4 Selanjutnya, kita akan mengatur lebar dari kedua view TextView dan

Button untuk nilai absolut. Dalam hal ini, lebar untuk TextView diatur ke 100 density-independen pixel, dan Tombol untuk 160 density-independen pixel. Kita akan melihat bagaimana view akan ditampilkan pada layar yang berbeda dengan kerapatan pixel yang berbeda, penting untuk memahami bagaimana Android mengenal layar dari berbagai ukuran dan densitas (kepadatan atau kerapatan pixel).

Gambar 1 menunjukkan layar dari Nexus S. Dimana memiliki layar 4- inci (diagonal), dengan lebar layar 2.04 inci. resolusi adalah 480 (lebar) x 800 (tinggi) piksel. Dengan 480 piksel yang tersebar di lebar 2,04 inci, hasilnya adalah densitas pixel sekitar 235 titik per inci (dpi).

Seperti yang Anda lihat dari gambar, kepadatan pixel layar bervariasi sesuai dengan ukuran layar dan resolusi.

Densitas (Kepadatan atau kerapatan) pixel pada layar di Android sebagai berikut:

➤ Low density (ldpi) — 120 dpi

➤ Medium density (mdpi) — 160 dpi

➤ Hight density (hdpi) — 240 dpi

➤ Extra Hight density (xhdpi) — 320 dpi

Gambar 1

SATUAN UKURAN

Ketika menentukan ukuran elemen pada UI Android, kita harus mengetahui satuan ukuran berikut:

dp — Density-independent pixel. Merupakan kepadatan/kerapatan pixel pada setiap 1 inci. 1 dp setara dengan 1 pixel pada layar 160 dpi. Satuan ini merupakan satuan ukuran yang dianjurkan saat menentukan dimensi view pada layout. 160 dpi merupakan standar densitas atau kerapatan pixel yang digunakan oleh Android. Kita dapat menentukan baik

“dp” atau “dpi” ketika mengacu pada density-independent pixel

sp — Scale-independent pixel. Sama seperti dp dan digunakan untuk menentukan ukuran font

pt — Point. 1 point (titik) didefinisikan sebagai 1/72 inci, sesuai dengan ukuran fisik layar yang sebenarnya

px — Pixel. Sesuai dengan pixel yang sebenarnya di layar. Satuan Ukuran ini tidak

dianjurkan, karena memungkinkan UI yang kita buat tidak sesuai pada perangkat dengan

resolusi layar yang berbeda.

CHAPTER 6: Layout User Interface Android | 5 Perangkat yang kita miliki akan tergolong ke dalam salah satu densitas yang telah didefinisikan pada daftar di atas. Sebagai contoh, Nexus S dianggap sebagai perangkat hdpi, karena densitas pixel mendekati 240 dpi.

Contoh lainnya:

HTC Hero, memiliki ukuran layar 3,2-inch (diagonal) dan resolusi 320 x 480 dengan kepadatan pixel-nya sekitar 180 dpi. Oleh karena itu, akan dianggap sebagai perangkat mdpi, karena kepadatan pixel yang terdekat adalah 160 dpi.

dpi = √𝑎 ² + 𝑏 ² c

dpi = √320 ² + 480 ² 3,2

dpi = √102.400 + 230.400 3,2

dpi = 576,89

3,2 = 𝟏𝟖𝟎, 𝟐𝟖

Untuk menghitung densitas pixel layar dengan menggunakan rumus sebagai berikut:

dpi = √𝑎 ² + 𝑏 ² c

Keterangan:

dpi = Kepadatan pixel pada tiap 1 inci (densitas layar) a = banyaknya pixel pada lebar layar (pixel)

b = banyaknya pixel pada tinggi layar (pixel) c = diagonal layar (inci)

Berikut kita akan mencoba menampilkan view pada layar dengan densitas pixel yang berbeda, membuat dua AVD dengan resolusi layar dan densitas layar yang berbeda. Gambar 2 menunjukan AVD dengan resolusi layar 480 x 800 pixel dengan memiliki densitas layar 240 pixel. Sedangkan, Gambar 3 menunjukan AVD dengan resolusi layar 320 x 480 pixel dengan memiliki densitas layar

Catatan:

Ketajaman layar tergantung pada kepadatan pixel pada tiap 1 inci (2,5 cm)

dilayar ini yang disebut densitas pixel. Semakin besar kepadatannya maka

semakin baik ketajaman layar.

CHAPTER 6: Layout User Interface Android | 6 160 pixel. Sehingga berdasarkan densitas layar dapat digolongkan AVD pada Gambar 2 merupakan Hight Density (hdpi) sedangkan pada Gambar 3 merupakan Medium Density (mdpi).

Gambar 2 Gambar 3

Gambar 4 Gambar 5

Dengan menggunakan satuan dp memastikan bahwa view kita selalu ditampilkan dalam proporsi

yang tepat terlepas dari densitas layar. Android secara otomatis menyesuaikan skala view yang

akan ditampilkan tergantung pada densitas layarnya. Misalnya sebuah Button, jika ditampilkan

pada layar 180 dpi (akan diperlakukan seperti layar dengan densitas 160 dpi), lebarnya akan 160

pixel. Namun, jika ditampilkan pada layar 235 dpi (akan diperlakukan sebagai layar 240 dpi), maka

lebarnya akan 240 pixel.

CHAPTER 6: Layout User Interface Android | 7 Bagaimana jika sekarang kita mengubah dari menggunakan dp menjadi px ?

<TextView

android:layout_width="100px"

android:layout_height="wrap_content"

android:text="Hello World!"/>

<Button

android:layout_width="160px"

android:layout_height="wrap_content"

android:text="Button"

android:onClick="onClick"/>

Gambar 6 menunjukkan Label dan Button terlihat seperti di layar 240 dpi. Gambar 7 menunjukkan view yang sama pada layar 180 dpi. Dalam hal ini, Android tidak melakukan konversi apapun, karena semua ukuran spesifik dalam pixel. Secara umum (dengan ukuran layar yang sama), jika Anda menggunakan pixel untuk tampilan ukuran, view akan muncul lebih kecil pada perangkat dengan layar dpi tinggi, dibandingkan pada layar dengan dpi yang lebih rendah.

BAGAIMANA MENGKONVERSI DP KE PX

Rumus untuk mengkonversi dp ke px (pixel) adalah sebagai berikut:

Pixel Sebenarnya = dp * ( dpi / 160 ), dimana dpi adalah jenis golongan densitas layar yaitu 120, 160, 240, atau 320.

Oleh karena itu, dalam kasus Button ( dengan lebar 160 dp) jika ditampilkan pada layar dengan densitas 235 dpi maka dianggap berjalan di 240 dpi. Jadi lebar Button yang sebenarnya adalah 160 * (240/160) = 240 px. Ketika berjalan di layar dengan densitas 180 dpi maka akan dianggap berjalan pada 160 dpi, jadi lebar Button sebenarnya yang sekarang adalah 160 * (160/160) = 160 px. Dalam contoh kasus ini, satu dp setara dengan satu px.

Kita dapat menggunakan method getWidth() dari View untuk mendapatkan lebar sebenarnya dalam pixel:

public void onClick(View view) {

Toast.makeText(this, String.valueOf(view.getWidth()), Toast.LENGTH_LONG).show();

}

CHAPTER 6: Layout User Interface Android | 8

Gambar 6 Gambar 7

Pada contoh sebelumnya juga ditetapkan bahwa untuk orientasi pada layout merupakan vertical:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

Orientasi layout secara default adalah horizontal, jadi jika kita menghilangkan atau tidak

menggunakan attribute android:orientation maka view akan muncul sebagaimana ditunjukan

pada Gambar 8:

CHAPTER 6: Layout User Interface Android | 9

Gambar 8

Pada LinearLayout, kita dapat menggunakan attribute layout_weight dan layout_gravity untuk view yang terdapat di layout, berikut contoh penggunaan kedua atribut tersebut:

<?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">

<Button

android:layout_width="160dp"

android:layout_height="wrap_content"

android:text="Button"

android:layout_gravity="left"

android:layout_weight="1"/>

<Button

android:layout_width="160dp"

android:layout_height="wrap_content"

android:text="Button"

android:layout_gravity="center"

android:layout_weight="2"/>

<Button

android:layout_width="160dp"

android:layout_height="wrap_content"

android:text="Button"

android:layout_gravity="right"

android:layout_weight="3"/>

</LinearLayout>

CHAPTER 6: Layout User Interface Android | 10 Gambar 9 menunjukkan posisi dan weight (tinggi) view

pada layout. Atribut layout_gravity menunjukkan posisi view, sementara atribut layout_weight memberikan tinggi pada view (dalam kasus ini adalah tinggi pada view Button). Pada contoh ini, masing-masing Button memiliki ketinggian sebagai berikut:

Button Pertama:

menempati 16,6% ruang (1 / (1 + 2 + 3) * 100) Button Kedua:

menempati 33,3% ruang (2 / (1 + 2 + 3) * 100) Button Ketiga:

menempati 50% ruang(3 / (1 + 2 + 3) * 100).

Gambar 9

Jika Kita mengubah orientasi Layout Linear untuk horisontal, kita perlu mengubah lebar setiap view dengan 0 dp, dan view akan ditampilkan seperti yang ditunjukkan pada ^{Gambar 10} :

<?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="wrap_content"

android:orientation="horizontal">

<Button

android:layout_width="0px"

android:layout_height="wrap_content"

android:text="Button"

android:layout_gravity="left"

android:layout_weight="1"/>

<Button

android:layout_width="0px"

android:layout_height="wrap_content"

CHAPTER 6: Layout User Interface Android | 11

android:text="Button"

android:layout_gravity="center"

android:layout_weight="2"/>

<Button

android:layout_width="0px"

android:layout_height="wrap_content"

android:text="Button"

android:layout_gravity="right"

android:layout_weight="3"/>

</LinearLayout>

Gambar 10

AbsoluteLayout

AbsoluteLayout memungkinkan kita untuk menentukan lokasi yang tepat untuk view atau komponen pada layout. Ikuti kode layout pada activity_main.xml berikut:

<?xml version="1.0" encoding="utf-8"?>

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<Button

android:layout_width="113px"

android:layout_height="wrap_content"

android:text="Button"

android:layout_x="12px"

android:layout_y="361px" />

<Button

android:layout_width="188px"

android:layout_height="wrap_content"

android:text="Button"

android:layout_x="126px"

android:layout_y="361px" />

</AbsoluteLayout>

Gambar 11 menunjukkan dua view Button (dijalankan pada AVD dengan 160 dpi) yang diletakkan

berdasarkan posisi x dan y, dengan menggunakan atribut android_layout_x dan

android_layout_y.

CHAPTER 6: Layout User Interface Android | 12 Namun, ada masalah dengan AbsoluteLayout ketika activity tersebut dilihat pada layar high resolution (lihat Gambar 12). Untuk alasan ini, AbsoluteLayout telah usang sejak Android 1.5 (meskipun masih didukung dalam versi saat ini). Tetapi terkadang sesuai dengan kebutuhan kita juga harus menggunakan layout ini.

Gambar 11 Gambar 12

TableLayout

TableLayout memuat view ke dalam baris dan kolom seperti pada sebuah tabel. Kita menggunakan elemen <TableRow> untuk menunjuk baris dalam tabel. Setiap baris dapat berisi satu atau beberapa view. Setiap view Kita tempatkan dalam satu baris membentuk sel. Lebar setiap kolom ditentukan oleh lebar terbesar dari setiap sel dalam kolom tersebut.

Ikuti kode layout activity_main.xml berikut:

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent" >

<TableRow>

<TextView

android:text="User Name:"

android:layout_width="120dp"/>

<EditText

android:id="@+id/txtUserName"

android:layout_width="200dp"/>

</TableRow>

CHAPTER 6: Layout User Interface Android | 13

<TableRow>

<TextView

android:text="Password:"/>

<EditText

android:id="@+id/txtPassword"

android:password="true"/>

</TableRow>

<TableRow>

<TextView />

<CheckBox

android:id="@+id/chkMemberPassword"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Remember Password"/>

</TableRow>

<TableRow>

<Button

android:id="@+id/btnSignIn"

android:text="Log In"/>

</TableRow>

</TableLayout>

Gambar 13 menunjukkan setelah aplikasi dijalankan pada emulator. Perhatikan bahwa pada contoh ini, ada dua kolom dan empat baris di TableLayout. Pada baris untuk menampilkan CheckBox, di sel sebelah CheckBox diberikan sebuah TextView tanpa memberikan atribut apapun, hanya dengan <TextView />. Jika kita tidak melakukan itu, maka CheckBox (kotak Remember Password) cenderung akan muncul di bawah TextView Password, seperti yang ditunjukan pada Gambar 14.

Gambar 13 Gambar 14

CHAPTER 6: Layout User Interface Android | 14

RelativeLayout

RelativeLayout memungkin Kita untuk menentukan bagaimana view diposisikan saling berhubungan atau memiliki relasi satu dengan yang lainnya. Perhatikan kode untuk layout activity_main.xml berikut:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent" >

<TextView

android:id="@+id/lblComment"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Comment"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true"/>

<EditText

android:id="@+id/etComment"

android:layout_width="match_parent"

android:layout_height="170dp"

android:textSize="18sp"

android:layout_alignLeft="@id/lblComment"

android:layout_below="@id/lblComment"

android:layout_centerHorizontal="true"/>

<Button

android:id="@+id/btnSave"

android:layout_width="125dp"

android:layout_height="wrap_content"

android:text="Save"

android:layout_below="@id/etComment"

android:layout_alignRight="@id/etComment"/>

<Button

android:id="@+id/btnCancel"

android:layout_width="124dp"

android:layout_height="wrap_content"

android:text="Cancel"

android:layout_below="@id/etComment"

android:layout_alignLeft="@id/etComment"/>

</RelativeLayout>

CHAPTER 6: Layout User Interface Android | 15 Perhatikan bahwa setiap view diletakan dalam

RelativeLayout memiliki atribut yang memungkinkan untuk menyelaraskan dengan view lain. Atribut- atribut tersebut sebagai berikut:

➤ layout_alignParentTop

➤ layout_alignParentLeft

➤ layout_alignLeft

➤ layout_alignRight

➤ layout_below

➤ layout_centerHorizontal

Nilai untuk masing-masing atribut ini adalah ID untuk view yang memiliki referensi atau identitas/ID. Jika contoh kode di atas dijalankan pada emulator, terlihat seperti pada Gambar 15.

Gambar 15

FrameLayout

FrameLayout merupakan sebuah tempat atau panel yang dapat digunakan untuk menampilkan satu atau lebih view. View yang ditambahkan ke FrameLayout selalu berada di kiri atas layout.

Pertimbangkan konten berikut di main.xml:

CHAPTER 6: Layout User Interface Android | 16 Pada contoh ini, kita membuat FrameLayout berada di dalam RelativeLayout. Dalam FrameLayout, kita meletakan ImageView. UI ditunjukan pada Gambar 16:

Gambar 16

Jika Kita menambahkan tampilan lain (seperti view Button) dalam FrameLayout, view akan tumpang tindih dengan view sebelumnya (lihat Gambar 17):

Catatan:

Pada contoh ini diasumsikan pada folder

res/drawable-mdpi terdapat file

gambar dengan nama ic_launcher.png

CHAPTER 6: Layout User Interface Android | 17

Gambar 17

ScrollView

ScrollView merupakan tipe khusus dari FrameLayout. Dengan ScrollView pengguna dapat membuat User Interface agar dapat digulir (scroll) karena list view yang melebihi ruang daripada besarnya layar. ScrollView hanya berisi satu view atau ViewGroup, biasanya ViewGroup yang digunakan merupakan LinearLayout.

Catatan:

Kita dapat menambahkan beberapa view di

dalam FrameLayout, tetapi masing-masing

akan ditumpuk satu sama lain. Ini dapat

digunakan ketika kita ingin membuat sebuah

rangkaian animasi, dimana hanya satu view

yang terlihat pada suatu waktu.

CHAPTER 6: Layout User Interface Android | 18 Isi activity_main.xml berikut menunjukkan ScrollView mengandung LinearLayout, yang didalamnya berisi beberapa view Button dan EditText:

<?xml version="1.0" encoding="utf-8"?>

<ScrollView

xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<Button

android:id="@+id/btn1"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 1"/>

<Button

android:id="@+id/btn2"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 2"/>

<Button

android:id="@+id/btn3"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 3"/>

<EditText

android:id="@+id/txtEdit"

android:layout_width="fill_parent"

android:layout_height="600dp" />

<Button

android:id="@+id/btn4"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 4"/>

<Button

android:id="@+id/btn5"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button 5"/>

</LinearLayout>

</ScrollView>

Gambar 18

Jika contoh di atas dijalankan pada sebuah emulator, maka hasilnya dapat dilihat seperti pada

Gambar 18 . Karena pada saat activity ditampilkan maka otomatis focus ke EditText, pada contoh

ini seluruh activity diisi dengan (ketinggian EditText ditetapkan 600dp). Untuk mencegah dari

mendapatkan fokus, tambahkan dua atribut berikut ke <LinearLayout> elemen:

CHAPTER 6: Layout User Interface Android | 19 Sekarang kita akan melihat secara default scroll view menampilkan dari atas yaitu terlihat Button berada pada layar dari scroll view(lihar Gambar 19).

Gambar 19

Terkadang mungkin kita ingin secara otomatis focus ke EditText, tetapi Kita tidak ingin panel input atau panel keyboard tampil secara otomatis (yang terjadi pada perangkat sesungguhnya). Untuk mencegah keyboard muncul, kita dapat menambahkan atribut berikut ke elemen <activity>

dalam AndroidManifest.xml: