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.

Practice

1. What is the main reason advanced Compose helps create rich UIs in Android apps?

easy

A. It disables user interaction to improve performance.

B. It uses XML layouts for faster rendering.

C. It requires less memory by avoiding state management.

D. It combines simple composable functions to build complex interfaces.

Solution

1. Step 1: Understand composable functions in Compose

   Compose uses small building blocks called composable functions to create UI elements.

2. Step 2: Combine composables for rich UI

   By combining these simple composables, developers can build complex and rich user interfaces easily.

3. Final Answer:

   It combines simple composable functions to build complex interfaces. -> Option D

4. Quick Check:

   Composable functions combine [OK]

Hint: Remember Compose builds UI by combining small pieces [OK]

Common Mistakes:

• Confusing Compose with XML layouts
• Thinking Compose disables interaction
• Ignoring the role of composable functions

2. Which of the following is the correct syntax to create a simple composable function in Kotlin Compose?

easy

A. @Composable fun Greeting() { Text("Hello") }

B. fun Greeting() { Text("Hello") }

C. @Composable Greeting() { Text('Hello') }

D. fun @Composable Greeting() { Text(\"Hello\") }

Solution

1. Step 1: Identify the correct annotation placement

   In Compose, composable functions must be marked with @Composable before the function keyword.

2. Step 2: Check function syntax

   The correct syntax is '@Composable fun FunctionName() { ... }' with double quotes for strings.

3. Final Answer:

   @Composable fun Greeting() { Text("Hello") } -> Option A

4. Quick Check:

   @Composable before fun [OK]

Hint: Always put @Composable before fun keyword [OK]

Common Mistakes:

• Omitting @Composable annotation
• Placing @Composable after fun
• Using single quotes for strings in Kotlin

3. What will be displayed when this Compose code runs?

@Composable
fun Counter() {
  var count by remember { mutableStateOf(0) }
  Button(onClick = { count++ }) {
    Text("Clicked: $count times")
  }
}

medium

A. A button showing 'Clicked: 0 times' that updates count on each click.

B. A static text 'Clicked: 0 times' with no updates on click.

C. A button that crashes because count is immutable.

D. A button showing 'Clicked: 1 times' initially.

Solution

1. Step 1: Understand state usage with remember and mutableStateOf

   The variable count is mutable and remembered across recompositions, starting at 0.

2. Step 2: Analyze button click behavior

   Each click increments count by 1, triggering recomposition and updating the displayed text.

3. Final Answer:

   A button showing 'Clicked: 0 times' that updates count on each click. -> Option A

4. Quick Check:

   remember + mutableStateOf updates UI [OK]

Hint: remember + mutableStateOf means UI updates on state change [OK]

Common Mistakes:

• Thinking count is immutable
• Expecting initial count to be 1
• Ignoring recomposition on state change

4. Identify the error in this Compose code snippet:

@Composable
fun Greeting(name: String) {
  Text("Hello, name")
}

medium

A. The parameter name should be nullable.

B. The Text composable should use string interpolation to show the name.

C. The function is missing the @Composable annotation.

D. Text composable cannot be used inside functions.

Solution

1. Step 1: Check string usage inside Text composable

   The string "Hello, name" is literal and does not show the variable value.

2. Step 2: Correct string interpolation syntax

   Use "Hello, $name" to insert the variable's value inside the string.

3. Final Answer:

   The Text composable should use string interpolation to show the name. -> Option B

4. Quick Check:

   Use $variable for string interpolation [OK]

Hint: Use $variable inside strings to show values [OK]

Common Mistakes:

• Using literal strings instead of interpolation
• Forgetting @Composable annotation
• Assuming Text can't be used in functions

5. How can advanced Compose help create a responsive UI that adapts to screen size changes?

hard

A. By disabling recomposition to avoid layout changes.

B. By hardcoding fixed pixel sizes for all UI elements.

C. By using modifiers like fillMaxWidth() and responsive layouts with Box and Column.

D. By using only Text composables without layout containers.

Solution

1. Step 1: Understand Compose modifiers for layout

   Modifiers like fillMaxWidth() allow UI elements to expand and adapt to available space.

2. Step 2: Use layout containers for responsive design

   Containers like Box and Column help arrange elements flexibly for different screen sizes.

3. Final Answer:

   By using modifiers like fillMaxWidth() and responsive layouts with Box and Column. -> Option C

4. Quick Check:

   Modifiers + layout containers = responsive UI [OK]

Hint: Use fillMaxWidth() and layout containers for responsiveness [OK]

Common Mistakes:

• Hardcoding pixel sizes causing poor scaling
• Disabling recomposition which breaks UI updates
• Ignoring layout containers for arrangement