Aplikasi Kalkulator

Pertemuan 5

Nama: Rayhan Almer Kusumah

NRP: 5025211115

Kelas: Pemrograman Perangkat Bergerak (A)

Tahun: 2025

Aplikasi Kalkulator

Dokumentasi

Source Code

GitHub:  Go to code!

package com.example.calculator_android_app

import android.os.Bundle
import android.widget.Space
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
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.material3.Button
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.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.calculator_android_app.ui.theme.CalculatorAndroidAppTheme

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") }

            Column {
                TextField(
                    value = num1,
                    onValueChange = {
                        num1 = it
                    },
                    modifier = Modifier.fillMaxWidth()
                )
                TextField(
                    value = num2,
                    onValueChange = {
                        num2 = it
                    },
                    modifier = Modifier.fillMaxWidth()
                )
                Spacer(modifier = Modifier.height(16.dp))
                Row (modifier = Modifier.align(Alignment.CenterHorizontally)) {
                    Button(onClick = {
                        var result = num1.toInt() + num2.toInt()
                        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT)
                            .show()
                    }) {
                        Text("Add")
                    }
                    Spacer(modifier = Modifier.width(16.dp))
                    Button(onClick = {
                        var result = num1.toInt() - num2.toInt()
                        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT)
                            .show()
                    }) {
                        Text("Sub")
                    }
                    Spacer(modifier = Modifier.width(16.dp))
                    Button(onClick = {
                        var result = num1.toInt() * num2.toInt()
                        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT)
                            .show()
                    }) {
                        Text("Multiply")
                    }
                    Spacer(modifier = Modifier.width(16.dp))
                    Button(onClick = {
                        var result = num1.toInt() / num2.toInt()
                        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT)
                            .show()
                    }) {
                        Text("Divide")
                    }
                }
            }
        }
    }
}

Pada pertemuan ini ditugaskan membuat aplikasi Kalkulator sederhana berupa text field untuk menerima input dan beberapa tombol untuk melakukan kalkulasi. Berikut adalah penjelasan lebih detail dari implementasi yang dilakukan.

Input Angka

Aplikasi ini menggunakan dua TextField untuk menerima input dari pengguna:

    TextField(
        value = num1,
        onValueChange = {
            num1 = it
        },
        modifier = Modifier.fillMaxWidth()
    )
    TextField(
        value = num2,
        onValueChange = {
            num2 = it
        },
        modifier = Modifier.fillMaxWidth()
    )

Nilai input disimpan dalam dua state: num1 dan num2, yang masing-masing dideklarasikan menggunakan remember dan mutableStateOf.

Operasi Aritmatika

Terdapat empat tombol yang masing-masing menjalankan satu operasi matematika. Setiap tombol menampilkan hasil perhitungan melalui Toast:

    Button(onClick = {
        var result = num1.toInt() + num2.toInt()
        Toast.makeText(applicationContext, "Result is $result", Toast.LENGTH_SHORT)
            .show()
    }) {
        Text("Add")
    }

Operasi lainnya seperti pengurangan, perkalian, dan pembagian juga diimplementasikan dengan pola yang serupa. Untuk menjaga UI tetap rapi, setiap tombol dipisahkan dengan Spacer horizontal.

User Interface

UI disusun menggunakan komponen Column dan Row dari Jetpack Compose. Dua TextField berada di dalam Column yang tersusun secara vertikal, sementara tombol-tombol operasi diletakkan dalam satu baris (Row) yang terpusat secara horizontal:

    Row (modifier = Modifier.align(Alignment.CenterHorizontally))

Kesimpulan

Aplikasi Kalkulator ini mengimplementasikan beberapa konsep dasar Jetpack Compose yaitu pengelolaan state, input user, serta komposisi layout.