Aplikasi Android Untuk Kimia (3): Reaksi Redoks
Proyek aplikasi android yang saya sajikan ini agak panjang sedikit, karena menggunakan beberapa halaman dan memasukkan beberapa komponen widget, yaitu button gambar, gambar, suara (mp3), video dan halaman html. Navigasi yang dimasukkan adalah langkah maju, langkah mundur, navigasi stop dan play video dan keluar media, disamping itu didalamnya ada perintah untuk memainkan mp3 dan stop mp3. Untuk memudahkan latihan, silahkan download dulu file Reaksi Redoks dari link download berikut download. Ekstrak dan bukalah menggunakan menu File –> Open.
Langkah penyusunan proyek aplikasi Reaksi Redoks: 1. Sebelum melangkah membuat proyek baru sebaiknya semua komponen disiapkan dulu, misalnya file gambar, file mp3, file html dan file video. 2. Gunakan file manager untuk mengelola semua komponen itu. Sebagai contoh buatlah folder baru bernama drawable dan raw di dalam folder res, lalu masukkan semua komponen gambar ke dalam folder drawable, sedangkan file video (3gp), html dan mp3 dimasukkan ke dalam folder raw. Langkah ini bisa saja dilakukan setelah file proyek Reaksi Redoks dibuat.
3. Rancang layout proyek aplikasi Reaksi Redoks, sebagai contoh dalam file di
atas adalah sebagai berikut 1) Tampilan pertama adalah Splash, diset 10000 mdetik = 10 detik 2) Tampil halaman Cover Paket, ada navigasi masuk ke Halaman 1 3) Dalam tampilan Halaman 1 ada navigasi ke kiri untuk kembali ke Cover Paket atau ke kanan untuk maju ke Halaman 2
4) Dalam tampilan Halaman 2 ada navigasi ke kiri untuk kembali ke Halaman 1 atau ke kanan untuk maju ke Halaman 3 dan seterusnya di mana pada setiap halaman berisi komponen widget yang mungkin berbeda, ada yang yang mengandung teks saja, ada yang berisi html, gambar, mp3 atau video.
5) Dalam tampilan halaman terakhir ada navigasi ke kiri untuk kembali ke halaman sebelumnya
atau ke kanan untuk kembali ke Halaman 1 atau keluar.
4. Mulailah membuat file proyek Reaksi Redoks dengan klik menu File –> New Project dari layar IDE.
5. Isi kotak dialog seperti gambar di atas, yaitu Application name: Reaksi Redoks Company domain: kasmui.com (silahkan isi bebas nama domain walau fiktif) Package name: paket.program (untuk mengisi ini klik Edit dan isi dengan nama paket.program, lalu klik Done yang ada di sebelah kanan jika sudah selesai. Project location: (bebas ditempatkan di folder mana saja), lalu beri nama proyeknya yaitu ReaksiRedoks, lalu klik button Next sehingga muncul tampilan berikut
6. Memilih jenis alatnya, misalnya Phone and Tablet dengan Minimum SDK: API 10: Android 2.3.3 (Gingerbread), lalu klik Next sehingga muncul tampilan berikut
7. Dari tampilan di atas pilihlah sementara tema Blank Activity, lalu klik Next sehingga muncul tampilan berikut
8. Isilah Blank Activity di atas dengan isian berikut: Activity Name: CoverPaket Layout Name: cover_paket
Title: CoverPaket Menu Resource Name: cover_paket Klik button Finish sehingga muncul tampilan layar IDE seperti berikut
9. Halaman CoverPaket (Class Java) yang berada pada paket.program berkaitan dengan layout cover_paket.xml. Isi file cover_paket.xml
adalah sebagai
berikut [crayon-587fae34dbd4f474441273/] Tampilan visualnya adalah
Penjelasan: Halaman
CoverPaket
ini
menggunakan
gambar
background
menggunakan properties dalam
yang
dipanggil
[crayon-587fae34dbd5e603538252/] Maksudnya adalah file gambar background disimpan dalam foder drawable dengan nama file background.png. Isi
CoverPaket
adalah
komponen
Teks
“Reduksi
dan
Oksidasi”,
gambar
menggunakan komponen dan button bergambar dengan properties [crayon-587fae34dbd61340629535/] drawableRight digunakan untuk menempatkan gambar dalam button sebelah kanan teks, gambarnya disimpan dalam folder drawable dengan nama file kanan.png. Tentunya apabila akan menempatkan gambar dalam button sebelah kiri teks maka menggunakan properties drawableLeft dan gambarnya harus disimpan di folder tertentu seperti drawableRight. Button diletakkan dalam supaya mudah pengaturan posisi kiri dan kanannya bila ada 2 button atau lebih.
10. File cover_paket.xml hanya berisi komponen-komponen saja dan tidak akan bisa berfungsi jika tidak digerakkan oleh file CoverPaket.java. Isi file CoverPaket.java adalah sebagai berikut [crayon-587fae34dbd64877904731/] Penjelasan: 1) Import digunakan untuk mengimport semua komponen dalam layout sehingga dikenali dalam file java ini [crayon-587fae34dbd67359622368/] 2) Kemudian semua komponen dalam layout dideklarasikan di file java ini [crayon-587fae34dbd6a751176767/] 3)
Untuk menjalankan musik mp3 digunakan perintah berikut:
[crayon-587fae34dbd6c654871036/] File mp3-nya sudah disimpan dalam foder raw dengan nama file doa.mp3, jadi hanya dipanggil nama file-nya saja. 4) Setiap akan pindah halaman maka musik dimatikan lalu berganti halaman, seperti perintah berikut
[crayon-587fae34dbd6e077107095/]
11. Setelah menyelesaikan file CoverPaket.java dan cover_paket.xml maka sekarang mulai membuat halaman-halaman baru lagi, juga membuat file xml untuk layout pasangannya.
Cara membuat class java baru: 1) Pada payar IDE, klik mouse-kiri di folder java, lalu klik menu File –> New… atau cara singkatnya dengan klik mouse-kanan pada folder java sehingga muncul pilihan berikut
2) Pilihlah Java Class, lalu muncul tampilan berikut
3) Sebagai contoh, isi Nama: Halaman_1 dan Kind: Class, yaitu halaman baru yang akan dibuat. Halaman-halaman lain dibuat dengan cara yang sama seperti tadi.
Cara membuat file layout baru:
1) Klik mouse-kiri di folder layout, lalu klik menu File –> New…
atau
cara singkatnya klik mouse-kanan pada folder layout sehingga muncul tampilan berikut
2) Pilih Layout resource file sehingga muncul tampilan berikut
3)
Sebagai
contoh,
isi
File
name:
halaman_1,
Root
element:
RelativeLayout, Directory name: layout, lalu tekan button OK sehingga muncul di layout file halaman_1.xml. Semua file xml di layout dibuat dengan cara yang sama seperti di atas. Lakukan untuk halaman- halaman lainnya. 12. Isi file halaman_1.xml adalah sebagai berikut [crayon-587fae34dbd73480044629/] dengan tampilan visualnya adalah
Penjelasan: Halaman 1 menggunakan file gambar background (background.png) yang diletakkan di folder raw dengan properties berikut ini [crayon-587fae34dbd76701869589/] Halaman 1 juga berisi file html menggunakan komponen widget WebView yang berID webView1. Harga layout_height diatur sesuai proporsi halaman dan tidak menutup komponen yang lain. [crayon-587fae34dbd7c739605208/]
Halaman 1 memiliki navigasi ke kiri dengan button drawableLeft dan ke kanan dengan button drawableRight. Transparansi halaman WebView diatur dengan harga android:alpha dari harga 0 (100% transparan) sampai dengan harga 1 (100% tidak transparan)
13. Isi Halaman_1.java adalah berikut ini [crayon-587fae34dbd7e141883053/] Penjelasan: 1) Untuk menjalankan musik yang berada dalam folder raw dengan nama file karo.mp3 digunakan perintah berikut:
[crayon-587fae34dbd82956514507/] player.setLooping(true) digunakan untuk mengulang ‘playing’
karo.mp3, dan
player.start() untuk memulai. 2) Untuk menampilkan file html (redoks.html) yang disimpan dalam folder raw digunakan perintah berikut [crayon-587fae34dbd85822031550/] 3) Untuk navigasi ke kiri digunakan perintah berikut [crayon-587fae34dbd87132626151/] 4) Sebelum pindah ke halaman lain (dari Halaman 1 ke CoverPaket), jika musik masih ‘playing’ maka perlu distop dulu menggunakan perintah [crayon-587fae34dbd8a992947728/] 5) Navigasi ke kanan menggunakan perintah berikut [crayon-587fae34dbd8c483711985/] 6) Sama dengan navigasi ke kiri, sebelum pindah ke halaman lain (dari Halaman 1 ke Halaman 2) maka musik distop dulu dengan player.stop(), baru pindah ke Halaman 2 dengan perintah [crayon-587fae34dbd8e378090281/]
14. Halaman selanjutnya adalah halaman 2, hanya berisi komponen widget ImageView dan button dengan gambar seperti isi file halaman_2.xml di bawah ini [crayon-587fae34dbd91514045009/]
Left_button menggunakan drawableLeft dengan gambar kiri.png yang tersimpan di folder
drawable,
next_button
menggunakan
drawableRight
dengan
gambar
kanan.png yang tersimpan di folder drawable. Gambar dimasukkan ke layout dengan widget , file gambar yaitu fotosintesis.png tersimpan dalam folder drawable dengan tampilan visual seperti berikut ini
15. Untuk menggerakan halaman 2 dilakukan di file java Halaman_2.java yang berisi [crayon-587fae34dbd94868471979/]
Penjelasan: Hampir sama dengan halaman 1, untuk menjalankan musik insya.mp3 yang ada di folder raw digunakan player, navigasi button kiri (left_button) untuk ke halaman 1 menggunakan drawableLeft dan button ke kanan (next_button) untuk ke halaman 3 menggunakan drawableRight seperti yang terlihat di layout.
16. Halaman 3, 4 dan 5 hampir sama, karena hanya berisi komponen widget ImageView, jadi penjelasannya sama dengan halaman 1 dan 2, kecuali halaman 5 ada tambahan penggunaan yang digunakan untuk wadah ImageView dan TextView. Silahkan pelajari sendiri format penulisan TableLayout-nya.
17. Halaman 6 memasukkan komponen widget VideoView, button stop dan play video, disamping button untuk navigasi ke kiri dan ke kanan seperti terlihat dalam file halaman_6.xml berikut ini. [crayon-587fae34dbd99162572193/]
18. Untuk menjalankan file xml itu dilakukan pada file Halaman_6.java yang berisi seperti berikut ini [crayon-587fae34dbd9c812823748/]
Penjelasan: 1) Untuk menjalankan video reaksidredoks.3gp yang disimpan di folder raw digunakan perintah sebagai berikut: [crayon-587fae34dbda0865789416/]
2) Perintah memulai ‘playing’ menggunakan vid.start(); seperti berikut: [crayon-587fae34dbda4403521614/]
Sedangkan perintah stop menggunakan vid.stopPlayback(); seperti berikut: [crayon-587fae34dbda6400552730/] 3) Navigasi ke kiri dan ke kanan untuk pindah halaman sama saja dengan halaman sebelumnya, tetapi untuk mengantisipasi video yang masih ‘playing’ maka sebelum pindah halaman dilakukan perintah vid.stopPlayback();.
19. Layout halaman selanjutnya yaitu halaman 7 (halaman_7.xml) hanya berisi widget WebView sehingga penjelasannya sama dengan dengan halaman sebelumnya, begitu pula file java halaman 7 (Halaman_7.java) sama dengan halaman sebelumnya.
20. Halaman terakhir dalam proyek android ini adalah halaman 8, sebenarnya sama dengan halaman 7 hanya berisi widget WebView, sehingga penjelasan file halaman_8.xml sama saja, tetapi karena ini halaman terakhir maka ada perbedaan pada button navigasi ke kanan, yaitu keluar atau kembali ke halaman 1. Jika navigasi ke kanan digunakan untuk kembali ke halaman satu maka digunakan button navigasi next_button seperti penggunaan pada halaman lain, hanya saja sekarang kembali ke halaman 1. Jika navigasi ke kanan digunakan untuk keluar maka digunakan perintah startActivity(exit); seperti berikut:
[crayon-587fae34dbda9242812820/]
21. Pengaturan halaman splash Halaman splash adalah halaman yang tampil sekilas, beberapa detik, sebelum muncul halaman utamanya. Pengaturannya terlihat pada file splash.xml dan splash.java seperti di bawah ini. [crayon-587fae34dbdab301763874/]
Layout splash.xml hanya berisi tampilan ‘sponsorship’, berisi gambar background kimia_0.jpg yang tersimpan pada folder drawable. Tentu saja isinya bebas, baik menggunakan teks, html maupun gambar. Isi file splash.java adalah sebagai berikut: [crayon-587fae34dbdad164923553/]
Penjelasan Tampilan pada halaman layout ditahan selama 10000 milidetik (10 detik) menggunakan perintah sleep(10000); Setelah 10 detik maka secara otomatis akan berpindah ke halaman CoverPaket, seperti di atas atau halaman lain yang diletakkan pada Intent().
22. Semua halaman yang sudah dibuat tidak akan bisa dijalankan apabila file AndroidManifest.xml tidak diatur. Isinya sebagai berikut [crayon-587fae34dbdb1356620235/]
Penjelasan: Agar splash muncul diawal maka diletakkan sebagai Launcher pada activity sebagai berikut [crayon-587fae34dbdb5040188631/]
Setelah itu semua halaman didaftarkan dalam file manifest itu.
23. Selesai!
