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.

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

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

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".VolumeGas">

<TextView
android:text="@string/hello_world"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</RelativeLayout>

 

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

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:

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:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".HitungVolume" >

<TextView
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" />

<TextView
android:id="@+id/txtMol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="50dp"
android:textColor="#ff000000"
android:text="@string/txtMol"
android:textSize="14dp" />

<EditText
android:id="@+id/edtMol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtMol"
android:layout_below="@+id/txtMol"
android:ems="10"
android:inputType="numberDecimal" >

<requestFocus />
</EditText>

<TextView
android:id="@+id/txtRgas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/edtMol"
android:layout_below="@+id/edtMol"
android:layout_marginTop="15dp"
android:textColor="#ff000000"
android:text="@string/txtRgas"
android:textSize="14dp" />

<EditText
android:id="@+id/edtRgas"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtRgas"
android:layout_below="@+id/txtRgas"
android:ems="10"
android:inputType="numberDecimal" />

<TextView
android:id="@+id/txtTemperatur"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/edtRgas"
android:layout_below="@+id/edtRgas"
android:layout_marginTop="15dp"
android:textColor="#ff000000"
android:text="@string/txtTemperatur"
android:textSize="14dp" />

<EditText
android:id="@+id/edtTemperatur"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtTemperatur"
android:layout_below="@+id/txtTemperatur"
android:ems="10"
android:inputType="numberDecimal" />

<TextView
android:id="@+id/txtTekanan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/edtTemperatur"
android:layout_below="@+id/edtTemperatur"
android:layout_marginTop="15dp"
android:textColor="#ff000000"
android:text="@string/txtTekanan"
android:textSize="14dp" />

<EditText
android:id="@+id/edtTekanan"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/txtTekanan"
android:layout_below="@+id/txtTekanan"
android:ems="10"
android:inputType="numberDecimal" />

<Button
android:id="@+id/btnHitung"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/edtTekanan"
android:layout_below="@+id/edtTekanan"
android:layout_marginTop="20dp"
android:text="@string/btnHitung"
android:textColor="#f00f00" />

<TextView
android:id="@+id/txtVolume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/btnHitung"
android:layout_below="@+id/btnHitung"
android:layout_marginTop="20dp"
android:textColor="#f00f00"
android:text="@string/txtVolume"
android:textSize="14dp" />
</RelativeLayout>

 

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:

9. Mengisi file strings.xml untuk memberi value dari komponen yang ber-id. Selengkapnya isi file strings.xml adalah

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">Volume Gas</string>
<string name="action_settings">Settings</string>
<string name="txtMol">Mol</string>
<string name="txtRgas">R gas</string>
<string name="txtTemperatur">Temperatur</string>
<string name="txtTekanan">Tekanan</string>
<string name="btnHitung">Hitung</string>
<string name="txtVolume">Volume</string>
<string name="txtJudul">Menghitung Volume Gas</string>

</resources>

 

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

package com.kasmui.volumegas;

// Berisi import semua komponen yang ada di layout, defaultnya hanya 4 komponen
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
public class VolumeGas extends ActionBarActivity {

// Di bagian ini berisi deklarasi komponen yang ada di layout

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_volume_gas);

// Di bagian ini berisi deklarasi variabel untuk menghubungkan semua komponen

// di layout dengan variabel di java, termasuk rumus matematika

// dalam operasi matematika.

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_volume_gas, menu);
return true;

}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

}

 

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:

package com.volumegas;

// Mengimport semua komponen yang ada di layout

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class HitungVolume extends Activity {

// Deklarasi komponen yang ada di layout

EditText Mol,Rgas,Temperatur,Tekanan;
Button btnHitung;
TextView txtVolume;

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
setContentView(R.layout.activity_hitung_volume);

//Membaca komponen input yang ada di layout

Mol = (EditText) findViewById(R.id.edtMol);
Rgas = (EditText) findViewById(R.id.edtRgas);
Temperatur = (EditText) findViewById(R.id.edtTemperatur);
Tekanan = (EditText) findViewById(R.id.edtTekanan);

//Membaca komponen button dari layout
btnHitung = (Button) findViewById(R.id.btnHitung);

//Membaca komponen output dari layout

txtVolume = (TextView) findViewById(R.id.txtVolume);

//Meng-handle ketika button di klik

btnHitung.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

//Deklarasi variable n,R,T,p sebagai bilangan real Double

Double n,R,T,p,volume;

//Mengubah string menjadi bilangan real Double

n= Double.parseDouble(Mol.getText().toString());
R= Double.parseDouble(Rgas.getText().toString());
T= Double.parseDouble(Temperatur.getText().toString());
p= Double.parseDouble(Tekanan.getText().toString());

//Rumus menghitung volume gas

volume=(n*R*T)/p;

txtVolume.setText("Volume gas: "+volume);

}
});

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.hitung_volume, menu);
return true;

}

}

 

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!