5025221154 Helsa Sriprameswari Putri - Tugas 5 Membuat Aplikasi Kalkulator

 Membuat Aplikasi Kalkulator 🔢

Nama : Helsa Sriprameswari Putri

NRP : 5025221154

Link Github : https://github.com/helsasp/Tugas5_PPB_Calculator

Link Demo App : 

Source Code : 

package com.example.mycalculator

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
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.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.background

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            var num1 by remember { mutableStateOf(value = "0") }
            var num2 by remember { mutableStateOf(value = "0") }
            var result by remember { mutableStateOf("0") }

            val babyPurple = Color(0xFFE3D5FF)
            val lightBabyPurple = Color(0xFFF3ECFF)

            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp),
                contentAlignment = Alignment.Center
            ) {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    Text(
                        text = "My Calculator",
                        fontSize = 24.sp,
                        fontWeight = FontWeight.Bold,
                        color = Color.Black
                    )
                    Spacer(modifier = Modifier.height(16.dp))
                    TextField(
                        value = num1,
                        onValueChange = { num1 = it },
                        colors = TextFieldDefaults.colors(
                            focusedContainerColor = lightBabyPurple,
                            unfocusedContainerColor = lightBabyPurple
                        )
                    )
                    TextField(
                        value = num2,
                        onValueChange = { num2 = it },
                        colors = TextFieldDefaults.colors(
                            focusedContainerColor = lightBabyPurple,
                            unfocusedContainerColor = lightBabyPurple
                        )
                    )
                    Spacer(modifier = Modifier.height(32.dp))
                    Row {
                        Button(
                            onClick = { result = (num1.toInt() + num2.toInt()).toString() },
                            colors = ButtonDefaults.buttonColors(containerColor = babyPurple)
                        ) {
                            Text(text = "Add", color = Color.Black)
                        }
                        Spacer(modifier = Modifier.width(16.dp))
                        Button(
                            onClick = { result = (num1.toInt() - num2.toInt()).toString() },
                            colors = ButtonDefaults.buttonColors(containerColor = babyPurple)
                        ) {
                            Text(text = "Sub", color = Color.Black)
                        }
                        Spacer(modifier = Modifier.width(16.dp))
                        Button(
                            onClick = { result = (num1.toInt() * num2.toInt()).toString() },
                            colors = ButtonDefaults.buttonColors(containerColor = babyPurple)
                        ) {
                            Text(text = "Mul", color = Color.Black)
                        }
                        Spacer(modifier = Modifier.width(16.dp))
                        Button(
                            onClick = { result = (num1.toInt() / num2.toInt()).toString() },
                            colors = ButtonDefaults.buttonColors(containerColor = babyPurple)
                        ) {
                            Text(text = "Div", color = Color.Black)
                        }
                    }
                    Spacer(modifier = Modifier.height(32.dp))

                    Box(
                        modifier = Modifier
                            .width(100.dp)
                            .height(100.dp)
                            .background(babyPurple, shape = CircleShape),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(
                            text = result,
                            fontSize = 20.sp,
                            color = Color.Black
                        )
                    }
                    Spacer(modifier = Modifier.height(16.dp))
                    Text(
                        text = "Helsa Sriprameswari Putri (5025221154)",
                        fontSize = 18.sp,
                        fontWeight = FontWeight.Bold,
                        color = Color.Black
                    )
                }
            }
        }
    }
}

Penjelasan Source Code : 

Deklarasi Package dan Import

Mengimpor berbagai komponen yang dibutuhkan dari Jetpack Compose dan Android, seperti:

• ComponentActivity: Aktivitas utama.

• setContent: Menetapkan tampilan UI.

• Box, Column, Row, TextField, Button, dll: Elemen UI Compose.

• Modifier, Color, FontWeight, Shape, dll: Untuk styling dan layout.
  

MainActivity Class

•  MainActivity adalah titik masuk aplikasi.
• Oncreate dijalankan saat activity dibuat.

State untuk Input dan Hasil

• num1, num2, dan result adalah state yang menyimpan nilai input dan hasil operasi.
• remember { mutableStateOf(...) } menyimpan nilai dan memberi tahu Compose untuk merender ulang saat nilainya berubah

Warna Custom

Warna ungu muda yang digunakan untuk tombol dan TextField.

Struktur UI Utama (Box dan Column)

• Box: Memusatkan konten di layar.
• Column: Menyusun komponen secara vertikal dan rata tengah secara horizontal.

TextField untuk Input

• Dua input untuk memasukkan angka pertama dan kedua.
• onValueChange memperbarui state saat pengguna mengetik.

Tombol Operasi

Ada 4 tombol:

1. Add: Penjumlahan
2. Sub: Pengurangan
3. Mul: Perkalian
4. Div: Pembagian

Semua tombol memperbarui result saat diklik.

Input dikonversi ke Int dengan toInt().

Penanganan error untuk pembagian nol (num2.toInt() == 0) agar tidak crash.

Hasil di dalam Lingkaran

Menampilkan hasil kalkulasi di dalam lingkaran berwarna ungu muda.

App Preview