Latihan : Membuat Aplikasi Kalkulator Sederhana

Setelah kita berhasil membuat Aplikasi Click Counter dan memahami cara membuat click listener pada widget Button. Selanjutnya kita akan membuat Aplikasi Kalkulator Sederhana. Pada aplikasi ini, kita tetap menggunakan method onClicklistener() , kemudian mengambil nilai dari kedua widget EditText dan terakhir nilai akan dikalkulasikan berdasarkan operator perhitungan yang dipilih oleh user. Berikut video demo aplikasi yang akan kita buat.

Buka Android Studio dan buat project baru seperti biasa. Pada window choose your project pilih Empty Activity dan selanjutnya di jendela Configure your project ikuti seperti berikut :

  • Name: "Kalkulator Sederhana"
  • Package name: "com.teknorial.kalkulatorsederhana"
  • Language: Java
  • Biarkan opsi lain sebagaimana adanya.

Kemudian klik Finish untuk membuat project.

create aplikasi kalkulator sederhana

Membuat UI Aplikasi Kalkulator Sederhana

Kita akan menambahkan beberapa widget ke dalam activity_main.xml seperti EditText untuk menampung nilai input dari user, Spinner untuk menampung list operator perhitungan dan Button untuk memulai melakukan perhitungan. Pertama kita akan menambahkan array-string di strings.xml untuk menampung operator perhitungan yang akan digunakan untuk dalam widget Spinner. Buka strings.xml pada direktori /res/values/strings.xml dan tambahkan array-string operator berikut.

<resources>
    <string name="app_name">Kalkulator Sederhana</string>

    <string-array name="operator">
        <item>Pilih Operator</item>
        <item>+</item>
        <item>-</item>
        <item>x</item>
        <item>/</item>
    </string-array>
</resources>

Sekarang kita akan memodifikasi UI dari MainActivity. Buka activity_main.xml dan modifikasi seperti kode di bawah.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/et_bilangan_pertama"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:hint="Masukkan Bilangan Pertama"
        android:inputType="numberDecimal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Spinner
        android:id="@+id/spn_operator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:entries="@array/operator"
        app:layout_constraintEnd_toEndOf="@+id/et_bilangan_pertama"
        app:layout_constraintStart_toStartOf="@+id/et_bilangan_pertama"
        app:layout_constraintTop_toBottomOf="@+id/et_bilangan_pertama" />


    <EditText
        android:id="@+id/et_bilangan_kedua"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:hint="Masukkan Bilangan Kedua"
        android:inputType="numberDecimal"
        app:layout_constraintEnd_toEndOf="@+id/et_bilangan_pertama"
        app:layout_constraintStart_toStartOf="@+id/et_bilangan_pertama"
        app:layout_constraintTop_toBottomOf="@+id/spn_operator" />

    <Button
        android:id="@+id/btn_hitung"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Hitung"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/et_bilangan_kedua" />

    <TextView
        android:id="@+id/tv_hasil"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="0"
        style="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_hitung" />


</androidx.constraintlayout.widget.ConstraintLayout>

Pada kode diatas kita telah menambahkan ConstraintLayout sebagai elemen root, dua EditText yang bertipe numberDecimal untuk membuat widget tersebut hanya menerima input angka desimal, satu Spinner yang menampilkan list operator perhitungan dari string-array @array/operator, satu Button yang nanti akan digunakan untuk memulai perhitungan dan terakhir TextView akan menampilkan hasil perhitungan. Klik Run App dan aplikasi akan berjalan seperti video di bawah.

Dalam video di atas kita dapat melihat aplikasi sudah dapat melakukan input nilai dari user dan memilih operator perhitungan, namun widget Button masih belum berfungsi untuk memulai melakukan perhitungan. Kita akan menambah onClickListener pada widget Button dan melakukan perhitungan berdasarkan input dari user. Buka MainActivity.java dan modifikasi seperti kode berikut.

package com.teknorial.kalkulatorsederhana;


import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    //deklarasi variabel
    private EditText mEditTextBilanganPertama;
    private EditText mEditTextBilanganKedua;
    private Spinner mSpinnerOperator;
    private Button mButtonHitung;
    private TextView mTextViewHasil;

    private Double mBilanganPertama;
    private Double mBilanganKedua;
    private String mOperator;
    private Double mHasilPerhitungan = 0.0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //inisialisasi variabel widget
        mEditTextBilanganPertama = findViewById(R.id.et_bilangan_pertama);
        mEditTextBilanganKedua = findViewById(R.id.et_bilangan_kedua);
        mSpinnerOperator = findViewById(R.id.spn_operator);
        mButtonHitung = findViewById(R.id.btn_hitung);
        mTextViewHasil = findViewById(R.id.tv_hasil);

        //onclick listener pada widget button
        mButtonHitung.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //mengambil nilai dari widget EditText dan mengubah menjadi tipe data double
                mBilanganPertama = Double.valueOf(mEditTextBilanganPertama.getText().toString());
                mBilanganKedua = Double.valueOf(mEditTextBilanganKedua.getText().toString());
                //mengambil nilai 'operator' yang dipilih dalam widget spinner
                mOperator = mSpinnerOperator.getSelectedItem().toString();

                //menggunakan switch case untuk mengecek setiap case berdasarkan operator(mOperator) yang dipilih
                switch (mOperator) {
                    case "+":
                        mHasilPerhitungan = mBilanganPertama + mBilanganKedua;
                        break;
                    case "-":
                        mHasilPerhitungan = mBilanganPertama - mBilanganKedua;
                        break;
                    case "x":
                        mHasilPerhitungan = mBilanganPertama * mBilanganKedua;
                        break;
                    case "/":
                        mHasilPerhitungan = mBilanganPertama / mBilanganKedua;
                        break;
                    default:
                        Toast.makeText(MainActivity.this, "Kamu belum memilih operator", Toast.LENGTH_SHORT).show();
                        break;
                }

                //Mengubah nilai dari double menjadi string (String.valueOf()) dan menampilkannya ke widget TextView
                mTextViewHasil.setText(String.valueOf(mHasilPerhitungan));
            }
        });
    }
}

Selanjutnya, klik run ‘app’ untuk melihat hasil dari aplikasi yang telah kita buat. Jika kode aplikasi kita tidak bermasalah, maka aplikasi akan berjalan seperti video berikut :

Pada video di atas kita dapat melihat aplikasi dapat berjalan dan dapat melakukan perhitungan, namun aplikasi akan error jika tidak input bilangan pada widget EditText. Error terjadi karena nilai dari EditText tersebut kosong saat akan diubah menjadi double. Untuk melihat informasi detail tentang error yang terjadi, dapat melihat dengan menekan menu logcat yang berada dibawah seperti pada nomor 1.

error empty string

Kita menemukan informasi error yang terjadi adalah java.lang.NumberFormatException: empty String seperti pada nomor 2. Untuk melihat lebih jelas dimana lokasi kode yang menyebabkan error, tekan tulisan warna biru seperti pada nomor 3 dan kita arahkan ke MainActivity pada baris 46.

line error location

Untuk mencegah terjadi error empty string. Kita akan membuat pengecekan terhadap nilai dari kedua widget sebelum dilakukan convert menjadi tipe data double. Tambahkan kode berikut di dalam mButtonHitung.setOnclickListener().

if (mEditTextBilanganPertama.getText().toString().equals("")) {
    mEditTextBilanganPertama.setError("Kamu Belum Memasukkan Bilangan pertama");
    return;
}

 if (mEditTextBilanganKedua.getText().toString().equals("")) {
    mEditTextBilanganKedua.setError("Kamu belum memasukkan bilangan kedua");
    return;
}

cek empty string

Dalam kode diatas kita dapat melihat bahwa, kita menggunakan kondisi if dan mengambil nilai dari mEditTextBilanganPertama dengan menggunakan method getText().toString() dan diakhir menggunakan equals("") yang berarti sama dengan string kosong / empty (""). Jadi kode tersebut akan mengecek jika mEditTextBilanganPertama tidak memiliki nilai maka akan muncul pesan error pada widget Editext dengan menggunakan method setError("pesan") dan diakhiri dengan return; agar kode berhenti dieksekusi dan tidak akan dilanjutkan pada baris setelahnya. Hal tersebut juga berlaku pada mEditTextBilanganKedua. Silahkan run aplikasi kembali dan lihat perubahan seperti video di bawah.

Demikian tutorial Latihan : Membuat Aplikasi Kalkulator Sederhana. Kita telah berhasil membuat project aplikasi dengan menggunakan nilai input dari user dan melakukan perhitungan setelah user menekan button. Selanjutnya kita akan membuat aplikasi ini kembali dengan menggunakan bahasa pemrograman kotlin. Jika kamu mengalami kesulitan dalam mengikuti tutorial ini, jangan ragu untuk bertanya di grup telegram teknorial. Tetap semangat belajar dan terima kasih :).

Source Code : [https://github.com/rflash95/KalkulatorSederhana]