How to Build a Custom Camera UI with Jetpack Compose

What You Will Build

A plant care tracker displaying each plant in a card with a circular green avatar, plant name, scientific name in italics, and a watering schedule indicator with a water drop icon. This is a clean informational list pattern that works for any entity-detail display.

Why This Pattern Matters

Circular avatars with icon or image content are the standard pattern for contact lists, team directories, and entity browsers. This implementation teaches you CircleShape clipping, FontStyle.Italic for scientific names, and inline icon + text rows for metadata.

Step 1: Plant Data Model

data class Plant(
    val name: String,
    val species: String,
    val water: String
)

val plants = listOf(
    Plant("Monstera", "Monstera deliciosa", "Every 7 days"),
    Plant("Snake Plant", "Sansevieria", "Every 14 days"),
    Plant("Pothos", "Epipremnum aureum", "Every 5 days"),
    Plant("Fiddle Leaf", "Ficus lyrata", "Every 7 days")
)

Step 2: Build the Plant Card

@Composable
fun PlantCard(plant: Plant) {
    Card(Modifier.fillMaxWidth()) {
        Row(
            Modifier.padding(16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // Circular avatar
            Box(
                Modifier.size(56.dp)
                    .clip(CircleShape)
                    .background(Color(0xFF4CAF50).copy(alpha = 0.15f)),
                contentAlignment = Alignment.Center
            ) {
                Icon(
                    Icons.Default.Yard, null,
                    tint = Color(0xFF4CAF50),
                    modifier = Modifier.size(28.dp)
                )
            }
            Spacer(Modifier.width(16.dp))
            Column {
                Text(plant.name, fontWeight = FontWeight.Bold)
                Text(
                    plant.species,
                    fontSize = 13.sp,
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                    fontStyle = FontStyle.Italic
                )
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Icon(
                        Icons.Default.WaterDrop, null,
                        modifier = Modifier.size(14.dp),
                        tint = Color(0xFF2196F3)
                    )
                    Text(" ${plant.water}", fontSize = 13.sp)
                }
            }
        }
    }
}

Step 3: Assemble the List

Scaffold(topBar = { TopAppBar(title = { Text("Plant App") }) }) { padding ->
    LazyColumn(
        Modifier.padding(padding).padding(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        items(plants) { plant -> PlantCard(plant) }
    }
}

Tips and Pitfalls

• CircleShape is a built-in shape constant. No need to create RoundedCornerShape(50). Import it from androidx.compose.foundation.shape.
• Background alpha 0.15f creates a subtle tint that works in both light and dark themes without a hardcoded color.
• FontStyle.Italic is the conventional way to display scientific names (binomial nomenclature).
• Inline icon + text in a Row is more flexible than using a TextButton or annotated string for metadata like watering schedule.

Min SDK: 21 | Compose BOM: 2024.01.00+