How to Build a Cryptocurrency Portfolio Dashboard with Jetpack Compose

What You Will Build

A cryptocurrency portfolio screen showing total holdings in a primary-colored hero card with profit/loss breakdown, plus a transaction list with green/red color coding for buys and sells. This is the foundation for any financial tracking app.

Why This Pattern Matters

Crypto and fintech apps share a common UI vocabulary: hero balance cards, transaction feeds, and conditional color theming. This project covers all three with Material 3 components, making it a reusable template for financial apps.

Step 1: Scaffold Structure

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CryptoAppScreen() {
    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Crypto Portfolio") })
        }
    ) { padding ->
        Column(
            Modifier.fillMaxSize()
                .padding(padding)
                .padding(16.dp)
        ) {
            // Hero card + transaction list
        }
    }
}

Step 2: Portfolio Balance Hero Card

Card(
    Modifier.fillMaxWidth(),
    colors = CardDefaults.cardColors(
        containerColor = MaterialTheme.colorScheme.primary
    )
) {
    Column(Modifier.padding(24.dp)) {
        Text("Total Balance",
             color = Color.White.copy(alpha = 0.8f))
        Text("${'$'}4,344.50", fontSize = 36.sp,
             fontWeight = FontWeight.Bold, color = Color.White)
        Spacer(Modifier.height(16.dp))
        Row(Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween) {
            Column {
                Text("Gains", color = Color.White.copy(alpha = 0.7f))
                Text("+${'$'}5,750.00", color = Color(0xFF81C784),
                     fontWeight = FontWeight.SemiBold)
            }
            Column {
                Text("Losses", color = Color.White.copy(alpha = 0.7f))
                Text("-${'$'}1,405.50", color = Color(0xFFEF9A9A),
                     fontWeight = FontWeight.SemiBold)
            }
        }
    }
}

Step 3: Transaction Rows with Conditional Styling

Card(Modifier.fillMaxWidth().padding(vertical = 4.dp)) {
    Row(Modifier.padding(16.dp),
        verticalAlignment = Alignment.CenterVertically) {
        Box(
            Modifier.size(40.dp).clip(CircleShape)
                .background(
                    if (tx.isGain) Color(0xFF4CAF50).copy(alpha = 0.1f)
                    else Color(0xFFF44336).copy(alpha = 0.1f)
                ),
            contentAlignment = Alignment.Center
        ) {
            Icon(tx.icon, null,
                 tint = if (tx.isGain)
                     Color(0xFF4CAF50) else Color(0xFFF44336))
        }
        Spacer(Modifier.width(12.dp))
        Text(tx.name, modifier = Modifier.weight(1f))
        Text(tx.formattedAmount,
             fontWeight = FontWeight.Bold,
             color = if (tx.isGain)
                 Color(0xFF4CAF50) else Color(0xFFF44336))
    }
}

Tips and Pitfalls

• Green (0xFF4CAF50) and Red (0xFFF44336) are the standard Material gain/loss colors. Use them consistently across your financial app.
• CircleShape icon containers at 10% alpha are a Material 3 pattern for list item leading icons.
• Real crypto app extension: Add a LazyColumn of coin cards with sparkline charts using Canvas drawLine.
• Number formatting: Use NumberFormat.getCurrencyInstance() for locale-aware currency display.