Tugas Pertemuan 6 - Kalkulator

Nama: Dewa Putu Ananda Taurean Mahesa

NRP: 5025231158

Kelas: Pemrograman Perangkat Bergerak C

Membuat aplikasi kalkulator dengan Android Studio. Untuk memudahkan pengembangan, bisa menggunakan library exp4j untuk mengevaluasi ekspresi matematis atau logika urutan perhitungan.

1. Menyiapkan exp4j

implementation("net.objecthunter:exp4j:0.4.8")

Pertama harus menambahkan line di atas pada file build.gradle.kts (Module :app) di bagian dependencies lalu melakukan sync. Selanjutnya bisa langsung membuka file MainActivity.kt.

2. Package Library

package com.example.calculator

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import net.objecthunter.exp4j.ExpressionBuilder

Di atas adalah library yang akan digunakan.

3. MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color(0xFF1C1C1C) // Black
                ) {
                    CalculatorScreen()
                }
            }
        }
    }
}

MainActivity adalah titik masuk aplikasi yang akan menjalankan tampilan kalkulator dengan background warna hitam.

4. CalculatorScreen

@Composable
fun CalculatorScreen() {
    var equation by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("0") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Bottom
    ) {
        Text(
            text = equation,
            style = MaterialTheme.typography.headlineSmall,
            color = Color.Gray,
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.End,
            maxLines = 1
        )

        Text(
            text = result,
            style = MaterialTheme.typography.displayLarge,
            color = Color.White,
            fontWeight = FontWeight.Bold,
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.End,
            maxLines = 1
        )

        Spacer(modifier = Modifier.height(24.dp))

        val buttons = listOf(
            listOf("C", "(", ")", "/"),
            listOf("7", "8", "9", "*"),
            listOf("4", "5", "6", "-"),
            listOf("1", "2", "3", "+"),
            listOf("0", ".", "DEL", "=")
        )

        buttons.forEach { row ->
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                row.forEach { symbol ->
                    CalcButton(
                        symbol = symbol,
                        modifier = Modifier
                            .weight(1f)
                            .aspectRatio(1f)
                            .padding(vertical = 4.dp),
                        onClick = {
                            when (symbol) {
                                "C" -> {
                                    equation = ""
                                    result = "0"
                                }
                                "DEL" -> {
                                    if (equation.isNotEmpty()) {
                                        equation = equation.dropLast(1)
                                    }
                                }
                                "=" -> {
                                    try {
                                        if (equation.isNotEmpty()) {
                                            val eval = ExpressionBuilder(equation).build().evaluate()
                                            result = if (eval % 1 == 0.0) {
                                                eval.toInt().toString()
                                            } else {
                                                eval.toString()
                                            }
                                        }
                                    } catch (e: Exception) {
                                        result = "Error"
                                    }
                                }
                                else -> {
                                    equation += symbol
                                }
                            }
                        }
                    )
                }
            }
        }
    }
}

Ini adalah logika dan juga menyusun layout tampilan dari aplikasi. Terdapat 2 variabel yang bersifat mutable, yaitu equation yang menyimpan ekspresi perhitungan dan result yang menyimpan hasil. Setiap elemen akan ditata secara vertikal dengan style mereka masing-masing, dimulai dari text untuk equation, text untuk result, lalu kumpulan button kalkulator. Di akhir adalah logika untuk button kalkulator. Jika "C" ditekan maka equation akan dihapus dan result menjadi 0. Jika "DEL" ditekan maka input terakhir pada equation akan dihapus. Jika "=" ditekan maka equation akan dievaluasi dengan exp4j. ExpressionBuilder(equation) akan membaca string equation dan membaginya menjadi token, lalu .build() akan menentukan aturan perhitungan matematis, yang kemudian akan dihitung hasilnya dengan .evaluate(). Output bisa berupa angka bulat ataupun desimal. Kalkulator juga bisa memberi peringatan Error apabila terdapat kesalahan dalam perhitungan (seperti membagi dengan 0 atau kelebihan simbol misal ++). Jika button lain ditekan (seperti angka atau simbol) maka tinggal ditambahkan ke equation.

5. CalcButton

@Composable
fun CalcButton(symbol: String, modifier: Modifier, onClick: () -> Unit) {
    val isOperator = symbol in listOf("C", "(", ")", "/", "*", "-", "+", "=", "DEL")
    val containerColor = when {
        symbol == "=" -> Color(0xFFFF9800) // Orange
        isOperator -> Color(0xFF333333) // Dark Gray
        else -> Color(0xFF505050) // Light Gray
    }

    Button(
        onClick = onClick,
        modifier = modifier,
        shape = RoundedCornerShape(16.dp),
        colors = ButtonDefaults.buttonColors(
            containerColor = containerColor,
            contentColor = Color.White
        )
    ) {
        Text(
            text = symbol,
            fontSize = 22.sp,
            fontWeight = FontWeight.Bold
        )
    }
}

Ini adalah komponen button dari kalkulator yang mengatur style dan behavior dari button. Warna button akan berbeda berdasarkan simbol, angka, atau tulisan dari button.

6. Hasil Akhir