Currency Converter using Jetpack Compose

Currency Converter app using Jetpack Compose

In this tutorial, we’ll walk you through creating a simple Currency Converter App using Jetpack Compose. This app allows users to enter an amount, select currencies from dropdown menus, and see the converted amount with just a tap.

Steps Required:

Step 1: Setting Up Your Project

Create a New Android Project

• Open Android Studio and start a new project.
• Select Empty Compose Activity as the template.
• Name your project (e.g., CurrencyConverterApp).

Step 2: Designing the UI

The app will include:

• A TextField for inputting the amount.
• Two DropdownMenus for selecting currencies.
• A Button to trigger the conversion.
• A Text to display the result.

Step 3: Creating the Dropdown Menu Component

The dropdown menu lets users select their preferred currencies. Here's the reusable component:

Step 4: Adding Conversion Logic

In this app, a mock conversion rate is used for simplicity. Replace this with actual API integration for live exchange rates if needed.

Step 5: Running the App

• Connect your device or launch an emulator.
• Run the app from Android Studio.
• Enter an amount, select currencies, and tap the Convert button to see the result.

MainActivity

package com.codingbihar.composeskill

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.ui.Modifier
import com.codingbihar.composeskill.ui.theme.ComposeSkillTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeSkillTheme {
                CurrencyApp(modifier = Modifier)
            }
        }
    }
}

CurrencyConverterApp

package com.codingbihar.composeskill

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
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.text.KeyboardOptions
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
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.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun CurrencyApp(modifier: Modifier = Modifier) {
    val currencyList = listOf("USD", "EUR", "INR", "GBP", "JPY")
    val conversionRates = mapOf(
        Pair("USD", "EUR") to 0.85f,
        Pair("USD", "INR") to 74.5f,
        Pair("USD", "GBP") to 0.75f,
        Pair("USD", "JPY") to 110.0f,
        Pair("EUR", "INR") to 88.0f,
        Pair("INR", "USD") to 0.013f,
        Pair("GBP", "JPY") to 145.0f
    ) // Add more rates as needed.

    var amountInput by remember { mutableStateOf("") }
    var selectedFromCurrency by remember { mutableStateOf(currencyList[0]) }
    var selectedToCurrency by remember { mutableStateOf(currencyList[1]) }
    var result by remember { mutableStateOf("Converted Amount: 0.00") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(
                Brush.verticalGradient(
                    colors = listOf(Color(0xFF4CAF50), Color(0xFF2196F3))
                )
            )
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Text(
            "Currency Converter",
            style = MaterialTheme.typography.bodyMedium.copy(color = Color.White),
            modifier = Modifier.padding(top = 16.dp),
            textAlign = TextAlign.Center
        )

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

        // Input Section
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp),
            colors = CardDefaults.cardColors(containerColor = Color.White),
            shape = MaterialTheme.shapes.medium
        ) {
            Column(modifier = Modifier.padding(16.dp)) {
                TextField(
                    value = amountInput,
                    onValueChange = { amountInput = it },
                    label = { Text("Enter Amount") },
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
                    modifier = Modifier.fillMaxWidth()
                )

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

                // From Currency Dropdown
                DropdownMenuComponent(
                    label = "From Currency",
                    selectedOption = selectedFromCurrency,
                    options = currencyList
                ) { selectedFromCurrency = it }

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

                // To Currency Dropdown
                DropdownMenuComponent(
                    label = "To Currency",
                    selectedOption = selectedToCurrency,
                    options = currencyList
                ) { selectedToCurrency = it }
            }
        }

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

        // Convert Button
        Button(
            onClick = {
                val amount = amountInput.toFloatOrNull() ?: 0f
                val rate = conversionRates[Pair(selectedFromCurrency, selectedToCurrency)] ?: 1f
                result = "Converted Amount: ${(amount * rate)}"
            },
            modifier = Modifier
                .fillMaxWidth(0.6f)
                .height(50.dp),
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF4CAF50))
        ) {
            Text("Convert", color = Color.White, fontSize = 18.sp)
        }

        // Result Section
        Text(
            result,
            style = MaterialTheme.typography.bodySmall.copy(color = Color.White),
            modifier = Modifier.padding(bottom = 46.dp),
            textAlign = TextAlign.Center
        )
    }
}

@Composable
fun DropdownMenuComponent(
    label: String,
    selectedOption: String,
    options: List<String>,
    onOptionSelected: (String) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }

    Box(modifier = Modifier.fillMaxWidth()) {
        Column {
            Text(text = label, fontSize = 14.sp, color = Color.Gray)
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.LightGray)
                    .clickable { expanded = !expanded }
                    .padding(8.dp)
            ) {
                Text(selectedOption, color = Color.Black)
            }

            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                options.forEach { currency ->
                    DropdownMenuItem(
                        onClick = {
                            onOptionSelected(currency)
                            expanded = false
                        },
                        text = { Text(currency) }
                    )
                }
            }
        }
    }
}

OUTPUT: