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

V=\frac{nRT}{p}

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.

layout-1

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.KomponenidValueKeterangan
1.TextViewtxtJudulMenghitung Volume GasJudul
2.TextViewtxtMolMolstring Mol
3.EditTextedtMol(variabel)
4.TextViewtxtRgasR gasstring R gas
5.EditTextedtGas(variabel)
6.TextViewtxtTemperaturTemperaturstring Temperatur
7.EditTextedtTemperatur(variabel)
8.TextViewtxtTekananTekananstring Tekanan
9.EditTextedtTekanan(variabel)
10.ButtonbtnHitungHitungstring Hitung
11.TextViewtxtVolumeVolumestring Volume

 

3.  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

app-volgas-1

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

 

Pada bagian <TextView …. /> 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

tab-design

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.PalleteKomponenidValue
1.Widgets: Plain TextViewTextViewtxtJudulMenghitung Volume Gas
2.Widgets: Plain TextViewTextViewtxtMolMol
3.Text Fields: Plain TextEditTextedtMol(variabel)
4.Widgets: Plain TextViewTextViewtxtRgasR gas
5.Text Fields: Plain TextEditTextedtGas(variabel)
6.Widgets: Plain TextViewTextViewtxtTemperaturTemperatur
7.Text Fields: Plain TextEditTextedtTemperatur(variabel)
8.Widgets: Plain TextViewTextViewtxtTekananTekanan
9.Text Fields: Plain TextEditTextedtTekanan(variabel)
10.Widgets: ButtonButtonbtnHitungHitung
11.Widgets: Plain TextViewTextViewtxtVolumeVolume

 

7. Mestinya setiap penempatan komponen disertai dengan pengaturan properties-nya, 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:

 

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:

android:id=”@+id/txtJudul”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentTop=”true”
android:layout_centerHorizontal=”true”
android:text=”Menghitung Volume Gas”
android:textSize=”20dp”
android:layout_marginLeft=”20dp
android:layout_marginTop=”50dp”
android:textColor=”#ff000000″
android:text=”@string/txtMol”
android:layout_alignLeft=”@+id/txtMol”
android:layout_below=”@+id/txtMol”
android:ems=”10″
android:inputType=”numberDecimal”
<requestFocus />
: memberi id komponen tersebut
: pengaturan lebar
: pengaturan tinggi
: rata atas
: rata tengah horisontal
: isi teks
: ukuran teks 20dp
: batas margin kiri 20dp
: batas margin dg komponen di atasnya
: warna teks
: isi string txtMol
: rata kiri dg komponen ber-id txtMol
: di bawah komponen ber-id txtMol
: ukuran teks 10
: 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

 

 

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

 

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:

 

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…’.

running-volgas

Sukses!

1 Comment

Filed under Android, Kimia, Pembelajaran

One Response to Aplikasi Android Untuk Kimia (1): Volume Gas

  1. Pingback: Membuat Proyek Aplikasi Android Studio - KASMUI.COM

Leave a Reply