PPB: TUGAS 5

Nama     : Shazia Ingeyla Naveeda
NRP       : 5025211203
Kelas     : PPB (A)

Membuat Aplikasi Kalkulator Menggunakan Kotlin

Link Github

Pada pertemuan kelima, diminta untuk membuat Aplikasi kalkulator sederhana ini dibuat menggunakan Jetpack Compose, toolkit modern dari Android untuk membangun UI dengan cara yang lebih deklaratif. Di dalamnya, terdapat dua kolom input (TextField) untuk memasukkan angka pertama dan kedua. Lalu, tersedia empat tombol (Button) untuk melakukan operasi matematika dasar: penjumlahan (Add), pengurangan (Sub), perkalian (Mul), dan pembagian (Div). Setiap kali tombol ditekan, hasil perhitungan akan ditampilkan di dalam sebuah kartu (Card) yang tampil dengan desain bersih dan modern.

Untuk mengelola input dan hasil, digunakan konsep state dari Jetpack Compose, yaitu dengan remember dan mutableStateOf. Hal ini membuat aplikasi bisa secara otomatis memperbarui UI setiap kali ada perubahan nilai, tanpa perlu menyegarkan layar secara manual. Tidak hanya menampilkan hasil, aplikasi ini juga memberikan notifikasi berupa Toast untuk memberitahu pengguna nilai hasilnya.

Struktur layout-nya memanfaatkan Column dan Row agar elemen-elemen tampil dengan rapi, serta Spacer untuk memberi jarak antar komponen. Secara keseluruhan, aplikasi ini cocok sebagai latihan awal bagi kamu yang ingin belajar Jetpack Compose, karena mencakup banyak komponen dasar seperti input, button, state, dan pengaturan tampilan.

Berikut kode yang digunakan:

package com.example.mycalculator

import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.mycalculator.ui.theme.MyCalculatorTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            var num1 by remember { mutableStateOf("0") }
            var num2 by remember { mutableStateOf("0") }
            var res by remember { mutableStateOf("") }

            Column(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Text(text = "Aplikasi Kalkulator", fontSize = 24.sp, color = Color.DarkGray, fontWeight = FontWeight.Bold)
                Spacer(modifier = Modifier.height(16.dp))

                TextField(value = num1, onValueChange = { it:String -> num1 = it })
                TextField(value = num2, onValueChange = { it:String -> num2 = it })
                Spacer(modifier = Modifier.height(16.dp))
                Row {
                    Button(onClick = {
                        var result = num1.toInt() + num2.toInt()
                        res = result.toString();
                        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT).show()
                    }) {
                        Text(text = "Add")
                    }
                    Spacer(modifier = Modifier.width(16.dp))
                    Button(onClick = {
                        var result = num1.toInt() - num2.toInt()
                        res = result.toString();
                        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT).show()
                    }) {
                        Text(text = "Sub")
                    }
                    Spacer(modifier = Modifier.width(16.dp))
                    Button(onClick = {
                        var result = num1.toInt() * num2.toInt()
                        res = result.toString();
                        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT).show()
                    }) {
                        Text(text = "Mul")
                    }
                    Spacer(modifier = Modifier.width(16.dp))
                    Button(onClick = {
                        var result = num1.toInt() / num2.toInt();
                        res = result.toString();
                        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT).show()
                    }) {
                        Text(text = "Div")
                    }
                }

                Card(
                    modifier = Modifier.fillMaxWidth().padding(vertical = 16.dp),
                    elevation = CardDefaults.cardElevation(defaultElevation = 6.dp),
                    shape = RoundedCornerShape(12.dp),
                    colors = CardDefaults.cardColors(
                        containerColor = MaterialTheme.colorScheme.primaryContainer
                    )
                ){
                    if(res.isNotEmpty()){
                        Text(
                            text = res,
                            fontSize = 30.sp,
                            color = MaterialTheme.colorScheme.onPrimaryContainer.copy(alpha = 0.7f),
                            modifier = Modifier.fillMaxWidth(),
                            textAlign = TextAlign.Center
                        )
                    }
                }
            }
        }
    }
}