Aplikasi Currency Converter

Pertemuan 6

Nama: Rayhan Almer Kusumah

NRP: 5025211115

Kelas: Pemrograman Perangkat Bergerak (A)

Tahun: 2025

Aplikasi Currency Converter

Dokumentasi

Source Code

GitHub: Go to code!

package com.example.currency_converter_android_app

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.example.currency_converter_android_app.ui.theme.CurrencyConverterAndroidAppTheme
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropDown
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            CurrencyConverterAndroidAppTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    CurrencyConverterApp()
                }
            }
        }
    }
}

@Composable
fun CurrencyConverterApp() {
    val currencies = listOf("IDR", "USD", "EUR", "GBP", "SAR", "CNY", "SGD", "AUD", "RUB", "INR")

    var amountInput by remember { mutableStateOf("") }
    var fromCurrency by remember { mutableStateOf("USD") }
    var toCurrency by remember { mutableStateOf("IDR") }
    var result by remember { mutableStateOf("") }

    val exchangeRates = mapOf(
        "IDR" to 1.0,
        "USD" to 15600.0,
        "EUR" to 17000.0,
        "GBP" to 19800.0,
        "SAR" to 4160.0,
        "CNY" to 2200.0,
        "SGD" to 11500.0,
        "AUD" to 10400.0,
        "RUB" to 160.0,
        "INR" to 190.0
    )

    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text = "Currency Converter",
            style = MaterialTheme.typography.headlineMedium.copy(
                fontWeight = FontWeight.Bold,
                letterSpacing = 1.5.sp,
                fontFamily = FontFamily.Serif
            ),
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 16.dp),
            textAlign = TextAlign.Center
        )

        OutlinedTextField(
            value = amountInput,
            onValueChange = { amountInput = it },
            label = { Text("Amount") },
            modifier = Modifier.fillMaxWidth()
        )

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

        Row(modifier = Modifier.fillMaxWidth()) {
            Box(modifier = Modifier.weight(1f)) {
                CurrencyDropdown(currencies, fromCurrency) { fromCurrency = it }
            }
            Spacer(modifier = Modifier.width(16.dp))
            Box(modifier = Modifier.weight(1f)) {
                CurrencyDropdown(currencies, toCurrency) { toCurrency = it }
            }
        }


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

        Button(onClick = {
            val amount = amountInput.toDoubleOrNull() ?: 0.0
            val fromRate = exchangeRates[fromCurrency] ?: 1.0
            val toRate = exchangeRates[toCurrency] ?: 1.0
            val converted = amount * fromRate / toRate
            result = "%.2f $toCurrency".format(converted)
        }, modifier = Modifier.fillMaxWidth()) {
            Text("Convert")
        }

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

        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp),
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
            shape = MaterialTheme.shapes.medium,
            colors = CardDefaults.cardColors(
                containerColor = MaterialTheme.colorScheme.primaryContainer
            )
        ) {
            Text(
                text = "Result: $result",
                style = MaterialTheme.typography.headlineSmall.copy(
                    fontWeight = FontWeight.Bold,
                    fontFamily = FontFamily.Serif
                ),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
            )
        }
    }
}

@Composable
fun CurrencyDropdown(
    currencies: List<String>,
    selectedCurrency: String,
    onCurrencySelected: (String) -> Unit
) {
    var expanded by remember { mutableStateOf(false) }

    Column(modifier = Modifier.fillMaxWidth()) {
        OutlinedButton(
            onClick = { expanded = true },
            modifier = Modifier.fillMaxWidth()
        ) {
            Row(
                horizontalArrangement = Arrangement.SpaceBetween,
                modifier = Modifier.fillMaxWidth()
            ) {
                Text(selectedCurrency)
                Icon(Icons.Default.ArrowDropDown, contentDescription = "Dropdown")
            }
        }
        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            currencies.forEach { currency ->
                DropdownMenuItem(
                    text = { Text(currency) },
                    onClick = {
                        onCurrencySelected(currency)
                        expanded = false
                    }
                )
            }
        }
    }
}

Pada pertemuan ini ditugaskan membuat aplikasi Currency Converter. Aplikasi ini memungkinkan pengguna untuk memasukkan sejumlah uang, memilih mata uang asal dan tujuan, lalu menampilkan hasil konversi berdasarkan nilai tukar yang telah ditentukan. Berikut adalah penjelasan lebih detail dari implementasi yang dilakukan.

Struktur Utama

Kode dimulai dengan MainActivity, yang merupakan entry point dari aplikasi. Di dalam fungsi onCreate, tampilan UI disusun menggunakan fungsi setContent dengan tema aplikasi CurrencyConverterAndroidAppTheme. UI utama ditampilkan melalui fungsi CurrencyConverterApp() yang berisi antarmuka dan logika konversi.

CurrencyConverterApp

Dalam CurrencyConverterApp(), terdapat beberapa variabel state seperti amountInput, fromCurrency, toCurrency, dan result yang masing-masing menyimpan input jumlah uang, mata uang asal, mata uang tujuan, dan hasil konversi. Nilai tukar mata uang disimpan dalam sebuah Map bernama exchangeRates yang berisi konversi terhadap IDR (Rupiah). Antarmuka pengguna terdiri dari judul, kolom input untuk jumlah uang, dua dropdown untuk memilih mata uang, tombol untuk melakukan konversi, dan sebuah kartu untuk menampilkan hasilnya. Proses konversi dilakukan dengan mengalikan jumlah uang dengan nilai tukar mata uang asal, lalu membaginya dengan nilai tukar mata uang tujuan.

CurrencyDropdown

Dropdown yang digunakan untuk memilih mata uang merupakan komponen kustom yang dibuat dalam fungsi CurrencyDropdown. Fungsi ini memanfaatkan DropdownMenu dan DropdownMenuItem untuk menampilkan pilihan mata uang dan memperbarui pilihan yang dipilih pengguna. Keseluruhan aplikasi memanfaatkan pendekatan deklaratif Jetpack Compose yang modern, serta menggunakan remember dan mutableStateOf agar UI bisa otomatis memperbarui dirinya saat ada perubahan data. Aplikasi ini dirancang secara sederhana namun interaktif, dan dapat dikembangkan lebih lanjut, misalnya dengan mengambil kurs mata uang secara real-time dari API eksternal.