package com.example.calculator import android.os.Bundle 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.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material3.Button import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.Scaffold import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Modifier import androidx.compose.ui.text.input.TextFieldValue import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import com.example.calculator.ui.theme.CalculatorTheme import java.text.NumberFormat class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { Surface (modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background){ TipCalculator() } } } } @Composable fun TipCalculator(){ var billAmount by remember{ mutableStateOf(TextFieldValue(" ")) } var tipPercentage by remember{ mutableStateOf(TextFieldValue(" ")) } var calculatedTip by remember{ mutableStateOf(0.0) } var totalAmount by remember{ mutableStateOf(0.0) } Column (modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) { Text(text = "Tip Calculator", style = MaterialTheme.typography.headlineLarge) OutlinedTextField(value = billAmount, onValueChange ={billAmount = it}, label = { Text(text = "Enter bill amount")}, modifier = Modifier.fillMaxWidth() ) OutlinedTextField(value = tipPercentage, onValueChange = {tipPercentage = it}, label = { Text(text = "Enter tip percentage")}, modifier = Modifier.fillMaxWidth()) Button(onClick = { val bill = billAmount.text.toDoubleOrNull()?:0.0 val tip = tipPercentage.text.toDoubleOrNull()?:0.0 calculatedTip = (bill * tip ) / 100 totalAmount = bill+calculatedTip }, modifier = Modifier.fillMaxWidth()) { Text(text = "Calculate") } if (calculatedTip > 0) { Text(text = "Tip : ${NumberFormat.getCurrencyInstance().format(calculatedTip)}") Text(text = "Total: ${NumberFormat.getCurrencyInstance().format(totalAmount)}") } } } @Preview(showBackground = true) @Composable fun TipCalculatorPreview(){ TipCalculator() } //Dependencies dependencies { implementation "androidx.compose.ui:ui:1.3.0" implementation "androidx.compose.material3:material3:1.0.0" implementation "androidx.navigation:navigation-compose:2.5.3" implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.5.1" }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter