Jetpack Compose Unit converter
Unit Converter is a tool that converts one unit to different unit. In this tutorial we will learn to build an Android App which converts temperature unit Celsius and Fahrenheit.
There are two parts of programming this app in one part we design the UI of our app. In the UI we need a text field where user can input the value, buttons with text to perform actions.
This is the small project We are going to learn but it is informative for the beginners. I hope you will enjoy and learn the basic of Jetpack Compose through building this app.
The Android Studio latest version Koala 🐨 is being used for this tutorial.
.webp "Android Studio latest version Koala")
Steps:
- Create a New Project in Android Studio
- Create a New File named UnitConverter for UI
- Create an Enum class to define different conversion types
- Add a real device and Run the App
MainActivity
Copy this code →
package com.codingbihar.composeapp
import ...
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
ComposeAppTheme {
//Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
UnitConverter()
}
}
}
}UnitConverter
Copy this code →
package com.codingbihar.composeapp
import ...
@Composable
fun UnitConverter() {
var input by remember { mutableStateOf("") }
var output by remember { mutableStateOf("") }
var conversionLabel by remember { mutableStateOf("Conversion Output") }
Column(
modifier = Modifier
.padding(16.dp)
.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
Row (Modifier.padding(16.dp)){
TextField(
value = input,
onValueChange = { input = it },
label = { Text("Input") },
keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number)
)
TextField(
value = output,
onValueChange = {},
label = { Text("Output ($conversionLabel)") },
readOnly = true,
)
}
ConversionButton(
label = "Meters to Centimeters",
onClick = {
output = convertUnits(input, ConversionType.MetersToCentimeters)
conversionLabel = "Centimeter"
}
)
ConversionButton(
label = "Centimeters to Meters",
onClick = {
output = convertUnits(input, ConversionType.CentimetersToMeters)
conversionLabel = "Centimeter"
}
)
ConversionButton(
label = "Meters to Feet",
onClick = {
output = convertUnits(input, ConversionType.MetersToFeet)
conversionLabel = "Feet"
}
)
ConversionButton(
label = "Feet to Meters",
onClick = {
output = convertUnits(input, ConversionType.FeetToMeters)
conversionLabel = "Meters"
}
)
ConversionButton(
label = "Kilograms to Pounds",
onClick = {
output = convertUnits(input, ConversionType.KilogramsToPounds)
conversionLabel = "Pounds"
}
)
ConversionButton(
label = "Pounds to Kilograms",
onClick = {
output = convertUnits(input, ConversionType.PoundsToKilograms)
conversionLabel = "Kilograms"
}
)
ConversionButton(
label = "Celsius to Fahrenheit",
onClick = {
output = convertUnits(input, ConversionType.CelsiusToFahrenheit)
conversionLabel = "Fahrenheit"
}
)
ConversionButton(
label = "Fahrenheit to Celsius",
onClick = {
output = convertUnits(input, ConversionType.FahrenheitToCelsius)
conversionLabel = "Celsius"
}
)
ConversionButton(
label = "Celsius to Kelvin",
onClick = {
output = convertUnits(input, ConversionType.CelsiusToKelvin)
conversionLabel = "Kelvin"
}
)
ConversionButton(
label = "Kelvin to Celsius",
onClick = {
output = convertUnits(input, ConversionType.KelvinToCelsius)
conversionLabel = "Celsius"
}
)
ConversionButton(
label = "Kelvin to Fahrenheit",
onClick = {
output = convertUnits(input, ConversionType.KelvinToFahrenheit)
conversionLabel = "Fahrenheit"
}
)
ConversionButton(
label = "Fahrenheit to Kelvin",
onClick = {
output = convertUnits(input, ConversionType.FahrenheitToKelvin)
conversionLabel = "Kelvin"
}
)
}
}
@Composable
fun ConversionButton(
label: String,
onClick: () -> Unit
) {
Button(
onClick = onClick,
modifier = Modifier.fillMaxWidth()
) {
Text(label)
}
}
// Conversion Logic
fun convertUnits(value: String, conversionType: ConversionType): String {
return try {
val input = value.toDouble()
val result = when (conversionType) {
ConversionType.MetersToCentimeters -> input * 100
ConversionType.CentimetersToMeters -> input /100
ConversionType.MetersToFeet -> input * 3.28084
ConversionType.FeetToMeters -> input / 3.28084
ConversionType.KilogramsToPounds -> input * 2.20462
ConversionType.PoundsToKilograms -> input / 2.20462
ConversionType.CelsiusToFahrenheit -> input * 9 / 5 + 32
ConversionType.FahrenheitToCelsius -> (input - 32) * 5 / 9
ConversionType.CelsiusToKelvin -> (input + 273.15)
ConversionType.KelvinToCelsius -> (input - 273.15)
ConversionType.KelvinToFahrenheit -> (input - 273.15) * 1.8 + 32
ConversionType.FahrenheitToKelvin -> (input - 32.0) * (5.0 / 9.0)
}
DecimalFormat("#.##").format(result) // Round to nearest integer and convert to string
} catch (e: NumberFormatException) {
"Invalid input"
}
}enum class
enum class ConversionType {
MetersToCentimeters,
CentimetersToMeters,
MetersToFeet,
FeetToMeters,
KilogramsToPounds,
PoundsToKilograms,
CelsiusToFahrenheit,
FahrenheitToCelsius,
KelvinToCelsius,
CelsiusToKelvin,
KelvinToFahrenheit,
FahrenheitToKelvin
}OUTPUT:
