Muhammad Risyad Himawan Putra: PPB Pertemuan 6

Membuat Aplikasi Android "Simple Calculator" dengan Jetpack Compose

Blog ini akan menjelaskan cara membuat aplikasi sederhana berupa Calculator, yaitu aplikasi kalkulator sederhana yang memuat fitur basic seperti penjumlahan, pengurangan, perkalian, dan pembagian menggunakan input dari user.

1. Struktur Dasar Program

Program terdiri dari beberapa bagian utama:

MainActivity
Composable function
State
Logic perhitungan

2. MainActivity

Activity utama menggunakan setContent untuk menampilkan UI Compose dan memanggil fungsi CalculatorScreen.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            CalculatorScreen()
        }
    }
}

setContent digunakan untuk menampilkan UI berbasis Compose
CalculatorScreen() adalah tampilan utama aplikasi

3. Composable CalculatorScreen

Fungsi ini adalah UI utama yang berisi input angka, operator, tombol, dan hasil perhitungan.

@Composable
fun CalculatorScreen() {

    var num1 by remember { mutableStateOf("") }
    var num2 by remember { mutableStateOf("") }
    var operator by remember { mutableStateOf("+") }
    var result by remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {

        OutlinedTextField(
            value = num1,
            onValueChange = { num1 = it },
            label = { Text("Number 1") }
        )

        OutlinedTextField(
            value = operator,
            onValueChange = { operator = it },
            label = { Text("Operator") }
        )

        OutlinedTextField(
            value = num2,
            onValueChange = { num2 = it },
            label = { Text("Number 2") }
        )

        Button(onClick = { /* perhitungan */ }) {
            Text("Calculate")
        }

        Text(text = "Result: $result")
    }
}

OutlinedTextField digunakan untuk input user
Button untuk menjalankan perhitungan
Text menampilkan hasil

4. State Management

State digunakan untuk menyimpan nilai input dan hasil perhitungan menggunakan remember.

var num1 by remember { mutableStateOf("") }
var num2 by remember { mutableStateOf("") }
var operator by remember { mutableStateOf("+") }
var result by remember { mutableStateOf("") }

remember menyimpan state selama composable aktif
mutableStateOf membuat state dapat berubah

5. Logic Perhitungan

Perhitungan dilakukan saat tombol ditekan dengan validasi input dan operator.

val n1 = num1.toDoubleOrNull()
val n2 = num2.toDoubleOrNull()

result = if (n1 == null || n2 == null) {
    "Invalid input"
} else {
    when (operator) {
        "+" -> (n1 + n2).toString()
        "-" -> (n1 - n2).toString()
        "*" -> (n1 * n2).toString()
        "/" -> if (n2 != 0.0) (n1 / n2).toString()
               else "Cannot divide by zero"
        else -> "Invalid operator"
    }
}

toDoubleOrNull() untuk validasi input angka
when untuk menentukan operasi matematika
Penanganan error seperti input tidak valid dan pembagian nol

6. Cara Menjalankan Aplikasi

Buka Android Studio
Buat project baru dengan template Empty Activity (Compose)
Masukkan kode ke file MainActivity.kt
Jalankan emulator atau device
Klik tombol Run
Masukkan angka dan operator, lalu tekan Calculate

Hasil Tampilan Aplikasi

Aplikasi akan menampilkan dua input angka, satu input operator, tombol calculate, dan hasil perhitungan di bagian bawah.

Muhammad Risyad Himawan Putra

Friday, April 10, 2026

PPB Pertemuan 6 - Kalkulator Sederhana