Linear Layout

Seperti apa sih tampilan Linear Layout? coba lihat Gambar

3.1 berikut. Semakin banyak Kamu berlatih coding, semakin
paham juga maksud programnya.

Gambar 3. 1

2. Pilih LinearLayoutSederhana /res/layout/main.xml, lihat

Gambar 3.3

Gambar 3.3
4. Ketikkan kode berikut ini. Meskipun panjang, script ini memiliki
kemiripan. Sementara cukup tulis satu pola saja, lakukan
copy-paste-edit.
1: <?xml version="1.0" encoding="utf-8"?>
2: <LinearLayout
3: xmlns:android="http://schemas.android.com/apk/res/android"
4: android:orientation="vertical"
5: android:layout_width="fill_parent"
6: android:layout_height="fill_parent">
7:
8: <LinearLayout
9: android:orientation="horizontal"
10: android:layout_width="fill_parent"
11: android:layout_height="fill_parent"
12: android:id="@+id/LinearLayout1"
13: android:layout_weight="1">
30
14: <TextView
15: android:text="Merah"
16: android:gravity="center_horizontal"
17: android:background="#aa0000"
18: android:layout_height="fill_parent"
19: android:layout_weight="1"
20: android:layout_width="wrap_content"/>
21: <TextView
22: android:text="Hijau"
23: android:gravity="center_horizontal"
24: android:background="#00aa00"
25: android:layout_width="wrap_content"
26: android:layout_height="fill_parent"
27: android:layout_weight="1"/>
28: <TextView
29: android:text="Biru"
30: android:gravity="center_horizontal"
31: android:background="#0000aa"
32: android:layout_width="wrap_content"
33: android:layout_height="fill_parent"
34: android:layout_weight="1"/>
35: <TextView
36: android:text="Kuning"

37: android:gravity="center_horizontal"
38: android:background="#aaaa00"
39: android:layout_width="wrap_content"
40: android:layout_height="fill_parent"
41: android:layout_weight="1"/>
42: </LinearLayout>
43:
44: <LinearLayout
45: android:orientation="vertical"
46: android:layout_width="fill_parent"
47: android:layout_height="fill_parent"
48: android:id="@+id/LinearLayout2"
49: android:layout_weight="1">
50: <TextView
51: android:text="Baris pertama"
52: android:textSize="15pt"
53: android:layout_width="fill_parent"
54: android:layout_height="wrap_content"
55: android:layout_weight="1"/>
56: <TextView
57: android:text="Baris kedua"
58: android:textSize="15pt"
59: android:layout_width="fill_parent"
60: android:layout_height="wrap_content"
61: android:layout_weight="1"/>
62: <TextView
63: android:text="Baris ketiga"
64: android:textSize="15pt"
65: android:layout_width="fill_parent"
66: android:layout_height="wrap_content"
67: android:layout_weight="1"/>
68: <TextView
69: android:text="Baris ke empat"
70: android:textSize="15pt"
71: android:layout_width="fill_parent"
72: android:layout_height="wrap_content"
31
 73: android:layout_weight="1"/>
74: </LinearLayout>
75: </LinearLayout>

Layout main.xml jika dilihat hierarkinya dari outline tampak

seperti Gambar 3.4

Gambar 3.4. Susunan layout main.xml

5. Pastikan pada activity LinearLayoutSederhana.java seperti

dibawah ini.
1: package com.linear;
2:
3: import android.app.Activity;
4: import android.os.Bundle;
5:
6: public class LinearLayoutSederhana extends Activity {
7: /** Called when the activity is first created. */
8: @Override
9: public void onCreate(Bundle savedInstanceState) {
10: super.onCreate(savedInstanceState);
11: setContentView(R.layout.main);
12: }
13: }
14:

6. Lakukan Run dengan shortcut CTRL+F11 atau klik kanan

package > run as > android Project.
7. Lihat hasilnya seperti Gambar 3.1

PENJELASAN PROGRAM

Sebuah aplikasi android dibuat dari kombinasi XML dan

JAVA. Biasanya, xml digunakan untuk mengatur layout aplikasi
sedangkan java berperan sebagai pusat pengendalinya.
Pembahasan dibagian ini focus dulu ke xml.
Perhatikan main.xml baris 2, layout diawali oleh widget
LinearLayout. Widget ini berperan sebagai parent yang
32
orientation nya diset vertical (baris 4), artinya berapapun
jumlah widget yang ada didalamnya akan tersusun secara
vertical dari atas ke bawah. Sekarang perhatikan gambar 3.4,
Parent LinearLayout memiliki 2 buah child yaitu LinearLayout1
dan LinearLayout2, nantinya masing-masing child juga
mempunyai child sendiri. Karena parent LinearLayout
orientationnya vertical, maka otomatis child LinearLayout1 dan
LinearLayout2 tersusun secara vertical atas dan bawah.
Sekarang kita perhatikan LinearLayout1 memiliki 4 buah
child textview berisi content “Merah”,”Hijau”,”Biru”,”Kuning”.
Orientasi LinerarLayout1 diset horizontal (baris 9), sehingga
efeknya 4 textview susunannya berjajar dari kiri ke kanan.
Masing-masing textview lebarnya diset wrap_content (baris 20)
agar bisa menyesuaikan dengan panjang content didalamnya,
sedangkan tingginya diset fill_parent sehingga efeknya tinggi
masing-masing textview menghabiskan ruang LinearLayout1.

Atribut gravity pada textview (baris ) mengakibatkan tulisan

merah,hijau,biru dan kuning posisinya ada ditengah secara
horizontal. Hal serupa juga terjadi pada LinearLayout2, hanya
saja settingnya sedikit berbeda.

Nah, sekarang dibagian activity LinearLayoutSederhana,

kita belum menulis kode apa-apa alias masih default. Baris 11
pada activity ini berperan memanggil layout main.xml yang
baru saja kita setup.

RelativeLayout Sederhana

RelativeLayout adalah sebuah layout dimana posisi dari

sebuah komponen (simbol,text,dsb) letaknya bisa diatur
terhadap komponen lainnya. Misalnya tombol “OK” posisinya
berada dibawah “EditText”, kemudian tombol “cancel” posisinya
berada di sebelah kiri tombol “OK” dan dibawah “EditText”.
Intinya, saling berkaitan antara posisi satu tombol dengan yang
lain. Perhatikan Gambar 3.5.

Gambar 3.5
33
Sudah siap?? Yuk kita mulai!:)
1. Pada Package Explorer, pilih LayoutRelatif > res >
layout > main.xml kemudian tulislah script dibawah ini

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

2: <RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android
"
3: android:layout_width="fill_parent"
4: android:layout_height="fill_parent"
android:gravity="top">
5: <TextView
6: android:id="@+id/label"
7: android:layout_width="fill_parent"
8: android:layout_height="wrap_content"
9: android:text="Type here:"/>
10: <EditText
11: android:id="@+id/entry"
12: android:layout_width="fill_parent"
13: android:layout_height="wrap_content"
14: android:layout_below="@id/label"/>
15: <Button
16: android:id="@+id/ok"
17: android:layout_width="wrap_content"
18: android:layout_height="wrap_content"
19: android:layout_below="@id/entry"
20: android:layout_alignParentRight="true"
21: android:layout_marginLeft="10dip"
22: android:text="OK" />
23: <Button
24: android:layout_alignTop="@id/ok"
25: android:text="Cancel"
26: android:layout_height="wrap_content"
27: android:layout_width="wrap_content"
28: android:layout_toLeftOf="@+id/ok"
29: android:layout_below="@+id/entry"/>
30: </RelativeLayout>

2. Pastikan script pada RelativeLayoutSederhana.java

seperti dibawah ini.

1: package contoh.layoutRelatif;
2:
3: import android.app.Activity;
4: import android.os.Bundle;
5:
6: public class RelativeLayoutSederhana extends Activity {
7: /** Called when the activity is first created. */
8: @Override
9: public void onCreate(Bundle savedInstanceState) {
10: super.onCreate(savedInstanceState);
11: setContentView(R.layout.main);
12: }
13: }

3. Lakukan Run dengan shortcut CTRL+F11 atau klik

kanan package > run as > android Project.
34
 PENJELASAN PROGRAM

Kita masih focus di pembahasan layout xml, kali ini kita

menggunakan widget RelativeLayout. Dengan widget ini, semua
widget yang menjadi child posisinya bisa diatur secara relative
terhadap komponen lainnya. Misalnya pada bagian ini, edittext
ditaruh paling atas, button cancel disebelah kanan bawah
edittext, sedangkan button OK dibawah editteks dan dikanan
button cancel.

Masing-masing widget memiliki id yang untuk atau tidak boleh sama. Id ini
sebagai acuan nama widget, mirip analoginya dengan nama manusia.

Android - TableLayout dan TableRow

Cara kerja TableLayout android sama seperti tabel yang lain, tetapi pada
TableLayout ini dapat menentukan posisi dari masing-masing komponen yang
digunakan, yang penting adalah mengetahui cara TableRow. Jika ada 3 TableRow
berada di dalam TableLayout, maka ukuran dari TableRow itu akan saling
berhubungan. Jika ingin membuat TableRow tidak memiliki hubungan dengan
TableRow yang lain, maka cukup keluarkan TableRow Dari TableLAyout.

File :

 res / layout / main.xml

 src / jhohannes.purba / MainActivity.java

main.xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout
3 xmlns:android="http://schemas.android.com/apk/res/android"
4 android:id="@+id/LinearLayout1"
5 android:layout_width="fill_parent"
6 android:layout_height="fill_parent"
7 android:orientation="vertical" >
8
9 <TextView
10 android:id="@+id/textView9"
11 android:layout_width="match_parent"
12 android:layout_height="wrap_content"
13 android:gravity="center"
14 android:text="Tabel Layout &amp; Table Row"
35
15
16 android:textAppearance="?android:attr/textAppearanceLarge"
17 />
18
19
20 <TableLayout
21 android:id="@+id/tableLayout"
22 android:layout_width="match_parent"
23 android:layout_height="wrap_content" >
24
25 <TableRow
26 android:id="@+id/tableRow1"
27 android:layout_width="wrap_content"
28 android:layout_height="wrap_content"
29 android:background="@android:color/darker_gray"
30 android:padding="2dp" >
31
32 <TextView
33 android:id="@+id/textView1"
34 android:layout_width="wrap_content"
35 android:layout_height="wrap_content"
36 android:background="@android:color/black"
37 android:padding="20dp"
38 android:text="A" />
39
40 <TableRow
41 android:id="@+id/tableRow4"
42 android:layout_width="wrap_content"
43 android:layout_height="wrap_content"
44 android:background="@android:color/white"
45 android:padding="2dp" >
46
47 <TextView
48 android:id="@+id/textView5"
49 android:layout_width="wrap_content"
50 android:layout_height="wrap_content"
51
52 android:background="@android:color/black"
53 android:padding="20dp"
54 android:text="B" />
55
56 <TextView
57 android:id="@+id/textView4"

36
 58 android:layout_width="wrap_content"
59 android:layout_height="wrap_content"
60
61 android:background="@android:color/darker_gray"
62 android:padding="20dp"
63 android:text="C"
64 android:textColor="@android:color/black"
65 />
66 </TableRow>
67 </TableRow>
68
69 <TableRow
70 android:id="@+id/tableRow2"
71 android:layout_width="wrap_content"
72 android:layout_height="wrap_content"
73 android:background="@android:color/white"
74 android:padding="2dp" >
75
76 <TextView
77 android:id="@+id/textView2"
78 android:layout_width="wrap_content"
79 android:layout_height="wrap_content"
80 android:background="@android:color/black"
81 android:padding="20dp"
82 android:text="D" />
83
84 <TextView
85 android:id="@+id/textView6"
86 android:layout_width="wrap_content"
87 android:layout_height="wrap_content"
88
89 android:background="@android:color/darker_gray"
90 android:padding="20dp"
91 android:text="F"
92 android:textColor="@android:color/black" />
93
94 <TextView
95 android:id="@+id/textView7"
96 android:layout_width="wrap_content"
97 android:layout_height="wrap_content"
98 android:background="@android:color/black"
99 android:padding="20dp"
100 android:text="G" />

37
101
102 <TextView
103 android:id="@+id/textView8"
104 android:layout_width="wrap_content"
105 android:layout_height="wrap_content"
106
107 android:background="@android:color/darker_gray"
108 android:padding="20dp"
109 android:text="H"
110 android:textColor="@android:color/black" />
111 </TableRow>
112
113 <TableRow
114 android:id="@+id/tableRow3"
115 android:layout_width="wrap_content"
116 android:layout_height="wrap_content"
117 android:background="@android:color/darker_gray"
118 android:padding="2dp" >
119
120 <TableRow
121 android:id="@+id/tableRow5"
122 android:layout_width="wrap_content"
123 android:layout_height="wrap_content"
124 android:background="@android:color/white"
125 android:padding="20dp" >
126
127 <TextView
128 android:id="@+id/textView3"
129 android:layout_width="wrap_content"
130 android:layout_height="wrap_content"
131
132 android:background="@android:color/black"
133 android:padding="20dp"
134 android:text="I" />
135 </TableRow>
136 </TableRow>
137 </TableLayout>
138
139 <TextView
140 android:id="@+id/textView10"
141 android:layout_width="match_parent"
142 android:layout_height="wrap_content"
143 android:gravity="center"

38
144 android:paddingTop="50dp"
145 android:text="Table Row"
146
147 android:textAppearance="?android:attr/textAppearanceLarge"
148 />
149
150
151 <TableRow
152 android:id="@+id/tableRow6"
153 android:layout_width="match_parent"
154 android:layout_height="wrap_content"
155 android:background="@android:color/darker_gray" >
156
157 <TextView
158 android:id="@+id/textView11"
159 android:layout_width="wrap_content"
160 android:layout_height="wrap_content"
161 android:background="@android:color/white"
162 android:padding="10dp"
163 android:text="J"
164 android:textColor="@android:color/black" />
165
166 <TextView
167 android:id="@+id/textView12"
168 android:layout_width="wrap_content"
169 android:layout_height="wrap_content"
170 android:background="@android:color/black"
171 android:padding="10dp"
172 android:text="K" />
173
174 <TextView
175 android:id="@+id/textView13"
176 android:layout_width="wrap_content"
177 android:layout_height="wrap_content"
178 android:background="@android:color/white"
179 android:padding="10dp"
180 android:text="L"
181 android:textColor="@android:color/black" />
182 </TableRow>
183
184 <TableRow
185 android:id="@+id/tableRow7"
186 android:layout_width="match_parent"

39
187 android:layout_height="wrap_content"
188 android:background="@android:color/white" >
189
190 <TextView
191 android:id="@+id/textView14"
192 android:layout_width="wrap_content"
193 android:layout_height="wrap_content"
194 android:background="@android:color/black"
195 android:padding="10dp"
196 android:text="M" />
197
<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
android:padding="10dp"
android:text="N"
android:textColor="@android:color/black" />
</TableRow>

</LinearLayout>

Struktur dari tampilan xml di atas adalah sebagai berikut :

Struktur TableLayout dan TableRow

40
MainActivity.java

package jhohannes.purba;
1
2
import android.app.Activity;
3
import android.os.Bundle;
4
5
public class MainActivity extends Activity {
6
@Override
7
public void onCreate(Bundle savedInstanceState) {
8
super.onCreate(savedInstanceState);
9
setContentView(R.layout.main);
10
}
11
}
12

Android TableLayout dan TableRow

Perhatikan hubungan A dan D dan I, karena I memiliki lebar lebih tinggi, maka
otomatis A dan D akan mengikuti ukuran I. ini terjadi karena TableRow A,D dan
I berada pada TableLayout. begitu juga hubungan antara B, C dan F. B dan C
41
dimasukkan kedalam sebuah TableRow, maka F akan mengikuti ukuran si
TableRow B dan C.

Perhatikan juga K dan N, tidak memiliki pengaruh karena tidak ada TableLayout
yang menghubungkan sehingga masing-masing TableRow bekerja sesuai ukuran
masing-masing.

42
 Menampilkan Gambar

Pada bab ini kita menampilkan gambar menggunakan

widget ImageView. Seperti apa sih hasilnya nanti? Perhatikan
Gambar 4.1 berikut ini

Gambar 4. 2
1. Jalankan Enclipse, buat Project baru
2. Bikin folder baru dengan nama drawable di folder /res.
Caranya klik kanan folder res > new> folder (Gambar
4.4).

Gambar 4.4. Menambahkan folder baru

3. Copy sebuah gambar PNG atau JPG kemudian paste di
dalam folder drawable. Klik kanan folder drawable >
paste. Project ini memakai gambar format PNG berukuran
(250 x 275) px (Gambar 4.6).

Gambar 4.5. file gambar.png

43
 Gambar 4.6. Hierarki folder /res/drawable
4. Ketikkan kode berikut ini pada layout main.xml
1: <?xml version=”1.0” encoding=”utf-8”?>
2: <ImageView
xmlns:android=”http://schemas.android.com/apk/res/android”
3: android:id=”@+id/imageView”
4: android:layout_width=”fill_parent”
5: android:layout_height=”fill_parent”
6: android:src=”@drawable/gambar”>
7: </ImageView>

5. Pastikan kode pada tampilanGambar.java seperti

berikut
1: package contoh.tampilanGambar;
2:
3: import android.app.Activity;
4: import android.os.Bundle;
5:
6: public class tampilanGambar extends Activity {
7: /** Called when the activity is first created. */
8: @Override
9: public void onCreate(Bundle savedInstanceState) {
10: super.onCreate(savedInstanceState);
11: setContentView(R.layout.main);
12: }
13: }
14:

6. Lakukan RUN dan lihat hasilnya. Mudah bukan??

PENJELASAN PROGRAM
Perhatikan main.xml, widget ImageVIew memiliki atribut
android:src=”@drawable/gambar” . Atribut ini digunakan untuk
menunjuk lokasi dimana gambar disimpan, biasanya didalam
folder drawable.
Dengan cara ini, kita tidak perlu mengubah barisan kode
pada tampilanGambar.java karena secara default memanggil
layout XML yang telah kita buat melalui
44
setContentView(R.layout.main).
Sekarang kita akan merubah icon aplikasi sederhana ini
tanpa coding. Perhatikan gambar 4.7

Gambar 4. 7. Mengganti icon launcher

Gambar 4. 8. Icon.png

Gambar 4. 9

Siapkan gambar icon.png berukuran 70px x 72 px

(gambar 4.8), kemudian paste icon.png ini ke dalam folder
res/drawable-lpi. Run aplikasi, sampai disini icon sudah ganti.
Kamu juga boleh memasukkan gambar ke folder res/drawable-
hpi dan res/drawable-mpi. Yuph! Sangat mudah dan Kamu pasti
bisa. 

45

B. MEMBUAT TEKS AUTOCOMPLETE
Sekarang kita belajar bagaimana caranya membuat teks
autocomplete. Skenarionya, disediakan sebuah editteks sebagi
masukan. Saat Kamu mengetik minimal 3 huruf, secara
otomatis akan muncul rekomendasi kata-kata yang berawalan
dari 3 huruf tadi. Lebih jelasnya perhatikan Gambar 5.1.

Gambar 5.1
Sudah siap ? mari kita mulai!
1. Jalankan Enclipse, buat project baru, isilah parameter
seperti berikut
Project name AutocompleteSederhana
Build Target Android 4.3
Application name Belajar Autocomplete
Package name com.auto.comp
Create Activity AutocompleteSederhana
Min SDK version 18

2. Tambahkan kode baris ke 5 berikut pada String.xml

1: <?xml version="1.0" encoding="utf-8"?>
2: <resources>
3: <string name="hello">Hello World, autoComplete!</string>
4: <string name="app_name">Membuat Teks AutoComplete</string>
5: <string name="perintah">Masukkan minimal 3 huruf</string>
6: </resources>

3. Kemudian ketikkan script berikut ini pada main.xml.

1: <?xml version="1.0" encoding="utf-8"?>
2: <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3: android:orientation="vertical"
android:layout_width="fill_parent"
4: android:layout_height="fill_parent">
5: <TextView android:layout_width="wrap_content"
6: android:layout_height="wrap_content"
7: android:id="@+id/textView1"
8: android:text="@string/perintah"></TextView>
9: <AutoCompleteTextView android:id="@+id/edit"
10: android:layout_width="fill_parent"
11: android:layout_height="wrap_content"
12: android:completionThreshold="3" />
13: <TextView android:layout_width="fill_parent"

46
14: android:text="TextView"
15: android:layout_height="wrap_content"
16: android:id="@+id/hasil"></TextView>
17: </LinearLayout>

4. Ketiklah script AutocompleteSederhana.java seperti

berikut
1: package com.auto.comp;
2:
3: import android.app.Activity;
4: import android.os.Bundle;
5: import android.text.Editable;
6: import android.text.TextWatcher;
7: import android.widget.ArrayAdapter;
8: import android.widget.AutoCompleteTextView;
9: import android.widget.TextView;
10:
11: public class AutocompleteSederhana extends Activity implements
TextWatcher {
12: /** Called when the activity is first created. */
13: TextView hasil;
14: AutoCompleteTextView edit;
15: String[] item = { "Merbabu", "Merapi", "Lawu", "Rinjani",
16: "Sumbing","Sindoro", "Krakatau", "Selat Sunda", "Selat
17: Bali","Selat Malaka","Kalimantan", "Sulawesi", "Jawa" };
18:
19: @Override
20: public void onCreate(Bundle savedInstanceState) {
21: super.onCreate(savedInstanceState);
22: setContentView(R.layout.main);
23:
24: hasil = (TextView) findViewById(R.id.hasil);
25: edit = (AutoCompleteTextView) findViewById(R.id.edit);
26: edit.addTextChangedListener(this);
27: edit.setAdapter(new ArrayAdapter<String>(this,
28: android.R.layout.simple_dropdown_item_1line, item));
29: }
30:
31: public void onTextChanged(CharSequence s, int start, int
32: before, int count) {
33: hasil.setText(edit.getText());
34: }
35:
36: public void beforeTextChanged(CharSequence s, int start, int
37: count, int after) {
38: // not used
39: }
40:
41: public void afterTextChanged(Editable s) {
42: // not used
43: }
44: }

Bila script berantakan, lakukan Format (source > format).

Lakukan RUN dan lihat hasilnya.

47
 PENJELASAN PROGRAM

Lihat dulu Main.xml khususnya baris 9-10, merupakan

bagian yang menciptakan widget autocomplete. Widget ini
memiliki beberapa atribut salah satu contohnya adalah baris 12.
Atribut pada baris 12 bernilai 3, berfungsi untuk membatasi
jumlah minimal huruf yang nanti dimasukkan. Dengan
demikian, seorang user minimal harus memasukkan 3 huruf
dulu baru kemudian muncul kata-kata rekomendasi.

Sekarang kita focus ke activity AutocompleteSederhana.

Saya bagi menjadi tiga blok
1. Baris 13-17 : deklarasi object textview, string dan
autocompletetextView
2. Baris 24-28 : sinkronisasi object terhadap widget di layout
xml berdasarkan id, sekaligus menempelkan method pada
object edit.
3. Baris 31-43 : implementasi method TextWatcher

Coba perhatikan dulu baris 14, object „edit‟ adalah turunan dari
class AutoCompleteTextView. Object ini merupakan textview
yang bisa diedit kemudian muncul daftar rekomendasi kata
secara otomatis saat proses mengetik berlangsung. Daftar
rekomendasi kata ditampilkan dalam sebuah drop down menu
yang bisa diklik oleh pengguna.
Baris 26, mengaktifkan object „edit‟ supaya bisa menangkap
sinyal ketika user memasukkan sebuah huruf. Sinyal ini
kemudian direspon oleh method-method pada baris 31-43 yaitu
- afterTextChanged()
method ini dipanggil setelah edittext selesai diubah
- beforeTextChanged()
method ini dipanggil sebelum edittext diubah
- onTextChanged()
method ini panggil saat text pada edittext sedang diubah

Baris 28 , menempelkan data array bernama „item‟ ke object „edit‟. Bagian

ini mengakibatkan kata-kata yang disimpan dalam variable item muncul
otomatis saat user memasukkan huruf. Baris 33 berperan menduplikasi
data, yaitu huruf apa saja yang dimasukkan ke dalam object „edit‟ maka
tampil juga di object „hasil‟.

48
 Membuat Kotak Dialog
Dalam sebuah aplikasi, kotak dialog merupakan sarana
interaktif antara user dengan aplikasi itu sendiri. Misalnya jika
kita ingin keluar dari aplikasi, biasanya muncul peringatan berisi
pertanyaan “Are you sure to quit?” dan tersedia tombol “yes” dan
“cancel”. Pada bagian ini, kita mengimplementasikan 3 macam
dialog yaitu
 Toast
 ListDialog
 AlertDialog

Hasil akhir project ini terlihat seperti gambar 5.2. Oks,

langsung kita praktikkan yaap?!

Gambar 5.2. Hasil akhir project Kotak Dialog

1. Bikin sebuah project baru

Project name DialogBox
Build Target Android 4.3
Application name Kotak Dialog
Package name com.dialog
Create Activity KotakDialog
Min SDK version 18

2. Tambahkan 3 string element pada Strings.xml

1: <?xml version="1.0" encoding="utf-8"?>
2: <resources>
3: <string name="hello">Hello World, kotakDialog!</string>

49
4: <string name="app_name">Membuat Kotak Dialog</string>
5: <string name="toastTextBtn">Panggil Toast</string>
6: <string name="exitTextBtn">Keluar Applikasi</string>
7: <string name="listDialogTextBtn">Panggil List
Dialog</string>
8: </resources>

3. Bikin dulu layoutnya melalui Main.xml

1: <?xml version="1.0" encoding="utf-8"?>
2: <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3: android:orientation="vertical"
4: android:layout_width="fill_parent"
5: android:layout_height="fill_parent">
6:
7: <Button android:layout_width="fill_parent"
8: android:id="@+id/toastBtn"
9: android:layout_height="wrap_content"
10: android:text="@string/toastTextBtn"></Button>
11:
12: <Button android:layout_width="fill_parent"
13: android:layout_height="wrap_content"
14: android:id="@+id/listDialogBtn"
15: android:text="@string/listDialogTextBtn"></Button>
16:
17: <Button android:layout_width="fill_parent"
18: android:layout_height="wrap_content"
19: android:text="@string/exitTextBtn"
20: android:id="@+id/exitBtn"></Button>
21: </LinearLayout>

4. Okey, sekarang saatnya menulis kode di activity

KotakDialog.java
1: package com.dialog;
2:
3: import android.app.Activity;
4: import android.app.AlertDialog;
5: import android.content.DialogInterface;
6: import android.os.Bundle;
7: import android.widget.Button;
8: import android.widget.Toast;
9: import android.view.View;
10:
11: public class KotakDialog extends Activity implements
12: OnClickListener {
13: Button pesanToast;
14: Button keluar;
15: Button tampilList;
16: /** Called when the activity is first created. */
17: @Override
18: public void onCreate(Bundle savedInstanceState) {
19: super.onCreate(savedInstanceState);
20: setContentView(R.layout.main);
21:
22: pesanToast = (Button) findViewById(R.id.toastBtn);
23: pesanToast.setOnClickListener(this);
24:
25: keluar = (Button) findViewById(R.id.exitBtn);
26: keluar.setOnClickListener(this);
27:
28: tampilList = (Button)
29: findViewById(R.id.listDialogBtn);
30: tampilList.setOnClickListener(this);
31: }
32:
33: public void onClick(View clicked) {
34: switch (clicked.getId()) {
35: case R.id.listDialogBtn:
36: munculListDialog();
37: break;
38: case R.id.toastBtn:
39: Toast.makeText(this, "Kamu memilih Toast",
40: Toast.LENGTH_SHORT).show();
41: break;
42: case R.id.exitBtn:
43: exit();
44: break;
45: }
46: }
47:
48: private void munculListDialog() {
49: // TODO Auto-generated method stub
50: final CharSequence[] items = { "Es Teh", "Es Jeruk",
51: "Lemon Squash","Soft Drink" };
52:
53: AlertDialog.Builder kk = new AlertDialog.Builder(this);
54: kk.setTitle("Pilih Minuman");
55: kk.setItems(items, new DialogInterface.OnClickListener() {
56: public void onClick(DialogInterface dialog, int item) {
57: Toast.makeText(getApplicationContext(), items[item],
58: Toast.LENGTH_SHORT).show();
59: }
60: }).show();
61: }
62:
63: private void exit() {
64: AlertDialog.Builder builder = new AlertDialog.Builder(this);
65: builder.setMessage("Apakah Kamu Benar-Benar ingin keluar?")
66: .setCancelable(false)
67: .setPositiveButton("Ya", new
68: DialogInterface.OnClickListener() {
69: public void onClick(DialogInterface dialog,
70: int id) {
71: KotakDialog.this.finish();
72: }
73: })
74: .setNegativeButton("Tidak",new
75: DialogInterface.OnClickListener() {
76: @Override
77: public void onClick(DialogInterface dialog,
78: int arg1) {
79: // TODO Auto-generated method stub
80: dialog.cancel();
81: }

46
 82: }).show();
83: }
84: }

Nah, sudah selesai. Silakan dirun , semoga tidak error 



PEMBAHASAN PROGRAM

Perhatikan KotakDialog.java, saya bagi menjadi 5 blok yang

memiliki peran sendiri-sendiri
1. Baris 12-14 : deklarasi object Button.
2. Baris 19-30 : sinkronisasi object terhadap widget button
pada layout main.xml sekaligus mengaktifkan button.
3. Baris 33-45 : fungsi pada masing-masing button.
4. Baris 48-61 : fungsi yang dipanggil ketika button „panggil
list dialog‟ diklik.
5. Baris 63-83 : fungsi yang dipanggil ketika button „keluar
aplikasi‟ diklik.

Activity ini mengimplementasikan class OnClickListener

(baris 11-12). Class ini memiliki sebuah method onClick (baris
33-45) yang bertugas merespon button pada saat diklik.
Didalam method onClick(), button direspon berdasarkan idnya
melalui perulangan switch-case. Jika button pemilik id
„listDialogBtn‟ diklik maka kemudian memanggil fungsi
munculListDialog() (baris 58-61), jika button ber-id „toastBtn‟
diklik, maka activity mengenerate sebuah toast, sedangkan jika
yang diklik adalah button ber-id „exitBtn‟ maka yang dieksekusi
adalah fungsi exit() (baris 63-83).

47
 B. PICKER
Dalam android, picker sering dimanfaatkan untuk
melakukan setting tanggal atau jam. Lihat gambar 5.3.

Gambar 5.3. Picker untuk setting tanggal

1. Bikin project baru lagi, dengan parameter seperti berikut

Project name Picker

Build Target Android 4.3
Application name Membuat Picker
Package name com.picker
Create Activity picker
Min SDK version 18

2. Kita buat dulu bagian layout Main.xml

1: <?xml version="1.0" encoding="utf-8"?>
2: <LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
3: android:orientation="vertical"
4: android:layout_width="fill_parent"
5: android:layout_height="fill_parent">
6: <TextView android:layout_width="fill_parent"
7: android:layout_height="wrap_content"
8: android:text="@string/hello"
9: android:id="@+id/dateAndTime"/>
10: <Button android:text="Set the Date"
11: android:layout_width="fill_parent"
12: android:layout_height="wrap_content"
13: android:id="@+id/dayBtn"></Button>
14: <Button android:text="Set the Time"
15: android:layout_width="fill_parent"
16: android:layout_height="wrap_content"
17: android:id="@+id/timeBtn"></Button>

48
18: </LinearLayout>
19:

3. Berikutnya kita sedikt banyak koding di activity

picker.java
1: package com.picker;
2:
3: import java.text.DateFormat;
4: import java.util.Calendar;
5:
6: import android.app.Activity;
7: import android.app.DatePickerDialog;
8: import android.app.TimePickerDialog;
9: import android.os.Bundle;
10: import android.view.View;
11: import android.view.View.OnClickListener;
12: import android.widget.Button;
13: import android.widget.DatePicker;
14: import android.widget.TextView;
15: import android.widget.TimePicker;
16:
17: public class picker extends Activity implements OnClickListener
18: {
19:
20: DateFormat fmtDateAndTime =
21: DateFormat.getDateTimeInstance();
22: TextView dateAndTimeLabel;
23: Calendar dateAndTime = Calendar.getInstance();
24: DatePickerDialog.OnDateSetListener d =
25: new DatePickerDialog.OnDateSetListener() {
26: @Override
27: public void onDateSet(DatePicker view, int year, int month,
28: int day) {
29: // TODO Auto-generated method stub
30: dateAndTime.set(Calendar.YEAR, year);
31: dateAndTime.set(Calendar.MONTH, month);
32: dateAndTime.set(Calendar.DAY_OF_MONTH, day);
33: updateLabel();
34: }
35: };
36: TimePickerDialog.OnTimeSetListener t =
37: new TimePickerDialog.OnTimeSetListener() {
38: @Override
39: public void onTimeSet(TimePicker view, int jam, int menit) {
40: // TODO Auto-generated method stub
41: dateAndTime.set(Calendar.HOUR_OF_DAY, jam);
42: dateAndTime.set(Calendar.MINUTE, menit);
43: updateLabel();
44: }
45: };
46:
47: /** Called when the activity is first created. */
48: @Override
49: public void onCreate(Bundle savedInstanceState) {
50: super.onCreate(savedInstanceState);
51: setContentView(R.layout.main);

49
52:
53: Button dayBtn = (Button) findViewById(R.id.dayBtn);
54: dayBtn.setOnClickListener(this);
55: Button timeBtn = (Button) findViewById(R.id.timeBtn);
56: timeBtn.setOnClickListener(this);
57: dateAndTimeLabel = (TextView)
58: findViewById(R.id.dateAndTime);
59: updateLabel();
60: }
61:
62: @Override
63: public void onClick(View v) {
64: // TODO Auto-generated method stub
65: switch (v.getId()) {
66: case R.id.dayBtn:
67: settingTanggal();
68: break;
69: case R.id.timeBtn:
70: setJam();
71: break;
72: }
73: }
74:
75: private void updateLabel() {
76: dateAndTimeLabel.setText(
77: fmtDateAndTime.format(dateAndTime.getTime()));
78: }
79:
80: private void settingTanggal() {
81: new DatePickerDialog(picker.this, d,
82: dateAndTime.get(Calendar.YEAR),
83: dateAndTime.get(Calendar.MONTH),
84: dateAndTime.get(Calendar.DAY_OF_MONTH)).show();
85: }
86:
87: private void setJam() {
88: new TimePickerDialog(picker.this, t,
89: dateAndTime.get(Calendar.HOUR_OF_DAY),
90: dateAndTime.get(Calendar.MINUTE), true).show();
91: }
92: }

PENJELASAN PROGRAM
Kita mulai dari layout main.xml, di bagian ini Kamu
menyiapkan 2 buah button dan sebuah textview. Button
pertama diberi id „dayBtn‟ (baris 13) nanti difungsikan untuk
memanggil picker tanggal, sedangkan button kedua diberi id
„timeBtn‟ (baris 17) nanti dipakai untuk memanggil picker jam.
Sekarang lanjut ke activity picker.java,
DatePickerDialog.onDateSetListener (baris 24) berperan menangkap
informasi setelah user selesai melakukan setting waktu. Pada saat
yang bersamaan, method onDataSet() dipanggil untuk mengupdate
Tahun, bulan, hari, tanggal maupun jam, keudian ditampilkan ke
textview melalui method updateLabel()

50
51