5025221154 Helsa Sriprameswari Putri - Tugas 6 Membuat Program Konversi Mata Uang

  Membuat Program Konversi Mata Uang

Nama : Helsa Sriprameswari Putri

NRP : 5025221154

Link Github : https://github.com/helsasp/Tugas6_PPB_CurrencyConverter

Link Video : 

Source Code :

package com.example.curencyconverter

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.curencyconverter.ui.theme.CurencyConverterTheme

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

@Composable
fun CurrencyConverterUI() {
    var dollarInput by remember { mutableStateOf("") }
    var result by remember { mutableStateOf("") }
    val conversionRate = 16851.0

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(24.dp)
            .background(Color(0xFFE3F2FD)),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // 💲 Title
        Text(
            text = "Currency Converter",
            fontSize = 28.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF1565C0)
        )

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

        // 🇺🇸 USD → 🇮🇩 IDR Text
        Text(
            text = "🇺🇸 USD → 🇮🇩 IDR",
            fontSize = 20.sp,
            fontWeight = FontWeight.Medium,
            color = Color(0xFF0D47A1)
        )

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

        // Label
        Text(
            text = "Enter USD amount",
            fontSize = 18.sp,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF1565C0),
            modifier = Modifier
                .align(Alignment.Start)
                .padding(bottom = 4.dp)
        )

        // 💲 Icon + Input
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(
                text = "💲",
                fontSize = 26.sp,
                modifier = Modifier.padding(end = 8.dp)
            )

            OutlinedTextField(
                value = dollarInput,
                onValueChange = { dollarInput = it },
                textStyle = TextStyle(
                    fontSize = 20.sp,
                    fontWeight = FontWeight.Bold
                ),
                keyboardOptions = KeyboardOptions.Default.copy(keyboardType = KeyboardType.Number),
                singleLine = true,
                modifier = Modifier.weight(1f)
            )
        }

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

        // Convert button
        Button(
            onClick = {
                val value = dollarInput.toDoubleOrNull()
                result = if (value != null) {
                    "Rp ${"%,.2f".format(value * conversionRate)}"
                } else {
                    "Invalid input"
                }
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(50.dp),
            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF1E88E5))
        ) {
            Text("Convert", fontSize = 18.sp, color = Color.White)
        }

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

        // Output result
        if (result.isNotEmpty()) {
            Text(
                text = result,
                fontSize = 24.sp,
                fontWeight = FontWeight.SemiBold,
                color = Color(0xFF0D47A1)
            )
        }
    }
}

 

Penjelasan Source Code :  

Class MainActivity

• MainActivity adalah layar utama aplikasi. Saat aplikasi dibuka, bagian ini akan dipanggil pertama.

• Bagian setContent digunakan untuk menampilkan UI. CurencyConverterTheme dipakai untuk memberikan tampilan warna sesuai tema.
  

Fungsi CurrencyConverterUI()

Ini adalah fungsi yang menggambar seluruh tampilan layar.

• dollarInput: untuk menyimpan input dari pengguna (dolar).

• result: untuk menyimpan hasil konversi ke rupiah.

• conversionRate = 16851.0: nilai tukar 1 dolar = 16.851 rupiah.

Bagian UI

Digunakan untuk menata elemen UI secara vertikal, di tengah layar.

1. Title
   Text("Currency Converter") – menampilkan judul aplikasi.

2. Keterangan Konversi
   Text("🇺🇸 USD → 🇮🇩 IDR") – menunjukkan arah konversi mata uang.

3. Label Input
   Text("Enter USD amount") – instruksi agar pengguna mengisi nilai dolar.

4. Input Angka

   • Ada emoji 💲

   • Field input angka menggunakan OutlinedTextField agar pengguna bisa mengetik angka USD.

5. Tombol Convert
   Jika ditekan:

   • Mengubah input ke angka.

   • Mengalikan dengan conversionRate.

   • Menampilkan hasil format dalam bentuk rupiah (Rp 100,000.00).

   • Jika input salah, tampilkan “Invalid input”.

6. Hasil Konversi
   Jika hasilnya tidak kosong, tampilkan hasilnya dalam format besar dan berwarna.

Preview App :