Aplikasi Android Untuk Kimia (1): Volume Gas The first step is simple step, ini adalah semboyan bagi para programmer. Semua sebenarnya sederhana, ada alur logikanya, karena itu programmer harus menyusun algoritma dengan benar supaya semua jadi masuk akal. Semua dimulai dari yang sederhana, lalu berjenjang semakin kompleks. Okay! Kita mulai membuat program. Tulisan ini merupakan kelanjutan dari tulisan sebelumnya yaitu Membuat Proyek Aplikasi Android Studio untuk membuat file persiapannya. Silahkan akses ke link http://kasmui.com/v1/?p=297 ini. Dalam program yang akan disusun ini kita akan menghitung volume gas idel dari rumus berikut
Input data: mol, R gas, temperatur dan tekanan gas Output: volume gas Untuk penyederhaan dalam hitungan ini variabel menggunakan satuan liter untuk volume, atm untuk tekanan, mol, dan K untuk temperatur. Untuk memudahkan latihan, silahkan download dulu file android Volume Gas ini dari link download ini. Silahkan file itu diekstrak, lalu bukalah dari layar IDE Android Studio, yaitu dengan klik File –> Open dan cari di folder penyimpanan file tadi.
Langkah-langkah yang dapat dilakukan: 1. Siapkan gambaran layout. Posisi masing-masing komponen bebas diatur. Dalam hal ini layout default layar adalah Relative layout. Lihat contoh di bawah ini.
2. Siapkan Komponen layout, sebagai contoh untuk Volume Gas sesuai urutan seperti gambar layout di atas. Ini hanya sekedar contoh, jadi pilihan komponen bebas sesuai keinginan Anda. No. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
3.
Komponen TextView TextView EditText TextView EditText TextView EditText TextView EditText Button TextView
id Value Keterangan txtJudul Menghitung Volume Gas Judul txtMol Mol string Mol edtMol (variabel) txtRgas R gas string R gas edtGas (variabel) txtTemperatur Temperatur string Temperatur edtTemperatur (variabel) txtTekanan Tekanan string Tekanan edtTekanan (variabel) btnHitung Hitung string Hitung txtVolume Volume string Volume
Buka kembali proyek aplikasi Android Studio yang sudah dibuat melalui
tulisan sebelumnya di link http://kasmui.com/v1/?p=297 ini. Secara default ketika membuat proyek baru maka langsung muncul 2 file di layar IDE Android Studio, yaitu 1 file java dan 1 file xml. Dalam hal proyek android Volume Gas maka yang muncul adalah file VolumeGas.java dan file activity_volume_gas.xml. Pada proyek ini kita akan membuka 3 file yaitu: 1) Activity_volume_gas.xml di folder: app –> res –> layout 2) string.xml di folder app –> res –> values 3) VolumeGas.java di folder app –> java
Secara berurutan seperti di atas, kita akan mengerjakan proyek android Volume Gas itu. Seperti
4. Pekerjaan awal adalah membangun layout dalam file activity_volume_gas. xml
yang sudah dipersiapkan di atas.
Pada layar file activity_volume_gas. xml terlihat 2 tab yaitu Design dan Text. Tab Design menampilkan design/layout gambar atau editor visual (di Eclipse dikenal sebagai graphical layout), sedangkan tab Text berisi script layout file sebagai editor teks. Jika kita lihat isi default file itu pada tab Text adalah [crayon-588933aa98014930357119/]
Pada bagian
ini semua komponen layout akan diletakkan dan ditata. Penataan komponen dapat dilakukan dengan memanfaatkan tab Design dan tab Text, keduanya saling melengkapi kemudahan layout.
Programmer mempunyai
kesukaan sendiri-sendiri, ada yang lebih suka menggunakan tab Design sedangkan tab Text untuk pengecekan, ada juga yang lebih suka menggunakan tab Text sedangkan tab Design untuk pengecekan layout. Tapi tetap keduanya saling melengkapi.
5. Klik tab Design maka muncul layar layout gambar (editor visual) seperti di bawah ini
Tampak pada gambar ada beberapa bagian: 1) Bagian Project yang berisi app dan strukturnya 2) Bagian Pallete yang berisi komponen-komponen yang akan mengisi layout, seperti Layouts, Widgets, Text Fields, Containers, Date & Time, Expert dan Custom. 3) Gambar Phone untuk menunjang layout, otomatis akan muncul jika kita klik tab Design 4) Bagian Komponen Tree dan Properties, untuk memberi properties dari komponen yang dipasang. 6.
Pilih atau klik komponen pada Pallete lalu tempatkan pada gambar
handphone sesuai posisi seperti gambar layout yang sudah disiapkan atau istilahnya drag-and-drop. Daftar komponen yang perlu ditempelkan adalah sebagai berikut: No. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
Pallete Komponen Widgets: Plain TextView TextView Widgets: Plain TextView TextView Text Fields: Plain Text EditText Widgets: Plain TextView TextView Text Fields: Plain Text EditText Widgets: Plain TextView TextView Text Fields: Plain Text EditText Widgets: Plain TextView TextView Text Fields: Plain Text EditText Widgets: Button Button Widgets: Plain TextView TextView
id Value txtJudul Menghitung Volume Gas txtMol Mol edtMol (variabel) txtRgas R gas edtGas (variabel) txtTemperatur Temperatur edtTemperatur (variabel) txtTekanan Tekanan edtTekanan (variabel) btnHitung Hitung txtVolume Volume
7. Mestinya setiap penempatan komponen disertai dengan pengaturan propertiesnya, sehingga sekalian teratur semua, tapi bisa juga dilakukan belakangan untuk perapiannya. Cara pengaturan properties-nya dengan klik komponen tertentu pada Component Tree, misalnya txtJudul, lalu lakukan pengaturan pada bagian properties, misal text = Menghitung Volume Gas, textSize = 20dp , layout:alignParent [TOP] dicentang, dan seterusnya. Lebih lengkapnya nanti pada pengecekan di tab Text. 8. Pengecekan layout menggunakan tab Text (editor teks) penting dilakukan untuk memastikan ketepatannya. Sebagai contoh untuk proyek Volume Gas, isi file activity_volume_gas.xml setelah berisi komponen-komponen adalah sebagai berikut: [crayon-588933aa98028524273821/]
Setiap properties android di atas dapat dipanggil dengan cara ketik: android:, maka otomatis akan muncul properties-nya. Lalu pilih yang dikehendaki. Penjelasan properties di atas: : memberi id komponen tersebut android:id=”@+id/txtJudul” : pengaturan lebar android:layout_width=”wrap_content” : pengaturan tinggi android:layout_height=”wrap_content” : rata atas android:layout_alignParentTop=”true” : rata tengah horisontal android:layout_centerHorizontal=”true”: isi teks android:text=”Menghitung Volume Gas” : ukuran teks 20dp android:textSize=”20dp” : batas margin kiri 20dp android:layout_marginLeft=”20dp : batas margin android:layout_marginTop=”50dp” dg komponen di atasnya android:textColor=”#ff000000″ : warna teks android:text=”@string/txtMol” : isi string txtMol android:layout_alignLeft=”@+id/txtMol”: rata kiri dg komponen ber-id android:layout_below=”@+id/txtMol” txtMol android:ems=”10″ : di bawah komponen ber-id txtMol android:inputType=”numberDecimal” : ukuran teks 10 <requestFocus /> : tipe input angka desimal : kursor berada di komponen itu
9. Mengisi file strings.xml untuk memberi value dari komponen yang ber-id. Selengkapnya isi file strings.xml adalah [crayon-588933aa98032250245272/]
10. Setelah mengisi file activity_volume_gas.xml dan strings.xml maka tinggal mengisi file VolumeGas.java untuk menghubungkan semua komponen di layout dengan file java. Isi default file VolumeGas.java adalah [crayon-588933aa98037132966707/]
Perhatikan keterangan yang diberikan pada file VolumeGas.java di atas, di situlah kita akan menempatkan tambahan teks untuk melengkapi file java itu.
Selengkapnya isi file VolumeGas.java adalah sebagai berikut: [crayon-588933aa9803c238465230/]
Catatan: setiap perubahan pada file di atas harus disimpan dulu agar terlihat perubahannya.
11. Setelah semua perubahan disimpan maka sekarang tinggal menjalankan untuk menguji apakah sintaks bahasa pemrograman Android Studio yang disusun di atas sudah benar. Caranya dengan meng-klik menu Run –> Run Application. Jika tidak ada error maka akan muncul pilihan versi emulator Android untuk menjalankan proyek android yang sudah disusun. Tentang hal ini sudah dibahas pada tulisan sebelumnya. Silahkan mengakses ke sana. Begini hasilnya jika sukses ‘running…’.
Sukses!
