Latihan : Membuat Aplikasi Kalkulator Sederhana dengan Kotlin

Pada latihan ini kita akan mencoba menggunakan beberapa fitur dari Kotlin untuk membuat aplikasi perhitungan matematika yang telah kita buat dengan Java pada tutorial sebelumnya. 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 Kotlin"
  • Package name: "com.teknorial.kalkulatorkotlin"
  • Language: Kotlin
  • Biarkan opsi lain sebagaimana adanya.

Kemudian klik Finish untuk membuat project.

ceate kalkulator kotlin

Kita akan menggunakan layout sama seperti tutorial sebelumnya. Buka activity_main.xml (layout/activity_main.xml) dan modifikasi seperti kode berikut.

<?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="number"
        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>

Kemudian buka strings.xml (values/strings.xml) dan tambah string array operator yang akan digunakan untuk widget Spinner.

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

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

</resources>

Setelah memodifikasi tampilan layout aplikasi, Klik run App untuk memastikan aplikasi berjalan lancar seperti gambar di bawah.

Preview Layout

Sekarang kita akan menggunakan Kotlin untuk memprogram aplikasi Android sesuai yang kita inginkan. Buka MainActivity dan kita melihat bahwa ekstensi file tersebut adalah .kt yang berarti file tersebut merupakan file Kotlin.

mainactivity-kt-f180efd39c24bdd4d4fdbfaa58e818c6

Dalam Kotlin kita dapat melihat ada sedikit perbedaan dengan Java dalam mendeklarasikan class. Pada kotlin kita menggunakan keyword class seperti berikut:

class MainActivity {

}    

Untuk melakukan extend ke class parent, kita cukup menggunakan tanda titik dua (:) yang berarti seperti keyword extend pada Java.

class MainActivity : AppCompatActivity() {

}

Function atau seperti method didalam Java dapat deklarasikan dengan keyword fun seperti berikut:

override fun onCreate(savedInstanceState: Bundle?) {

}

Kita juga dapat melihat kotlin tidak perlu perlu menulis tanda titik koma (;) di setiap akhir baris kode.

setContentView(R.layout.activity_main)

Kita telah mengenal sedikit perbedaan Kotlin dengan Java. Hal berbeda lainnya dari Kotlin adalah saat kita ingin melakukan deklarasi variabel dengan menggunakan keyword val atau var. val digunakan untuk variabel yang nilainya tidak akan berubah setelah inisialisasi sedangkan var digunakan untuk varibel yang dapat berubah walaupun telah diinisialisasi.

Contohnya saat kita ingin melakukan deklarasi variabel widget dengan awalan keyword val. Buka MainActivity dan modifikasi seperti kode berikut :

package com.teknorial.kalkulatorkotlin

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Spinner
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //deklarasi variabel dan inisialisasi widget
        val mEditTextBilanganPertama = findViewById<EditText>(R.id.et_bilangan_pertama)
        val mEditTextBilanganKedua = findViewById<EditText>(R.id.et_bilangan_kedua)
        val mSpinnerOperator = findViewById<Spinner>(R.id.spn_operator)
        val mButtonHitung = findViewById<Button>(R.id.btn_hitung)
        val mTextViewHasil = findViewById<TextView>(R.id.tv_hasil)
                

    }
}

Kita dapat melihat dari kode di atas. Kita menggunakan keyword val karena inisialisasi dilakukan hanya sekali terhadap id widget masing-masing.

Sekarang kita akan membuat click listener dan validasi nilai dari kedua widget EditText. Buka kembali MainActivity dan modifikasi seperti kode di bawah.

package com.teknorial.kalkulatorkotlin

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.widget.Spinner
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //deklarasi variabel dan inisialisasi view
        val mEditTextBilanganPertama = findViewById<EditText>(R.id.et_bilangan_pertama)
        val mEditTextBilanganKedua = findViewById<EditText>(R.id.et_bilangan_kedua)
        val mSpinnerOperator = findViewById<Spinner>(R.id.spn_operator)
        val mButtonHitung = findViewById<Button>(R.id.btn_hitung)
        val mTextViewHasil = findViewById<TextView>(R.id.tv_hasil)

        //click listener pada button
        mButtonHitung.setOnClickListener {
            //validasi nilai dari EditText
            if (mEditTextBilanganPertama.text.toString() == "") {
                mEditTextBilanganPertama.error = "Kamu Belum Memasukkan Bilangan Pertama"
                [email protected]
            }

            if (mEditTextBilanganKedua.text.toString() == "") {
                mEditTextBilanganKedua.error = "Kamu Belum Memasukkan Bilangan Kedua"
                [email protected]
            }	


        }
    }
}

Dalam Kotlin, untuk membuat click listener cukup menulis method setOnClickListener{ } saja dan kemudian kita dapat langsung menambahkan kode di dalamnya untuk event click pada Button. Pada validasi widget EditText kita tetap menggunakan kondisi if dan mengambil nilainya dari EditText dengan property text seperti mEditTextBilanganPertama.text. Hal ini dimungkinkan karena Kotlin membuat method getter and setter dalam Java dapat langsung diakses dengan property. Contohnya jika menggunakan mEditTextBilanganPertama.text berarti dalam java seperti mEditTextBilanganPertama.getText().

Untuk menampilkan error pada widget EditText kita cukup menggunakan property error dan menggunakan sama dengan (=) untuk value atau kalimat pesan error. Contohnya mEditTextBilanganPertama.error = "Pesan Error" berarti dalam Java kita menggunakan mEditTextBilanganPertama.setError("Pesan Error"). Kita akan pelajari banyak tentang method getter & setter lebih lanjut dalam kursus Kotlin Fundamental yang akan rilis nanti. Diakhir kondisi if kita menggunakan [email protected], yang berarti kode akan berhenti dieksekusi pada method setOnClickListener.

Sekarang kita jalankan aplikasi untuk menguji validasi input widget EditText dari user. Jika kode aplikasi kita tidak bermasalah, maka aplikasi akan berjalan seperti video berikut :

Kita telah berhasil membuat click listener pada Button dan melakukan validasi nilai dari kedua EditText. Sekarang kita akan mengambil nilai dari kedua EditText dan melakukan perhitungan berdasarkan pilih operator dari Spinner. Buka MainActivity dan modifikasi seperti kode di bawah.

package com.teknorial.kalkulatorkotlin

import android.os.Bundle
import android.widget.*
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //deklarasi variabel dan inisialisasi view
        val mEditTextBilanganPertama = findViewById<EditText>(R.id.et_bilangan_pertama)
        val mEditTextBilanganKedua = findViewById<EditText>(R.id.et_bilangan_kedua)
        val mSpinnerOperator = findViewById<Spinner>(R.id.spn_operator)
        val mButtonHitung = findViewById<Button>(R.id.btn_hitung)
        val mTextViewHasil = findViewById<TextView>(R.id.tv_hasil)

        //click listener pada button
        mButtonHitung.setOnClickListener {
            //validasi nilai dari EditText
            if (mEditTextBilanganPertama.text.toString() == "") {
                mEditTextBilanganPertama.error = "Kamu Belum Memasukkan Bilangan Pertama"
                [email protected]
            }

            if (mEditTextBilanganKedua.text.toString() == "") {
                mEditTextBilanganKedua.error = "Kamu Belum Memasukkan Bilangan Kedua"
                [email protected]
            }

            //Mengambil nilai dari EditText dan mengubahnya ke tipe data double
            val mBilanganPertama = mEditTextBilanganPertama.text.toString().toDouble()
            val mBilanganKedua = mEditTextBilanganKedua.text.toString().toDouble()

            //mengambil item yang dipilih dari widget spinner
            val mOperator = mSpinnerOperator.selectedItem.toString()

            //melakukan inisialisasi dengan nilai awal 0.0
            var mHasilPerhitungan = 0.0
            
           	//mengunakan when untuk pengecekan operator yang dipilih
            when (mOperator) {
                "+" -> mHasilPerhitungan = mBilanganPertama + mBilanganKedua
                "-" -> mHasilPerhitungan = mBilanganPertama - mBilanganKedua
                "x" -> mHasilPerhitungan = mBilanganPertama * mBilanganKedua
                "/" -> mHasilPerhitungan = mBilanganPertama / mBilanganKedua
                else -> {
                    Toast.makeText(this, "Kamu belum memilih operator", Toast.LENGTH_SHORT).show()
                }
            }
            
             //Mengubah nilai dari double menjadi string dan menampilkannya ke widget TextView
            mTextViewHasil.text = mHasilPerhitungan.toString()

        }
    }
}

Perhatikan kode atas, setelah berhasil melakukan validasi nilai dari kedua EditText. Kita mengambil nilai dari EditText dengan variabel mBilanganPertama dan mBilanganKedua.

//Mengambil nilai dari EditText dan mengubahnya ke tipe data double
val mBilanganPertama = mEditTextBilanganPertama.text.toString().toDouble()
val mBilanganKedua = mEditTextBilanganKedua.text.toString().toDouble()

Kita menggunakan val karena mBilangan tidak akan berubah setelah inisialisasi dengan nilai dari widget EditText. Pada kotlin kita tidak perlu menulis tipe data dari variabel karena compiler secara implisit telah mengatahui tipe data yang sedang digunakan. Namun jika kamu ingin menulis tipe data di variabel dapat melakukan seperti kode di bawah.

val mBilanganPertama: Double = mEditTextBilanganPertama.text.toString().toDouble()
val mBilanganKedua: Double = mEditTextBilanganKedua.text.toString().toDouble()

Pada widget Spinner kita dapat mengambil nilai dengan menggunakan property selectedItem sedikit berbeda pada java dengan menggunakan method getSelectedItem().

//mengambil item yang dipilih dari widget spinner
val mOperator = mSpinnerOperator.selectedItem.toString()

Disini kita akan melihat penggunaan keyword var pada variabel mHasilPerhitungan. Kenapa hanya pada variabel mHasilPerhitungan kita menggunakan var? var digunakan karena nilai dari variabel tersebut akan berubah setelah dilakukan inisialisasi. Pada variabel mHasilPerhitungan kita melakukan inisialisasi awal dengan nilai 0.0 namun nilai tersebut akan berubah dengan hasil perhitungan berdasarkan operator yang dipilih.

//melakukan inisialisasi dengan nilai awal 0.0
var mHasilPerhitungan = 0.0
 
//mengunakan when untuk pengecekan operator yang dipilih          
when (mOperator) {
	"+" -> mHasilPerhitungan = mBilanganPertama + mBilanganKedua
	"-" -> mHasilPerhitungan = mBilanganPertama - mBilanganKedua
	"x" -> mHasilPerhitungan = mBilanganPertama * mBilanganKedua
	"/" -> mHasilPerhitungan = mBilanganPertama / mBilanganKedua
	else -> {
 		Toast.makeText(this, "Kamu belum memilih operator", Toast.LENGTH_SHORT).show()
	}
}

Pada Java sebelumnya kita menggunakan switch case untuk mengecek operator yang dipilih namun pada kotlin kita menggunakan when. when merupakan percabangan kondisi yang dapat digunakan seperti switch case dan juga membuat rantai if else if. Dalam when kita dapat melihat ada beberapa operator seperti "+","-","x" ,"/" dan akan dieksekusi kode di dalam tanda panah (->) berdasarkan nilai dari mOperator atau item yang dipilih pada widget Spinner.

Terakhir kita akan memasukkan hasil perhitungan ke dalam TextView dengan menggunakan property text seperti kode di bawah :

//Mengubah nilai dari double menjadi string  dan menampilkannya ke widget TextView
mTextViewHasil.text = mHasilPerhitungan.toString()

Sekarang kita akan coba jalankan aplikasi kembali dengan fitur perhitungan yang telah ditambahkan. Jika tidak ada error maka aplikasi akan berjalan seperti video di bawah.

Demikian Tutorial Latihan : Membuat Aplikasi Kalkulator Sederhana dengan Kotlin. Kita telah mengetahui sedikit tentang penggunaan kotlin pada aplikasi Android. Tidak cukup dalam satu tutorial ini menjelaskan semua tentang penggunaan kotlin. Namun kedepan teknorial akan menyiapkan kursus Kotlin Fundamental untuk meningkatkan pemahamanmu tentang kotlin. Kotlin bukan hanya dapat digunakan Aplikasi Android, kamu bisa gunakan untuk membangun aplikasi web. 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/kalkulatorkotlin]