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.

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:

Also Read

BMI App in Jetpack Compose

Splash Screen in Jetpack Compose

Coding Bihar

Jetpack Compose Unit converter