Cara Membuat Aplikasi Kalkulator di Android Menggunakan Kotlin, View Binding, dan Custom Button Styles

Membangun aplikasi kalkulator adalah salah satu proyek dasar untuk belajar pengembangan aplikasi Android. Di artikel ini, kita akan membuat aplikasi kalkulator sederhana menggunakan Kotlin di Android Studio. Selain itu, kita akan menambahkan View Binding untuk manajemen kode yang lebih mudah dan menerapkan Custom Button Styles untuk desain yang lebih seragam.

Langkah 1: Buat Proyek Baru di Android Studio

1. Buka Android Studio dan buat proyek baru dengan template Empty Views Activity.
2. Beri nama proyek, misalnya, “KalkulatorApp”.
3. Pilih bahasa Kotlin sebagai bahasa pemrograman dan lanjutkan hingga proyek selesai dibuat.

Langkah 2: Desain Antarmuka Kalkulator

Buka file activity_main.xml di direktori res/layout dan buat antarmuka sederhana untuk kalkulator dengan menambahkan:

• Tampilan (TextView) untuk menampilkan angka dan hasil.
• Tombol angka dari 0-9.
• Tombol operator (+, -, *, /).
• Tombol khusus seperti Clear (C) dan Backspace (←).

Berikut adalah contoh kode XML untuk desain antarmuka kalkulator:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <!-- Display -->
    <TextView
        android:id="@+id/display"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="end"
        android:padding="16dp"
        android:text="0"
        android:textSize="32sp"/>

    <!-- Clear and Backspace buttons -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingBottom="8dp">

        <Button
            android:text="C"
            android:onClick="onClearClick"
            style="@style/KalkulatorButton"
            android:layout_width="0dp"
            android:layout_weight="1"/>

        <Button
            android:text="←"
            android:onClick="onBackspaceClick"
            style="@style/KalkulatorButton"
            android:layout_width="0dp"
            android:layout_weight="1"/>
    </LinearLayout>

    <!-- Buttons -->
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="4"
        android:rowCount="5"
        android:paddingTop="16dp">

        <!-- Button Row (7,8,9,/) -->
        <Button android:text="7" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="8" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="9" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="/" android:onClick="onOperatorClick" style="@style/KalkulatorButton"/>

        <!-- Button Row (4,5,6,*) -->
        <Button android:text="4" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="5" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="6" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="*" android:onClick="onOperatorClick" style="@style/KalkulatorButton"/>

        <!-- Button Row (1,2,3,-) -->
        <Button android:text="1" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="2" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="3" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="-" android:onClick="onOperatorClick" style="@style/KalkulatorButton"/>

        <!-- Button Row (0,.,=,+) -->
        <Button android:text="0" android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="." android:onClick="onNumberClick" style="@style/KalkulatorButton"/>
        <Button android:text="=" android:onClick="onEqualClick" style="@style/KalkulatorButton"/>
        <Button android:text="+" android:onClick="onOperatorClick" style="@style/KalkulatorButton"/>
    </GridLayout>

</LinearLayout>

Langkah 3: Mengaktifkan View Binding

View Binding memudahkan akses komponen UI langsung melalui kode tanpa perlu menggunakan findViewById. Untuk mengaktifkan View Binding:

1. Buka file app/build.gradle.
2. Di dalam blok android, tambahkan baris viewBinding { enabled = true }.

3. Setelah menambahkan viewBinding, sinkronkan proyek Anda dengan Gradle dengan mengklik Sync Now di pojok kanan atas.

Dengan View Binding aktif, Anda dapat mengakses komponen di MainActivity melalui objek binding, seperti yang sudah diperlihatkan di contoh kode MainActivity.kt pada langkah-langkah sebelumnya.

Langkah 4: Menambahkan Custom Button Style di styles.xml

Untuk membuat tampilan tombol lebih seragam, kita bisa mendefinisikan gaya tombol khusus di themes.xml.

1. Buka file res/values/themes.xml.
2. Tambahkan style khusus bernama KalkulatorButton agar semua tombol memiliki ukuran, teks, dan margin yang sama.

Berikut adalah contoh style tombol:

 
<style name="KalkulatorButton">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_margin">4dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:textSize">24sp</item>
    </style>

Langkah 5: Implementasi Logika di MainActivity

Setelah View Binding dan gaya tombol siap, tambahkan logika kalkulator di file MainActivity.kt Berikut ini adalah logika dasar untuk menampilkan hasil perhitungan pada aplikasi:

package com.example.kalkulatorapp

import android.os.Bundle
import android.view.View
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.example.kalkulatorapp.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private var operator: String = ""
    private var firstNumber: Double? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
    }

    fun onNumberClick(view: View) {
        val buttonText = (view as Button).text.toString()
        val displayText = binding.display.text.toString()

        // Tambahkan angka atau titik desimal
        if (displayText == "0" && buttonText != ".") {
            binding.display.text = buttonText
        } else {
            binding.display.text = displayText + buttonText
        }
    }

    fun onOperatorClick(view: View) {
        val buttonText = (view as Button).text.toString()
        firstNumber = binding.display.text.toString().toDoubleOrNull()
        operator = buttonText
        binding.display.text = "0"
    }

    fun onEqualClick(view: View) {
        val secondNumber = binding.display.text.toString().toDoubleOrNull()

        if (firstNumber != null && secondNumber != null) {
            val result = when (operator) {
                "+" -> firstNumber!! + secondNumber
                "-" -> firstNumber!! - secondNumber
                "*" -> firstNumber!! * secondNumber
                "/" -> firstNumber!! / secondNumber
                else -> 0.0
            }

            // Tampilkan hasil tanpa desimal jika hasilnya bilangan bulat
            binding.display.text = if (result % 1 == 0.0) {
                result.toInt().toString()
            } else {
                result.toString()
            }
        }
    }

    // Fungsi Clear untuk menghapus semua input
    fun onClearClick(view: View) {
        binding.display.text = "0"
        firstNumber = null
        operator = ""
    }

    // Fungsi Backspace untuk menghapus karakter terakhir
    fun onBackspaceClick(view: View) {
        val displayText = binding.display.text.toString()
        if (displayText.length > 1) {
            binding.display.text = displayText.dropLast(1)
        } else {
            binding.display.text = "0"
        }
    }
}

Penjelasan Logika

1. Format Hasil Tanpa Desimal: Fungsi onEqualClick memastikan hasil ditampilkan tanpa desimal jika bilangan bulat. Ini dilakukan dengan memeriksa apakah result % 1 == 0.0. Jika benar, hasil dikonversi menjadi bilangan bulat.
2. Fungsi Clear: onClearClick mengatur ulang tampilan menjadi “0” dan menghapus nilai firstNumber serta operator.
3. Fungsi Backspace: onBackspaceClick menghapus karakter terakhir pada tampilan. Jika hanya satu karakter tersisa, tampilan direset menjadi “0”.

Kesimpulan

Dengan mengikuti langkah-langkah ini, Anda telah membuat aplikasi kalkulator sederhana di Android dengan Kotlin, lengkap dengan View Binding dan Custom Button Styles. View Binding membantu mengurangi kode boilerplate dan membuatnya lebih mudah dikelola, sementara gaya tombol khusus memastikan tampilan aplikasi konsisten dan seragam.