VIEW LAYOUT & PREFERENCE ACTIVITY - Part 4

Aplikasi Android yang rumit mengunakan berbagai View dalam Activity, dan biasanya juga mempunyai layar Settings atau Preferences sehingga pengguna dapat melakukan kustomisasi terhadap aplikasi tersebut. Untuk menunjukkan pengaturan tata letak berbagai View dan juga cara untuk menambahkan layar Settings/Preferences dalam Menu di Android, contoh berikutnya yang akan kita buat adalah sebuah aplikasi kalkulator untuk konversi Rupiah ke Dolar atau Dolar ke Rupiah. Layar Settings akan digunakan supaya pengguna dapat memasukkan sendiri nilai kurs yang sedang berlaku saat itu.

PEMBUATAN APLIKASI KALKULATOR KURS :

1.      Di Eclipse IDE, buatlah project Android baru untuk Android 2.1 dengan nama Kalkulator Kurs. Gunakan package name com.inixindo.workshop.kurs, dan buat activity dengan nama KalkulatorKursActivity.

2.      Tambahkan resources di file strings.xml sebagai berikut dan jangan lupa untuk melakukan save setelah selesai mengeditnya:

• Resource color bernama myColor dengan nilai “#3399CC”
• Resource color bernama textColor dengan nilai “#000”
• Resource string bernama rupiah dengan nilai “Dolar ke Rupiah”
• Resource string bernama dolar dengan nilai “Rupiah ke Dolar”
• Resource string bernama buttonHandler dengan nilai “buttonClicked”
• Resource string bernama hitung dengan nilai “Lakukan Kalkulasi”

3.      Klik pada tab XML untuk melihat nilai dalam bentuk XML mentahnya.

4.      Buka file main.xml yang ada di resource layout. File ini menentukan komponen view untuk user interface UI dalam activity. Tampilkan dalam bentuk Layout mode, bukan XML mode supaya bisa melakukan drag and drop komponen view ke dalam layout.

5.      Hapus komponen TextView yang ada di LinearLayout dengan klik kanan dan pilih Remove.

6.      Klik pada LinearLayout, buka Properties, dan ubah property background supaya menggunakan resource color myColor.

7.      Lakukan drag and drop komponen view EditText, TextView, RadioGroup, dan 1 Button. Hapus RadioButton yang terakhir sehingga hanya tersisa 2 saja. Tampilan seharusnya seperti berikut ini :

8.      Perhatikan Outline untuk memastikan bahwa kedua RadioButton ada di dalam radioGroup1. Bila tidak, pilih RadioButton dan gunakan anak panah untuk menggesernya sehingga masuk ke dalam radioGroup1. Tampilan Outline seharusnya demikian :

9.      Ubah property pada editText1 sehingga Layout width menjadi fill_parent. Kosongkan pula roperty Text supaya tidak ada tulisannya. Pada property Input type, beri tanda centang pada number supaya hanya angka saja yang boleh dimasukkan ke dalamnya.

10.  Ubah property pada textView1 sehingga Layout width menjadi fill_parent. Kosongkan pula property Text supaya tidak ada tulisannya. Ubah property Text color menjadi resource color textColor, property Text style menjadi bold, dan property Text size menjadi 10pt.

11.  Ubah property pada radio0 sehingga Text menggunakan resource string rupiah.

12.  Ubah property pada radio1 sehingga Text menggunakan resource string dolar.

13.  Ubah property pada button1 sehingga Text menggunakan resource string hitung. Ubah pula property On click sehingga menggunakan resource string buttonHandler.

14.  Lakukan save pada main.xml. Berikut kita perlu mengisi kode untuk class KalkulatorKursActivity. Buka file KalkulatorKursActivity.java di Eclipse IDE.

15.  Tambahkan kode di bawah ini di dalam class KalkulatorKursActivity setelah method onCreate(). Pastikan bahwa kode tambahan di bawah ini masih di dalam kurung kurawal untuk class KalkulatorKursActivity :

private long kursDolar = 9000;

private long rupiahToDolar(long rupiah) {

return rupiah / kursDolar;

}

private long dolarToRupiah(long dolar) {

return dolar * kursDolar;

}

public void buttonClicked(View view) {

  switch (view.getId()) {

  case R.id.button1:

    EditText input = (EditText) findViewById(R.id.editText1);

    TextView output = (TextView) findViewById(R.id.textView1);

    RadioButton rupiah = (RadioButton) findViewById(R.id.radio0);

    RadioButton dolar = (RadioButton) findViewById(R.id.radio1);

    long inputValue = 0;

    try {

    inputValue = Long.parseLong(input.getText().toString());

    } catch (Exception e) {

    Toast.makeText(this, "Masukkan input berupa angka",

    Toast.LENGTH_LONG).show();

    return;

    }

    if (rupiah.isChecked()) {

output.setText(" $ " + inputValue + " = Rp "

+ dolarToRupiah(inputValue));

    } else if (dolar.isChecked()) {

output.setText(" Rp " + inputValue + " = $ "

+ rupiahToDolar(inputValue));

    } else {

Toast.makeText(this, "Pilih jenis konversi kurs",

Toast.LENGTH_LONG).show();

    }

    break;

  }

}

16.  Pastikan tidak ada kesalahan dalam source code di class KalkulatorKursActivity.java. Jangan lupa untuk melakukan Ctrl-Shift-O untuk auto import. Untuk merapikan source code, tekan Ctrl-Shift-F. Lakukan save pada file.

17.  Buka file AndroidManifest.xml, klik pada tab Application, kemudian klik pada KalkulatorKursActivity di bagian Application Nodes. Untuk memastikan bahwa hanya ada satu instance yang jalan pada saat kita menjalankan aplikasi Kalkulator Kurs sehingga tidak berjalan berkali-kali dan menghabiskan memory, pada bagian Attributes pilihlah “singleInstance” untuk Launch mode. Lakukan save.

18.  Jalankan project sebagai Android Application dan periksa hasilnya.

PEMBUATAN LAYAR SETTINGS DI MENU :

1.      Kita ingin menambahkan sebuah layar settings yang dapat diakses dengan menekan tombol Menu di perangkat Android. Dalam settings menu ini, kita bisa menentukan kurs dolar saat ini sehingga kalkulasi mencerminkan kurs yang terbaru. Kurs ini juga akan terus tersimpan meskipun kita mematikan aplikasi Kurs Kalkulator, sehingga kita tidak harus selalu menentukan kurs tiap kali menjalankan aplikasi, namun cukup mengubahnya jika memang ada perubahan saja.

2.      Untuk menambahkan menu, kita perlu membuat file XML baru untuk mendefinisikan menu tersebut. Dari Eclipse IDE, klik kanan pada project dan pilih New, kemudian pilih Other, kemudian pilih Android, dan pilih Android XML File.

3.      Beri nama file “settings.xml” dan pilih Menu sebagai tipe resource. Pada intinya kita menambahkan resource tipe menu untuk aplikasi kita. Klik Finish.

4.      Untuk menambahkan menu element baru, klik pada tombol Add. Pilih Item dan klik OK untuk membuat item baru di menu. Ganti Id menjadi “@+id/settings” dan beri Title “Settings”. Lakukan save untuk file.

5.      Supaya menu yang kita daftarkan di file settings.xml bisa tampil di aplikasi kita, maka kita harus menambahkan method untuk membuka menu item Settings tersebut bila user melakukan klik pada tombol Menu di perangkat Android. Kembali ke file KalkulatorKursActivity.java, klik pada menu Source di Eclipse IDE, pilih Override/Implement Methods.

6.      Berikan centang pada method onCreateOptionsMenu(Menu) dan klik tombol OK. Ini akan menyiapkan method untuk membuka menu settings. Tambahkan kode di dalam method onCreateOptionsMenu() tersebut sehingga menjadi seperti di bawah ini :

@Override

public boolean onCreateOptionsMenu(Menu menu) {

MenuInflater inflater = getMenuInflater();

inflater.inflate(R.menu.settings, menu);

return true;

}

7.      Lakukan Ctrl-Shift-O untuk melakukan auto-import terhadap class MenuInflater. Class tersebut digunakan untuk menampilkan (inflate) menu yang terdapat pada resource file settings.xml dengan nama R.menu.settings.

8.      Jalankan aplikasi sekarang, dan coba klik tombol Menu pada perangkat Android. Perhatikan bahwa menu Settings muncul, namun belum ada kode untuk melakukan apa pun bila Settings dipilih.

9.      Supaya setting kurs bisa tersimpan di Android, kita harus membuat resource dengan tipe Preference. Klik kanan pada project di Eclipse IDE Project Explorer, pilih New, kemudian Other, kemudian Android, dan pilih Android XML File.