MOBILE PROGRAMMING

Herry S. Langi, SST. MT

PROGRAM 5 MEMBUAT TEKS AUTOCOMPLETE

Sekarang kita akan belajar bagaimana caranya membuat teks autocomplete.
Pada saat mengetik minimal 3 huruf, secara otomatis akan muncul rekomendasi kata-
kata yang berawalan dari 3 huruf tersebut. Lebih jelasnya perhatikan Gambar.

Langkah-langkahnya :
1. Jalankan Enclipse, buat project baru, isilah parameter seperti berikut

2. Ubah program yang berada pada String.xml menjadi :

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

2: <resources>
3: <string name="hello">Hello World, autoCompleteSederhana!</string>
4: <string name="app_name"> AutoComplete Sederhana</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"
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. AutocomleteSederhana;

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 Bali","
17: 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: }

5. Run Program dan hasilnya sebagai berikut :

 Pada saat dilakukan pemilihan salah satu lokasi lokasi tempat (Selat Sunda), maka
tampilannya sebagai berikut :

Penjelasan Program
Lihat dulu bagian 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 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 dipanggil saat text pada edittext sedang diubah.
Pada bagian Baris 28 , berfungsi untuk 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.

PROGRAM 6 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

Langkah-langkah dalam pembuatan program :

1. Jalankan Enclipse, buat project baru, isilah parameter seperti berikut

2. Buka bagian Strings.xml, kemudian ketikan program berikut :

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

2: <resources>
3: <string name="hello">Hello World, kotakDialog!</string>
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. Buka bagian Main.xml, dan ketikan program berikut :

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. Buka bagian KotakDialog.java, kemudian ketikan program berikut :

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: }

5. Jalankan program, dimana tampilannya seperti berikut :

Pada program aplikasi yang dibuat, coba lakukan penekanan tombol: Panggil
Toast, Panggil List Dialog dan keluar aplikasi. Apa yang terjadi pada saat
penekanan tombol dilakukan.

Pembahasan program

Perhatikan KotakDialog.java, terdapat 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 id-nya 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).

PROGRAM 7 MEMBUAT PROGRAM PICKER

Dalam android, picker sering dimanfaatkan untuk melakukan setting tanggal atau
jam.

Lngkah-langkah pembuatan programnya segabai berikut :

1. Buat program baru, kemudian masukan parameter-parameter berikut

2. Buka bagian main.xml, dan ketikan kode program berikut :

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>
18: </LinearLayout>

3. Buka bagian Picker.java, kemudian ketikan kode program berikut :

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
18: implements OnClickListener {
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);
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: }
4. Jalankan program dan lihat hasilnya. Tampilan pada saat program dijalankan :

Pada program aplikasi, lakukan penekanan pada tombol Set the Date dan tombol
Set the Time, kemudian amati apa yang terjadi.

Keterangan Program
Kita mulai dari layout main.xml, di bagian ini terdapat 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().