Why advanced Compose creates rich UIs in Android Kotlin - Build It to Prove It

Build: Rich UI Showcase

This screen demonstrates how advanced Jetpack Compose features create rich and interactive user interfaces with animations, custom layouts, and state handling.

Target UI

┌───────────────────────────────┐
│ Rich UI Showcase              │
├───────────────────────────────┤
│ [Animated Button]             │
│                               │
│ Custom Layout with Cards      │
│  ┌─────────┐  ┌─────────┐     │
│  │ Card 1  │  │ Card 2  │     │
│  └─────────┘  └─────────┘     │
│                               │
│ Toggle Switch: [ ON / OFF ]   │
└───────────────────────────────┘

Add an animated button that changes color and size when clicked

Create a custom layout displaying two cards side by side

Include a toggle switch that updates text based on state

Use Compose state management to handle UI changes

Apply smooth animations for UI transitions

Starter Code

Android Kotlin

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 androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.animateColorAsState

@Composable
fun RichUIShowcase() {
    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // TODO: Add animated button here

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

        // TODO: Add custom layout with two cards here

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

        // TODO: Add toggle switch with state here
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Android Kotlin

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.animateColorAsState

@Composable
fun RichUIShowcase() {
    var clicked by remember { mutableStateOf(false) }
    var toggleOn by remember { mutableStateOf(false) }

    val buttonSize by animateDpAsState(targetValue = if (clicked) 80.dp else 60.dp)
    val buttonColor by animateColorAsState(targetValue = if (clicked) Color(0xFF6200EE) else Color(0xFF03DAC5))

    Column(
        modifier = Modifier.fillMaxSize().padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(
            onClick = { clicked = !clicked },
            modifier = Modifier.size(buttonSize),
            colors = ButtonDefaults.buttonColors(containerColor = buttonColor)
        ) {
            Text("Animated Button", color = Color.White)
        }

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

        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Card(
                modifier = Modifier.weight(1f),
                colors = CardDefaults.cardColors(containerColor = Color(0xFFE3F2FD))
            ) {
                Box(
                    modifier = Modifier
                        .height(100.dp)
                        .fillMaxWidth(),
                    contentAlignment = Alignment.Center
                ) {
                    Text("Card 1", fontWeight = FontWeight.Bold, color = Color(0xFF0D47A1))
                }
            }

            Card(
                modifier = Modifier.weight(1f),
                colors = CardDefaults.cardColors(containerColor = Color(0xFFFFF3E0))
            ) {
                Box(
                    modifier = Modifier
                        .height(100.dp)
                        .fillMaxWidth(),
                    contentAlignment = Alignment.Center
                ) {
                    Text("Card 2", fontWeight = FontWeight.Bold, color = Color(0xFFE65100))
                }
            }
        }

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

        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = if (toggleOn) "Toggle is ON" else "Toggle is OFF", modifier = Modifier.padding(end = 8.dp))
            Switch(checked = toggleOn, onCheckedChange = { toggleOn = it })
        }
    }
}

This solution uses Jetpack Compose's remember and mutableStateOf to keep track of UI states like button click and toggle switch.

The animated button changes its size and color smoothly using animateDpAsState and animateColorAsState. When clicked, it toggles between two sizes and colors.

The custom layout uses a Row with two Card components side by side, each styled with different background colors and centered text.

The toggle switch updates a text label dynamically based on its state, demonstrating reactive UI updates.

All these features together show how advanced Compose techniques create rich, interactive, and visually appealing user interfaces.

Final Result

Completed Screen

┌───────────────────────────────┐
│ Rich UI Showcase              │
├───────────────────────────────┤
│ [Animated Button]             │
│   (changes size & color)      │
│                               │
│ Custom Layout with Cards      │
│  ┌─────────┐  ┌─────────┐     │
│  │ Card 1  │  │ Card 2  │     │
│  └─────────┘  └─────────┘     │
│                               │
│ Toggle Switch: [ ON / OFF ]   │
└───────────────────────────────┘

Tapping the Animated Button toggles its size between small and large and changes its color smoothly.

The two cards are displayed side by side with distinct background colors and text.

Toggling the switch updates the text label to show 'Toggle is ON' or 'Toggle is OFF' instantly.

Stretch Goal

Add a smooth fade-in animation when the cards appear on the screen.

💡 Hint

Use Compose's AnimatedVisibility or animateFloatAsState to animate the alpha property of the cards.