PRAKTIKUM 6 SPINNER Spinner adalah aplikasi sederhana untuk menyusun pilihan ketika akan memilih sebuah jawaban berupa option, dan menampilkan jawaban terpilih di textbox. Spinner merupakan view yang memiliki fungsi yang sama dengan dropdown menu pada aplikasi, ketika pengguna meng-klik spinner ini maka akan tampil beberapa pilihan menu. Sehingga spinner biasa digunakan oleh programmer untuk menampilkan menu yang akan disajikan. Spinner berada pada class wideget : java.lang.object android.view.view android.view.viewgroup android.widget.adapterview<t extends android.widget.adapter> android.widget.absspinner android.widget.spinner Selain itu spinner dikenal sebagai salah satu widget yang hampir mirip dengan listview, hanya perbedaannya listview-nya menyerupai combo, kalau yang terbiasa membuat program dengan Microsoft Visual Basic pasti mengenal dengan yang namanya combo list. Praktikum 6.1. Pilihan Drop Down Dalam praktikum ini akan dibuat list kota di Provinsi Riau seperti pada gambar di bawah ini, jika diklik salah satu, maka akan di jadikan sebagai yang pertama. Ikutilah langkah-langkah praktikum berikut: 1. Aktifkanlah project baru, File New Project Android Application Project Modul 6 Spinner Page 1
2. Klik button Next, sehingga terlihat tampilan seperti berikut : 3. Klik button Next, selanjutnya layar dialog untuk merubah icon Modul 6 Spinner Page 2
4. Klik next untuk pembuatan activity 5. Klik Next 6. Tanpa mengubah apapun klik button Finish, perhatikan project explorer Anda Modul 6 Spinner Page 3
7. Aktifkanlah activity_main.xml, /res/layout/activity_main.xml, seperti berikut : 8. Pada bagian bawah, klik tab activity_main.xml, hapuslah seluruh source code, kemudian ganti dengan source code berikut : Modul 6 Spinner Page 4
9. Simpanlah program Anda dengan cara tekan Ctrl + S, selanjutnya jalankanlah project Anda dengan cara klik kanan pada project Spinner1 Run As, pilih Android Application, proses ini berfungsi untuk melakukan update komponen pada /res untuk di daftar pada R.java. 10. Aktifkan source code MainActivity.java, pada /src/com.tnt.spinner1/mainactivity.java, hapuslah seluruh file kemudian isikan dengan source code berikut : Modul 6 Spinner Page 5
Dalam penamaan package dapat saja berbeda antara program yang dimaksudkan diatas dengan milik mahasiswa, dalam hal ini lakukanlah penyesuaian. 11. Jalankanlah program spinner 1 diatas dengan cara, klik kanan pada project spinner1 run as android application, akan terlihat hasil sebagai berikut : 12. Klik-lah satu diantara list diatas, nama kota yang di klik akan berada pada posisi atas, dengan demikian maka program tersebut sudah selesai. Berikut ini penjelasan program diatas. Penjelasan Minimum SDK yang akan digunakan dalam hal ini adalah Android versi 2.2. Jika sudah membuat project baru maka akan tercipta 4 file default yaitu class Activity utama di folder src, main.xml di folder rex/layout, file string.xml pada folder res/value dan file AndroidManifest.xml yang menyimpan seluruh informasi penting dari aplikasi yang dibuat mulai dari nama class hingga component yang digunakan seperti broadcast receiver dan lainlain. Modul 6 Spinner Page 6
Pada mainactivity biasanya sistem akan langsung akan menuliskan script dasar. Linear layout adalah salah satu bentuk layout pada android. Dengan menggunakan dasar layout ini maka dasar aplikasi akan bersifat statis/fixed sehingga tidak bisa digerakkan /scroll. Untuk menampilkan menu, maka yang digunakan adalah Spinner. Sebenarnya ada cara lain, namun untuk dasar ini, akan menggunakan Spinner. Karena penempatan layout pada XML sifatnya tersusun dari atas ke bawah, maka letakkan Spinner di atas layout. Selanjutnya memasukkan komponen Spinner. Spinner.java merupakan file java yang akan mengakses jalanya program. Secara default file ini akan berisi script yang sudah biasa dipakai. Script main pada setcontentview() maksudnya adalah bahwa class spinner.java akan menggunakan main.xml pada res/layout sebagai layout dasar untuk class tersebut. Selanjutnya inisialisasi object tersebut didalam public void oncreate(). Kemudian karena akan menggunakan tombol/komponen Spinner maka harus mengimplementasi class OnClickListener. Langkah selanjutnya perlu untuk mengimplementasi Spinner yang dibuat agar Spinner tersebut menerima aksi ketika ditekan. Setelah diimplementasikan. Berikutnya akan membuat sebuah method untuk menangani aksi ketika Spinner di klik. Jika diperhatikan, bahwa saat implementasi pada langkah sebelumnya, baris tersebut tertulis mengalami error. Itu dikarenakan belum adanya method ini. Menu yang akan ditampilkan pada program terletak pada String[] items={"pekanbaru","bangkinang","tembilahan","dumai","bagan Siapi-api"}; Maka program secara otomatis akan menampilkan data yang terdapat di dalam items Praktikum 6.2. Nama Hari dengan Spinner Dalam praktikum ini, akan dibuat program yang akan menampilkan hari dalam spinner, kemudian user dapat memilih dengan mengklik spinner, selanjutnya jika di klik button pilih maka nilai terpilih pada spinner akan di pindahkan ke edit Text, tampilan akhir adalah : 1. Aktifkanlah project baru, File New Project Android Application Project Modul 6 Spinner Page 7
2. Klik button Next, sehingga terlihat tampilan seperti berikut : 3. Klik button Next, selanjutnya layar dialog untuk merubah icon Modul 6 Spinner Page 8
4. Klik next untuk pembuatan activity 5. Klik Next 6. Tanpa mengubah apapun klik button Finish, perhatikan project explorer Anda Modul 6 Spinner Page 9
Perhatikanlah bahwa R.java adalah sebuah class yang dihasilkan secara otomatis, yang berisikan text dan elemen user interface. Untuk melihat isi dari R.java, klik ganda file tersebut, dan isinya akan ditampilkan pada editor. Jangan melakukan modifikasi apapun terhadap file R.java, paling tidak untuk saat ini. 7. Sekarang akan ditambahkan beberapa komponen. Untuk menambahkan komponen user interface, pada panel package, klik ganda layout/activity_main.xml seperti pada gambar berikut : 8. Pada pallete, klik tab Form Widgets, sehingga terlihat seperti berikut : 9. Perhatikan pada tab Form Widgets, satu diantara komponen adalah spinner, klik jangan lepas geser pada layar disain, dan lepas, muat juga Button pada desain. Pada tab TexFields, tambahkan palin text (ada tulisan abc) Modul 6 Spinner Page 10
10. Setelah semua komponen di masukkan ke dalam desain, maka akan terlihat seperti berikut : 11. Daftarkanlah komponen yang baru dibuat pada desain ke R.java, dengan cara jalankanlah aplikasi Anda. Klik kanan pada Spinner2 Run As Android Application. Perhatikan kembali source code pada R.java, khususnya pada class id /* AUTO-GENERATED FILE. DO NOT MODIFY. * * This class was automatically generated by the * aapt tool from the resource data it found. It * should not be modified by hand. */ package com.tnt.spinner2; public final class R { public static final class attr { } public static final class drawable { public static final int ic_action_search=0x7f020000; public static final int ic_launcher=0x7f020001; } public static final class id { public static final int button1=0x7f070001; public static final int edittext1=0x7f070002; public static final int menu_settings=0x7f070003; public static final int spinner1=0x7f070000; } public static final class layout { Modul 6 Spinner Page 11
public static final int activity_main=0x7f030000; } public static final class menu { public static final int activity_main=0x7f060000; } public static final class string { public static final int app_name=0x7f040000; public static final int hello_world=0x7f040001; public static final int menu_settings=0x7f040002; public static final int title_activity_main=0x7f040003; } public static final class style { public static final int AppTheme=0x7f050000; } } 12. Untuk membuat dan menggunakan atribut, aktifkan strings.xml, /spinner/res/value/string.xml, klik ganda sehingga terlihat tapilan berikut : 13. Muatlah komponen Spinner dan Button dari tab Form Widgets, plain text TextFields ke dalam desain, sehingga terlihat seperti berikut : 14. Simpanlah pekerjaan Anda, dengan cara tekan Ctrl+S, selanjutnya lakukan update pada R.java, dengan cara menjalankan aplikasi, periksalah /gen/r.java, apakah sudah terdaftar komponen miliki Anda pada /layout/activity_main.xml Modul 6 Spinner Page 12
15. Untuk membuat dan menggunakan atribut, pada panel Package pilihlah /sipnner2/values/string.xml, klik ganda sehingga terlihat tampilan berikut : 16. Klik button Add, sehingga terlihat seperti tampilan berikut : 17. Pada jendela Resource elemen, pilih Color, kemudian klik button OK, sehingga Ada siap mendefenisikan atribut. Pada bagian kanan akan muncul Atribut for color, isikan dengan field Name = white dan field Value = #FFFFFF, seperti terlihat pada gambar dibawah ini : Modul 6 Spinner Page 13
18. Pada Resource Elements klik tulisan Color, sehingga menjadi tampilan berikut ini : 19. Untuk melakukan update pada R.java, jalankanlah proyek Anda kembali. 20. Tiba saatnya untuk menggunakan property white pada background emulator. Pada panel package, klik /layout/activity_main.xml da nakan ditampilkan jendela widget. Klik area yang berwarna putih, pada property carilah properties Background, klik tanda (..) sehingga terlihat tampilan : 21. Klik Color white, warna yang tampak pada sisis sebelah kanan adalah warna yang dipesan, jika Anda tidak suka dengan warna putih lakukanlah perubahan pada /res/values/string.xml, ubahlah #FFFFFF dengan warna lain. Klik button Ok untuk menggunakan warna tersebut pada background emulator. 22. Selanjutnya lakukanlah perubahan kode program pada /src/com.tnt.spinner2/mainactivity.java, lakukan perubahan sehingga terlihat seperti berikut : Modul 6 Spinner Page 14
23. Hubungkanlah antara button yang ada pada /res/layout/activity_main.xml dengan /src/com.tnt.spinner2/mainactivity.java, dengan cara aktivkanlah /res/layout/activity_main.xml, kemudian klik Button, perhatikan pada Properties pilih On Click isikanlah dengan clicker 24. Jalankanlah aplikasi spinner2 yang telah Anda buat, dengan cara klik kanan pada project Spinner2 Run As Android Application. Lihatlah hasilnya : Modul 6 Spinner Page 15
25. Lakukanlah pengujian untuk memperoleh hasil yang optimal dari praktikum ini. Modul 6 Spinner Page 16