Tutorial Android Studio : Membuat Kalkulator Sederhana

 

Langkah - langkah 

MainActivity.kt

package com.laras.kalkulator

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.runtime.*
import androidx.compose.foundation.layout.*
import androidx.compose.ui.unit.dp
import androidx.compose.material3.*



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

@Composable
fun KalkulatorUI() {
    var angka1 by remember { mutableStateOf("") }
    var angka2 by remember { mutableStateOf("") }
    var hasil by remember { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        OutlinedTextField(
            value = angka1,
            onValueChange = { angka1 = it },
            label = { Text("Angka 1") },
            modifier = Modifier.fillMaxWidth()
        )
        OutlinedTextField(
            value = angka2,
            onValueChange = { angka2 = it },
            label = { Text("Angka 2") },
            modifier = Modifier.fillMaxWidth()
        )

        Spacer(modifier = Modifier.height(16.dp))

        Row {
            Button(onClick = {
                val a = angka1.toDoubleOrNull() ?: 0.0
                val b = angka2.toDoubleOrNull() ?: 0.0
                hasil = (a + b).toString()
            }) { Text("+") }

            Spacer(modifier = Modifier.width(8.dp))

            Button(onClick = {
                val a = angka1.toDoubleOrNull() ?: 0.0
                val b = angka2.toDoubleOrNull() ?: 0.0
                hasil = (a - b).toString()
            }) { Text("-") }

            Spacer(modifier = Modifier.width(8.dp))

            Button(onClick = {
                val a = angka1.toDoubleOrNull() ?: 0.0
                val b = angka2.toDoubleOrNull() ?: 0.0
                hasil = (a * b).toString()
            }) { Text("×") }

            Spacer(modifier = Modifier.width(8.dp))

            Button(onClick = {
                val a = angka1.toDoubleOrNull() ?: 0.0
                val b = angka2.toDoubleOrNull() ?: 0.0
                hasil = if (b != 0.0) (a / b).toString() else "Tidak bisa dibagi nol!"
            }) { Text("÷") }
        }

        Spacer(modifier = Modifier.height(16.dp))

        Text("Hasil: $hasil", style = MaterialTheme.typography.headlineSmall)
    }
}

activity_main.xml 

klik res

klik kanan new android resource file 

pilih layout 

buat activity_main.xml 

pilih text 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <EditText
        android:id="@+id/angka1"
        android:hint="Masukkan angka pertama"
        android:inputType="numberDecimal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <EditText
        android:id="@+id/angka2"
        android:hint="Masukkan angka kedua"
        android:inputType="numberDecimal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/tambah"
        android:text="+"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/kurang"
        android:text="-"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/kali"
        android:text="×"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <Button
        android:id="@+id/bagi"
        android:text="÷"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <TextView
        android:id="@+id/hasil"
        android:text="Hasil akan muncul di sini"
        android:textSize="20sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>
</LinearLayout>