Tugas 5 - Aplikasi Kalkulator Sederhana

  

Aplikasi Kalkulator Sederhana

 

Langkah 1: Membuat Proyek Baru di Android Studio

1. Buka Android Studio setelah instalasi selesai.
2. Klik "Start a new Android Studio project".
3. Pada layar pemilihan template, pilih "Empty Compose Activity" lalu klik Next.
4. Masukkan nama aplikasi (misalnya, "Kalkulator Sederhana").
5. Tentukan lokasi penyimpanan proyek di sistem Anda.
6. Pilih Language sebagai Kotlin.
7. Pastikan Use AndroidX artifacts dicentang.
8. Klik Finish.
9. Pada halaman "Select a minimum SDK", pilih API Level 24: Android 7.0 (Nougat) sebagai Minimum SDK.
10. Android Studio akan mulai membangun proyek Anda. Tunggu hingga proses ini selesai.

Langkah 2: Mengedit File MainActivity.kt

1. Setelah proyek selesai dibangun, buka file MainActivity.kt.
2. Sesuaikan kode seperti berikut:

package com.example.kalkulatorsederhana

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.Text
import androidx.compose.material3.TextField
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

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 = "Calculator App", 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
                        )
                    }
                }
            }
        }
    }
}

Langkah 3: Menjalankan Aplikasi

1. Klik "Run" (ikon hijau di toolbar) untuk menjalankan aplikasi.
2. Pilih Emulator yang sudah Anda siapkan atau sambungkan perangkat fisik Android Anda.
3. Android Studio akan membangun dan menjalankan aplikasi.
4. Masukkan angka pertama dan angka kedua, lalu pilih operasi matematika yang ingin dilakukan.
5. Hasilnya akan muncul di bawah.

Dokumentasi