Pada tutorial kali ini kita akan membuat aplikasi kalkulator sederhana menggunakan Android Studio dan Bahasa Pemrograman Java. Aplikasi yang kita bangun ini dapat melakukan operasi penjumlahan, pengurangan, perkalian, pembagian, dan juga pembersihan nilai. Langkah pertama yang harus kita lakukan adalah membuat sebuah project android baru, dengan cara buka Android Studio, klik File –> New –> New Project. Setelah itu kan muncul halaman New Project, pilih Empty Activity seperti yang ditunjukan oleh Gambar 1.
Kemudian masuk ke halaman pengaturan Empty Activity, isikan nama project dengan nama “Aplikasi Kalkulator“. Nama package akan muncul secara otomatis, untuk bahasa / language kita pilih “Java“. Lalu untuk Minimum SDK kita pilih API 21: Android 5.0 (Lollipop) yang sudah kompatibel terhadap 98% perangkat android. Setelah itu klik tombol “Finish“.
Setelah itu akan muncul 2 file yaitu MainActivity.java dan activity_main.xml. Pertama-tama kita buka file activity_main.xml untuk mendesain tampilan antarmuka dari aplikasi kalkulator. Berikut adalah kode lengkap yang kita masukan ke dalam file activity_main.xml.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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:padding="16dp" android:orientation="vertical" tools:context=".MainActivity"> <TextView android:id="@+id/txtJudul" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/tvJudul" android:textAlignment="center" android:textStyle="normal|bold" android:textColor="@color/black" android:textSize="24sp" /> <EditText android:id="@+id/angka_pertama" android:layout_width="match_parent" android:layout_height="wrap_content" android:inputType="number" android:ems="10" android:hint="@string/masukan_angka_pertama" android:textSize="14sp" android:layout_marginTop="22dp" android:importantForAutofill="no" /> <EditText android:id="@+id/angka_kedua" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:ems="10" android:hint="@string/masukan_angka_kedua" android:importantForAutofill="no" android:inputType="number" android:textSize="14sp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="16dp"> <Button android:id="@+id/btnTambah" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/plus" /> <Button android:id="@+id/btnKurang" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/min" android:layout_marginStart="8dp" /> <Button android:id="@+id/btnBagi" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/bagi" android:layout_marginStart="8dp"/> <Button android:id="@+id/btnKali" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/kali" android:layout_marginStart="8dp" /> </LinearLayout> <Button android:id="@+id/btnClear" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/bersihkan" /> <TextView android:id="@+id/tvHasil" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/hasil" android:textSize="24sp" android:textAlignment="center" android:textColor="@color/black" android:textStyle="normal|bold" android:layout_marginTop="35dp"/> <TextView android:id="@+id/tvNilai" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="@string/nilai" android:textSize="36sp" android:textAlignment="center" android:textColor="@color/black" android:textStyle="normal|bold" android:layout_marginTop="8dp"/> </LinearLayout>
Apabila muncul error pada bagian atribut android:text, itu merupakan hal yang wajar. Sebab kita belum menambahkan String Name pada file String.xml. Oleh karena itu, silahkan buka file String.xml dan tambahkan beberapa baris kode berikut.
<resources> <string name="app_name">Aplikasi Kalkulator</string> <string name="tvJudul">Aplikasi Kalkulator Sederhana</string> <string name="masukan_angka_pertama">masukan angka pertama</string> <string name="masukan_angka_kedua">masukan angka kedua</string> <string name="plus">+</string> <string name="min">-</string> <string name="kali">X</string> <string name="bagi">/</string> <string name="bersihkan">Bersihkan</string> <string name="hasil">Hasil</string> <string name="nilai">0</string> </resources>
Sehingga tampilan antarmuka dari aplikasi kalkulator yang kita bangun menjadi seperti pada Gambar 3.
Setelah berhasil mendesain tampilan antarmuka aplikasi, selanjutnya kita tambahkan fungsionalitas pada masing-masing tombol, agar aplikasi kita dapat berfungsi sebagaimana mestinya. Oleh karena itu, kita masuk ke file MainActivity.java. Kemudian kita tambahkan kode bahasa java untuk dapat menjalankan setiap fungsi dari aplikasi kalkulator.
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); EditText angka_pertama = findViewById(R.id.angka_pertama); EditText angka_kedua = findViewById(R.id.angka_kedua); Button tambah = findViewById(R.id.btnTambah); Button kurang = findViewById(R.id.btnKurang); Button kali = findViewById(R.id.btnKali); Button bagi = findViewById(R.id.btnBagi); Button bersihkan = findViewById(R.id.btnClear); TextView hasil = findViewById(R.id.tvNilai); tambah.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if((angka_pertama.getText().length() > 0) && (angka_kedua.getText().length()>0)){ double angka1 = Double.parseDouble(angka_pertama.getText().toString()); double angka2 = Double.parseDouble(angka_kedua.getText().toString()); double result = angka1 + angka2; hasil.setText(Double.toString(result)); } else { Toast toast = Toast.makeText(MainActivity.this, "Mohon masukan angka pertama & kedua", Toast.LENGTH_LONG); toast.show(); } } }); kurang.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if((angka_pertama.getText().length() > 0) && (angka_kedua.getText().length()>0)){ double angka1 = Double.parseDouble(angka_pertama.getText().toString()); double angka2 = Double.parseDouble(angka_kedua.getText().toString()); double result = angka1 - angka2; hasil.setText(Double.toString(result)); } else { Toast toast = Toast.makeText(MainActivity.this, "Mohon masukan angka pertama & kedua", Toast.LENGTH_LONG); toast.show(); } } }); } }
Keterangan Kode :
- Baris 1 : Menjelaskan class MainActivity yang mewarisi fungsionalitas dari class AppCompatActivity
- Baris 6 : Menunjukan layout yang kita pakai adalah activity_main.xml
- Baris 8 s/d 15 : Pembuatan object dari EditText, Button, dan TextView. Masing-masing merujuk pada id yang terdapat pada activity_main.xml
- Baris 17 s/d 30 : Pembuatan fungsionalitas dari button tambah. Angka yang kita masukan ke EditText akan diubah ke format double. Kita tidak dapat mengosongkan EditText, apabila terbukti kosong maka akan muncul notifikasi berupa Toast (Pesan Singkat).
- Baris 32 s/d 45 : Pembuatan fungsionalitas dari button kurang. Angka yang kita masukan ke EditText akan diubah ke format double. Kita tidak dapat mengosongkan EditText, apabila terbukti kosong maka akan muncul notifikasi berupa Toast (Pesan Singkat).
Pada kode diatas kita baru menambahkan fungsionalitas pada tombol tambah dan kurang. Adapun tombol bagi dan kali dapat anda buat sendiri. Caranya hanya tinggal samakan kode programnya, namun dibagian result harus diganti rumusnya. Sedangkan tombol bersikan dapat anda berikan fungsionalitas dengan menambahkan potongan kode program berikut.
bersihkan.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { angka_pertama.getText().clear(); angka_kedua.getText().clear(); } });
Jika tidak terdapat Error, maka tampilan dari Aplikasi Kalkulator adalah sebagai berikut.