Tugas 5 - Pemrograman Perangkat Bergerak G - Membuat Aplikasi Calculator

🔢Membuat Aplikasi Kalkulator Sederhana di Android dengan Jetpack Compose

Di postingan kali ini, saya membuat aplikasi kalkulator sederhana menggunakan Jetpack Compose di Android Studio. Aplikasi ini memungkinkan pengguna untuk memasukkan dua angka dan melakukan operasi dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian.

---

Langkah Awal

Saya memulai dari template Empty Activity di Android Studio yang sudah menggunakan Jetpack Compose. Setelah itu, saya menambahkan tampilan kalkulator dengan menggunakan fungsi @Composable.

---

Komponen Utama

1. Pengaturan MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            SimpleCalculatorTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    CalculatorScreen(Modifier.padding(innerPadding))
                }
            }
        }
    }
}

✅ Di sini saya menggunakan Scaffold untuk membungkus UI, lalu menampilkan tampilan kalkulator lewat CalculatorScreen().

---

Tampilan Kalkulator dengan Compose

@Composable
fun CalculatorScreen(modifier: Modifier = Modifier) {
    var input1 by remember { mutableStateOf(TextFieldValue("")) }
    var input2 by remember { mutableStateOf(TextFieldValue("")) }
    var result by remember { mutableStateOf("") }

• input1 dan input2 adalah variabel untuk menyimpan angka yang saya masukkan.

• result digunakan untuk menampilkan hasil perhitungan.

---

2. Input Angka

TextField(
    value = input1,
    onValueChange = { input1 = it },
    label = { Text("Input 1") },
    modifier = Modifier.fillMaxWidth()
)

Saya menggunakan TextField agar pengguna bisa mengetikkan angka secara langsung.

---

3. Tombol Operasi

Row(
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    modifier = Modifier.fillMaxWidth()
) {
    Button(onClick = {
        result = calculate(input1.text, input2.text, "+")
    }, modifier = Modifier.weight(1f)) {
        Text("+")
    }

    // Tombol untuk "-", "*", "/"
}

➕ ➖ ✖️ ➗ Setiap tombol akan memanggil fungsi calculate() dengan operasi yang sesuai.

---

 Fungsi Perhitungan

fun calculate(num1: String, num2: String, op: String): String {
    return try {
        val a = num1.toDouble()
        val b = num2.toDouble()
        when (op) {
            "+" -> (a + b).toString()
            "-" -> (a - b).toString()
            "*" -> (a * b).toString()
            "/" -> if (b != 0.0) (a / b).toString() else "Tidak bisa bagi 0"
            else -> "Operator tidak valid"
        }
    } catch (e: NumberFormatException) {
        "Input tidak valid"
    }
}

⚙️ Fungsi ini melakukan parsing angka dan menghitung berdasarkan operator yang dipilih. Saya juga menambahkan validasi jika input tidak bisa diubah menjadi angka atau jika terjadi pembagian dengan nol.

---

Preview di Android Studio

@Preview(showBackground = true)
@Composable
fun CalculatorPreview() {
    SimpleCalculatorTheme {
        CalculatorScreen()
    }
}

📱 Dengan @Preview, saya bisa melihat tampilan kalkulator langsung dari tampilan Design di Android Studio.

---

Hasil Akhir

Dengan langkah-langkah di atas, saya berhasil membuat aplikasi kalkulator sederhana menggunakan Jetpack Compose. UI-nya responsif dan mudah dikembangkan lebih lanjut.

---

Hasil Screenshot

Di sini, saya mengalikan 34 dan 78