Seri Tutorial Android Studio (Bagian 3: Logika Kotlin – Menghidupkan Kalkulator)

Selamat datang di Bagian 3! Di Bagian 2, kita berperan sebagai "Arsitek" dan merancang cetak biru (UI) di file XML. Tampilannya sudah jadi, tapi tombolnya belum berfungsi.

Hari ini, kita akan menjadi "Insinyur". Kita akan menulis kode Kotlin di file MainActivity.kt untuk menambahkan "otak" ke aplikasi kita. Kita akan menghubungkan UI ke kode dan melakukan perhitungan matematika.

Cara Modern Menghubungkan UI: ViewBinding 💡

Dulu, programmer menggunakan findViewById, cara yang lambat dan rawan error. Cara modern dan yang direkomendasikan Google adalah ViewBinding.

ViewBinding secara otomatis membuatkan "objek pengikat" yang aman yang memungkinkan kode Kotlin Anda mengakses komponen UI (seperti btnHitung) secara langsung, tanpa risiko salah ketik ID.

Langkah 1: Aktifkan ViewBinding di Gradle

Ini adalah pengaturan satu kali untuk proyek Anda.

1. Di panel proyek, buka file build.gradle (Module :app). (Pastikan itu adalah file level Modul, bukan Project).
2. Di dalam blok android { ... }, tambahkan blok kode berikut:

buildFeatures {
    viewBinding = true
}

Anda akan melihat bilah kuning di atas. Klik "Sync Now" agar Android Studio dapat menerapkan perubahan.

Langkah 2: Siapkan Binding di MainActivity.kt

Buka file logika Anda (app > java > com... > MainActivity.kt). Kita perlu mengganti cara lama memuat layout dengan cara baru menggunakan ViewBinding.

Ganti seluruh isi file MainActivity.kt Anda dengan kode ini:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
// Impor nama binding yang dibuat otomatis (nama layout + Binding)
import com.namapaketanda.aplikasimatematika.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    // Deklarasikan variabel binding
    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Inflate layout menggunakan binding
        binding = ActivityMainBinding.inflate(layoutInflater)
        // Tetapkan root dari binding sebagai view konten
        setContentView(binding.root)
        
        // Kita akan tambahkan logika kita di sini!
        setupClickListener()
    }

    private fun setupClickListener() {
        // 1. Setel listener pada tombol hitung
        binding.btnHitung.setOnClickListener {
            // Panggil fungsi untuk menghitung
            hitungLuasPersegiPanjang()
        }
    }

    private fun hitungLuasPersegiPanjang() {
        // 2. Ambil teks dari EditText (sebagai String)
        val panjangStr = binding.edtPanjang.text.toString()
        val lebarStr = binding.edtLebar.text.toString()

        // 3. Validasi: Pastikan input tidak kosong
        if (panjangStr.isNotEmpty() && lebarStr.isNotEmpty()) {
            
            // 4. Ubah String ke Angka (Double)
            // .toDoubleOrNull() adalah cara aman untuk menghindari error
            val panjang = panjangStr.toDoubleOrNull()
            val lebar = lebarStr.toDoubleOrNull()

            // 5. Jika angka valid, lakukan perhitungan
            if (panjang != null && lebar != null) {
                val luas = panjang * lebar
                
                // 6. Tampilkan hasil ke TextView
                binding.textHasil.text = "Hasil: $luas"
            } else {
                binding.textHasil.text = "Input tidak valid"
            }
        } else {
            binding.textHasil.text = "Harap isi semua kolom"
        }
    }
}

Catatan Perubahan:
Perhatikan bahwa kita memisahkan logika. Fungsi onCreate (yang berjalan saat aplikasi pertama kali dibuka) kini hanya bertugas menyiapkan "listener". Logika perhitungan matematika yang sebenarnya kita letakkan di dalam fungsinya sendiri (hitungLuasPersegiPanjang). Ini adalah praktik yang baik untuk kode yang bersih dan rapi!

Kesimpulan & Apa Selanjutnya?

Jalankan aplikasi Anda di emulator! Anda sekarang memiliki kalkulator yang berfungsi penuh. Anda merancang UI di XML dan menghidupkannya dengan logika Kotlin.

Anda telah mempelajari inti pengembangan Android: menghubungkan desain ke logika dan menangani input pengguna.

Di Bagian 4, kita akan belajar cara membuat halaman baru (Activity) dan bernavigasi antar halaman, seperti dari "Menu Utama" ke "Kalkulator".

-> Lanjutkan ke Bagian 4: Navigasi Antar Halaman (Activity) dengan Intent

Keywords: Tutorial Kotlin Android, Android ViewBinding, setOnClickListener, toDoubleOrNull, Logika Kalkulator Android, MainActivity.kt, build.gradle, Pendidikan Matematika