Simple Calculator - Android

 

Nama: Richard Ryan

NRP: 5025211141

Kelas: PPB (G)

Tema: Calculator

Link Github :  Github

Penjelasan Kode

Pertama buat variabel yang akan digunakan untuk menyimpan persamaan dan hasilnya

    var equation by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }

Setelah itu buat beberapa fungsi utility yang akan digunakan untuk memproses / menghitung persamaan

Fungsi calc() akan menggunakan Expression() dari library org.mariuszgromada.math.mxparser.Expression yang dapat digunakan untuk mendapatkan nilai suatu persamaan dari string ekspresi

Fungsi addToEq() digunakan untuk menambahkan karakter ke persamaan

Fungsi clearEq() digunakan untuk menghapus persamaan yang ada

Fungsi dropLast() digunakan untuk menghapus karakter terakhir dari fungsi

Fungsi equals() digunakan untuk memindahkan hasil perhitungan ke persamaan sehingga dapat mempermudah perhitungan berikutnya

Fungsi calc() akan dipanggil sebagai langkah pertama setiap fungsi tersebut, sehingga seketika button diklik, dapat dibuat preview hasil persamaan, namun kekurangannya adalah apabila persamaan belum valid (contoh: karakter terakhir adalah operasi +,-,*,/ atau tanda kurung belum ditutup) maka akan muncul Error

    fun calc() {
        try {
            val exp = Expression(equation)
            val value = exp.calculate()
            result = if (value.isNaN()) {
                "= Error"
            } else {
                "= ${DecimalFormat("0.######").format(value)}"
            }
        } catch (e: Exception) {
            result = "= $e"
        }
    }

    fun addToEq(s: String) {
        equation += s
        calc()
    }

    fun clearEq() {
        equation = ""
        result = ""
    }

    fun dropLast() {
        if (equation.isNotEmpty()) {
            equation = equation.dropLast(1)
            calc()
        }
    }

    fun equals() {
        calc()
        if(result != "= Error") {
            equation = result.substring(2)
            result = ""
        }
    }

Setelah itu, kini akan dibuat layout UI nya.

Semua UI diwrap dengan Column() yang diletakkan di bawah dengan verticalArrangement = Arrangement.Bottom

Pertama, akan dibuat text untuk persamaan, diset ukuran font 28.sp dan diletakkan di ujung kanan dengan TextAlign.End 

Dibuat text serupa untuk hasil, akan tetapi diset warna text agak abu-abu (#706E6E)

Setelah itu dibuat garis pembatas abu-abu dengan ketebalan 2.dp

Kemudian, buat konfigurasi tombol yang akan dibuat. Dalam aplikasi ini tombol akan disusun dalam rangkaian 5 x 4 seperti tercantum pada variabel buttonRows. ButtonRows sendiri merupakan list 2D berisikan string yang menyimpan isi teks yang akan ada pada setiap tombol, setiap list melambangkan 1 baris tombol

Setiap baris akan diwrap dengan Row() dan memiliki jeda yang sama (horizontalArrangement = Arrangement.SpaceEvenly), kemudian, setiap tombol akan dimasukkan menggunakan elemen addButton() dengan parameter teks, warna tombol, dan aksi apa yang akan dilakukan ketika ditekan

    Column(
        modifier = Modifier
            .padding(horizontal = 12.dp, vertical = 16.dp)
            .fillMaxSize(),
        verticalArrangement = Arrangement.Bottom
    ) {
        Text(
            text = equation,
            fontSize = 40.sp,
            textAlign = TextAlign.End,
            fontWeight = FontWeight.SemiBold,
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 8.dp)
        )
        Text(
            text = result,
            fontSize = 40.sp,
            textAlign = TextAlign.End,
            fontWeight = FontWeight.SemiBold,
            color = Color(0xFF706E6E),
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp)
        )
        HorizontalDivider(
            modifier = Modifier.padding(vertical = 8.dp),
            thickness = 2.dp,
            color = Color.LightGray
        )

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

        buttonRows.forEach { row ->
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 4.dp),
                horizontalArrangement = Arrangement.SpaceEvenly
            ) {
                row.forEach { label ->
                    addButton(
                        text = label,
                        color = if(label >= "0" && label <= "9") Color.Black else Color(0xFFFF9800),
                        action = {
                            when (label) {
                                "C" -> clearEq()
                                "AC" -> dropLast()
                                "=" -> equals()
                                else -> addToEq(label)
                            }
                        }
                    )
                }
            }
        }
    }

Terakhir, untuk elemen addButton sendiri. Elemen ini hanya terdiri dari sebuah button yang di elevasikan sehingga menimbulkan efek bayangan. Apabila teks adalah AC, maka digunakan icon backspace untuk isi buttonnya, sedangkan jika tidak maka akan menggunakan Text(). Warna isi konten button menggunakan warna yang dipassing melalui parameter, sedangkan button sendiri diwarnai agak abu-abu #FAFAFA

@Composable
fun addButton(
    text: String,
    color: Color,
    action: () -> Unit
) {
    Button(
        onClick = action,
        modifier = Modifier
            .padding(4.dp)
            .shadow(8.dp, shape = RoundedCornerShape(50))
            .size(78.dp), // Circular buttons
        shape = RoundedCornerShape(50),
        colors = ButtonDefaults.buttonColors(
            containerColor = Color(0xFFFAFAFA),
            contentColor = color
        ),
        elevation = ButtonDefaults.elevatedButtonElevation(defaultElevation = 6.dp)
    ) {
        if (text == "AC") {
            Icon(
                imageVector = Icons.Default.Backspace,
                contentDescription = "Backspace",
                tint = color,
                modifier = Modifier.size(32.dp)
            )
        } else {
            Text(
                text = text,
                fontSize = 32.sp
            )
        }
    }
}

Hasil Akhir