Membuat Kalkulator Sederhana Menggunakan Bahasa Pemrograman Kotlin

12 Februari 2025 Administrator Dibaca : 439 Kali

Pertama tama kita akan membuat project dengan nama KalK ( Kalkulator Kotlin) atau kalian bebas untuk menamainya. Disini saya menggunakan Android studio versi 4.0.1.

android studio calculator project

Saya menggunakan Project Template Empty Activity dengan Minimum SDK (Android 5.0 (Lollipop)). Selanjutnya next saja dan tunggu hingga android selesai membuild project.

IMPORT LIBRARY

Import library

langkah selanjutnya adalah menambahkan sebuah library ‘net.objecthunter:exp:0.4.8’. Cara menambahkannya ada 2 cara,

pertama dengan menekan icon Project structure lalu pilih depedencies.
Kedua dengan cara klik Gradle Scripts pilih Build.gradle (Module App) lalu ketik nama library nya di depedencies.

Import Library melalu Gradle Scripts

MENAMBAHKAN COLOR (WARNA)

Selanjutnya kita tambahkan Warna pada colors.xml. Warna sesuai selera ya hehe..

<color name="ButtonBlack">#DD171A27</color>
<color name="ButtonWhite">#fff</color>
<color name="ButtonPurple">#34626c</color>

MENAMBAHKAN button.xml DAN button_operations.xml DI DRAWABLE

button.xml

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/ButtonWhite"/>
    <stroke android:width="1px" android:color="#000"/>
</shape>

button.xml ini berfungsi untuk membuat sebuah border saja sih hehe kalo mau gadipake juga gpp sebenernya. <solid> untuk background sedangkan <stroke> untuk border. Oiya dan <shape> berfungsi sebagai bentuk, jika ingin button berbentuk bulat atau oval tinggal tambahkan android:radius=”90” di dalam shape.

button_operations.xml

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#ffe05d"/>
    <stroke android:width="1px" android:color="#000"/>
</shape>

MEMBUAT LAYOUT CALCULATOR

Layout activity_main.xml

Selanjutnya kita akan membuat Layout di dalam activity_main.xml . Jangan langsung di copas semua yaa biar bisa ngerti fungsi fungsi dan belajar hehe.

<?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:orientation="vertical"
    android:background="@color/ButtonBlack"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/txtInput"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:ellipsize="start"
        android:gravity="end"
        android:padding="10dp"
        android:paddingTop="10dp"
        android:singleLine="true"
        android:text=""
        android:textColor="#5c969e"
        android:textSize="50sp" />

    <TextView
        android:id="@+id/txtHasil"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:text=""
        android:textSize="50sp"
        android:textColor="@color/ButtonWhite"
        android:singleLine="true"
        android:ellipsize="start"
        android:gravity="end"
        android:padding="10dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        android:orientation="vertical">

        <Button
            android:id="@+id/actionBack"
            android:layout_width="64dp"
            android:layout_height="59dp"
            android:layout_gravity="end"
            android:layout_marginRight="15dp"
            android:background="@drawable/backspace"
            android:backgroundTint="#ffe05d" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/clear"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button_operations"
                android:stateListAnimator="@null"
                android:text="C"
                android:textSize="16sp"
                android:textColor="@color/ButtonBlack" />

            <Button
                android:id="@+id/bukaKrng"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="16sp"
                android:background="@drawable/button_operations"
                android:stateListAnimator="@null"
                android:text="("
                android:textColor="@color/ButtonBlack" />

            <Button
                android:id="@+id/ttpKurung"
                android:layout_width="match_parent"
                android:textSize="16sp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button_operations"
                android:stateListAnimator="@null"
                android:text=")"
                android:textColor="@color/ButtonBlack" />

            <Button
                android:id="@+id/kali"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button_operations"
                android:paddingBottom="10dp"
                android:stateListAnimator="@null"
                android:text="*"
                android:textColor="@color/ButtonBlack" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btnSatu"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textSize="16sp"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="1"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/btnDua"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:textSize="16sp"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="2"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/btnTiga"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:textSize="16sp"
                android:stateListAnimator="@null"
                android:text="3"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/bagi"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button_operations"
                android:textSize="16sp"
                android:paddingBottom="10dp"
                android:stateListAnimator="@null"
                android:text="/"
                android:textColor="@color/ButtonBlack" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btnEmpat"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="4"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/btnLima"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="5"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/btnEnam"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="6"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/tambah"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button_operations"
                android:paddingBottom="10dp"
                android:stateListAnimator="@null"
                android:text="+"
                android:textColor="@color/ButtonBlack" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btnTujuh"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="7"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/btnDelapan"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="8"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/btnSembilan"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="9"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/kurang"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textSize="16sp"
                android:layout_weight="1"
                android:background="@drawable/button_operations"
                android:paddingBottom="10dp"
                android:stateListAnimator="@null"
                android:text="-"
                android:textColor="@color/ButtonBlack" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn00"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="00"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/btnNol"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="0"
                android:textColor="@color/ButtonPurple" />

            <Button
                android:id="@+id/btnTitik"
                android:textSize="16sp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@drawable/button"
                android:stateListAnimator="@null"
                android:text="."
                android:textColor="@color/ButtonPurple"
                />

            <Button
                android:id="@+id/hasil"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#3d7ea6"
                android:paddingBottom="10dp"
                android:stateListAnimator="@null"
                android:text="="
                android:textColor="@color/ButtonWhite"
                android:textSize="16sp" />


        </LinearLayout>

    </LinearLayout>

</LinearLayout>

MainActivity.kt

Baiklah sekarang kita masuk ke kodingan kotlinnya. Jangan dicopas semua loh biar kita bisa paham fungsinya. Pertama kita akan menambahkan listener untuk button.


        btn00.setOnClickListener { appenOnClick(true, "00") }
        btnNol.setOnClickListener { appenOnClick(true, "0") }
        btnSatu.setOnClickListener { appenOnClick(true, "1") }
        btnDua.setOnClickListener { appenOnClick(true, "2") }
        btnTiga.setOnClickListener { appenOnClick(true, "3") }
        btnEmpat.setOnClickListener { appenOnClick(true, "4") }
        btnLima.setOnClickListener { appenOnClick(true, "5") }
        btnEnam.setOnClickListener { appenOnClick(true, "6") }
        btnTujuh.setOnClickListener { appenOnClick(true, "7") }
        btnDelapan.setOnClickListener { appenOnClick(true, "8") }
        btnSembilan.setOnClickListener { appenOnClick(true, "9") }
        btnTitik.setOnClickListener { appenOnClick(true, ".") }

        //Operator
        kali.setOnClickListener { appenOnClick(false, "*") }
        bagi.setOnClickListener { appenOnClick(false, "/") }
        kurang.setOnClickListener { appenOnClick(false, "-") }
        tambah.setOnClickListener { appenOnClick(false, "+") }
        ttpKurung.setOnClickListener { appenOnClick(false, ")") }
        bukaKrng.setOnClickListener { appenOnClick(false, "(") }        clear.setOnClickListener {
        clear()}

        hasil.setOnClickListener {
        hitung()}

        actionBack.setOnClickListener { back() }

    }
}

Jika sudah mengetikan kode diatas makan pada bagian appenOnClick akan mengalami kesalahan atau error, Maka dari itu kita akan membuat function appenOnClick(). Berikut codingannya :

private fun appenOnClick(hapus: Boolean, string: String) {

        if (hapus) {
            txtHasil.text = ""
            txtInput.append(string)
        } else {
            txtInput.append(txtHasil.text)
            txtInput.append(string)
            txtHasil.text = ""
        }

    }

selanjutnya kita akan membuat function clear() yang berfungsi untuk membersihkan hasil dan input angka.

    private fun clear() {
        txtInput.text = " "
        txtHasil.text = " "
    }

Selanjutnya membuat function hitung() yang berguna untuk perhitungan ketika kita menekan button equals atau sama dengan.

private fun hitung() {
    try {

        val input = ExpressionBuilder(txtInput.text.toString()).build()
        val output = input.evaluate()
        val inputLong = output.toLong()

        if (output == inputLong.toDouble()) {
            txtHasil.text = inputLong.toString()
        } else {
            txtHasil.text = output.toString()
        }

    } catch (e: Exception) {
        Toast.makeText(this@MainActivity, e.message, Toast.LENGTH_LONG).show()
    }
}

Saya akan menjelaskan sedikit mengenai kodingan diatas. Saya menggunakan exception handling (try .. catch) atau kemampuan untuk menangani kesalahan yang berada di dalam program. Contoh simpelnya adalah ketika program mengalami error maka program akan memberi tahu kesalahannya tanpa mengehentikan program (crash).

Pada bagian catch berfungsi sebagai penanganan ketika program mengalami kesalahan, Dia akan mengirim sebuah message atau pesan.

Selanjutnya saya akan membuat function back() yang berfungsi sebagai penghapus atau backspace ketika kita salah memasukan input angka.

private fun back() {

    val expression = txtInput.text.toString()
    if (expression.isNotEmpty()) {
        txtInput.text = expression.substring(0, expression.length - 1)
    }
}

Jika sudah, Maka kurang lebihnya MainActivity.kt nya akan seperti ini :

package com.example.user.kalk

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*
import net.objecthunter.exp4j.ExpressionBuilder


class MainActivity : AppCompatActivity() {

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

        //Listener Angka agar dapat ditekan

        btn00.setOnClickListener { appenOnClick(true, "00") }
        btnNol.setOnClickListener { appenOnClick(true, "0") }
        btnSatu.setOnClickListener { appenOnClick(true, "1") }
        btnDua.setOnClickListener { appenOnClick(true, "2") }
        btnTiga.setOnClickListener { appenOnClick(true, "3") }
        btnEmpat.setOnClickListener { appenOnClick(true, "4") }
        btnLima.setOnClickListener { appenOnClick(true, "5") }
        btnEnam.setOnClickListener { appenOnClick(true, "6") }
        btnTujuh.setOnClickListener { appenOnClick(true, "7") }
        btnDelapan.setOnClickListener { appenOnClick(true, "8") }
        btnSembilan.setOnClickListener { appenOnClick(true, "9") }
        btnTitik.setOnClickListener { appenOnClick(true, ".") }

        //Operator
        kali.setOnClickListener { appenOnClick(false, "*") }
        bagi.setOnClickListener { appenOnClick(false, "/") }
        kurang.setOnClickListener { appenOnClick(false, "-") }
        tambah.setOnClickListener { appenOnClick(false, "+") }
        ttpKurung.setOnClickListener { appenOnClick(false, ")") }
        bukaKrng.setOnClickListener { appenOnClick(false, "(") }

        clear.setOnClickListener {
            clear()
        }

        hasil.setOnClickListener {
            hitung()
        }

        actionBack.setOnClickListener { back() }
    }


    // buat Method untuk menampilkan hasil
    private fun appenOnClick(hapus: Boolean, string: String) {

        if (hapus) {
            txtHasil.text = ""
            txtInput.append(string)
        } else {
            txtInput.append(txtHasil.text)
            txtInput.append(string)
            txtHasil.text = ""
        }

    }

    private fun clear() {
        txtInput.text = " "
        txtHasil.text = " "
    }

    private fun hitung() {
        try {

            val input = ExpressionBuilder(txtInput.text.toString()).build()
            val output = input.evaluate()
            val inputLong = output.toLong()

            if (output == inputLong.toDouble()) {
                txtHasil.text = inputLong.toString()
            } else {
                txtHasil.text = output.toString()
            }

        } catch (e: Exception) {
            Toast.makeText(this@MainActivity, e.message, Toast.LENGTH_LONG).show()
        }

    }
    private fun back() {

        val expression = txtInput.text.toString()
        if (expression.isNotEmpty()) {
            txtInput.text = expression.substring(0, expression.length - 1)
        }
    }
}

Langkah Terakhir kita Jalankan programnya.

Masukan Komentar anda

FACEBOOK

Embed Facebook Feed

SMK Negeri 1 Tanjung Lago Official Site

Membuat Kalkulator Sederhana Menggunakan Bahasa Pemrograman Kotlin

Masukan Komentar anda

HALAMAN LAINNYA

Jajak Pendapat