Why Compose is the modern UI toolkit in Android Kotlin - Build It to Prove It

Build: Compose Introduction

This screen explains why Jetpack Compose is the modern UI toolkit for Android development. It shows key reasons in a simple list format.

Target UI

----------------------------------
| Compose Introduction           |
|-------------------------------|
| Why Compose?                  |
| - Declarative UI              |
| - Less Code                  |
| - Kotlin Integration         |
| - Fast UI Updates            |
| - Easy Theming               |
|                               |
| [Close]                      |
----------------------------------

Display a top app bar with the title 'Compose Introduction'.

Show a vertical list of reasons why Compose is modern.

Each reason should be a separate Text item with a bullet point.

Add a button labeled 'Close' at the bottom that closes the screen.

Use Compose UI elements only (no XML layouts).

Starter Code

Android Kotlin

import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ComposeIntroductionScreen(onClose: () -> Unit) {
    Scaffold(
        topBar = {
            // TODO: Add TopAppBar with title
        },
        content = { paddingValues ->
            Column(
                modifier = Modifier
                    .padding(paddingValues)
                    .padding(16.dp)
            ) {
                // TODO: Add reasons list here
                Spacer(modifier = Modifier.weight(1f))
                // TODO: Add Close button here
            }
        }
    )
}

@Preview(showBackground = true)
@Composable
fun PreviewComposeIntroductionScreen() {
    ComposeIntroductionScreen(onClose = {})
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.foundation.layout.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ComposeIntroductionScreen(onClose: () -> Unit) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Compose Introduction") }
            )
        },
        content = { paddingValues ->
            Column(
                modifier = Modifier
                    .padding(paddingValues)
                    .padding(16.dp)
                    .fillMaxSize()
            ) {
                Text("Why Compose?", style = MaterialTheme.typography.titleMedium)
                Spacer(modifier = Modifier.height(12.dp))
                val reasons = listOf(
                    "Declarative UI",
                    "Less Code",
                    "Kotlin Integration",
                    "Fast UI Updates",
                    "Easy Theming"
                )
                reasons.forEach { reason ->
                    Text("- $reason", style = MaterialTheme.typography.bodyLarge, modifier = Modifier.padding(vertical = 4.dp))
                }
                Spacer(modifier = Modifier.weight(1f))
                Button(
                    onClick = onClose,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Text("Close")
                }
            }
        }
    )
}

@Preview(showBackground = true)
@Composable
fun PreviewComposeIntroductionScreen() {
    ComposeIntroductionScreen(onClose = {})
}

This screen uses Jetpack Compose to build the UI entirely in Kotlin code without XML.

The Scaffold provides a basic layout with a TopAppBar showing the screen title.

The main content is a Column with a title text, a list of reasons displayed as bullet points, and a Button labeled 'Close' at the bottom.

The button calls the onClose callback when clicked, allowing the screen to be closed or navigated away.

This example highlights Compose's declarative style and Kotlin integration, showing why it is modern and concise.

Final Result

Completed Screen

----------------------------------
| Compose Introduction           |
|-------------------------------|
| Why Compose?                  |
| - Declarative UI              |
| - Less Code                  |
| - Kotlin Integration         |
| - Fast UI Updates            |
| - Easy Theming               |
|                               |
| [Close]                      |
----------------------------------

User sees a list of reasons why Compose is modern.

User taps the 'Close' button to exit the screen.

Stretch Goal

Add a dark mode toggle switch in the top app bar that changes the screen theme between light and dark.

💡 Hint

Use a state variable to track dark mode and apply MaterialTheme with darkColors or lightColors accordingly.

Practice

1. Why is Jetpack Compose considered the modern UI toolkit for Android development?

easy

A. Because it uses simple Kotlin functions called composables to build UI

B. Because it requires XML layouts for UI design

C. Because it only supports older Android devices

D. Because it increases boilerplate code for UI

Solution

1. Step 1: Understand Compose UI building blocks

   Compose uses Kotlin functions called composables to create UI elements, making UI code simpler and more readable.

2. Step 2: Compare with traditional UI methods

   Traditional Android UI uses XML layouts, which are more verbose and separate from Kotlin code.

3. Final Answer:

   Because it uses simple Kotlin functions called composables to build UI -> Option A

4. Quick Check:

   Compose uses composables [OK]

Hint: Remember Compose uses Kotlin functions, not XML, for UI [OK]

Common Mistakes:

• Thinking Compose requires XML layouts
• Believing Compose only supports old devices
• Assuming Compose increases code complexity

2. Which of the following is the correct way to declare a composable function in Jetpack Compose?

easy

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

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

C. @Composable MyUI() { Text("Hello") }

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

Solution

1. Step 1: Recall Compose function syntax

   Composable functions must be annotated with @Composable before the fun keyword.

2. Step 2: Check each option for correct annotation placement

   @Composable fun MyUI() { Text("Hello") } correctly places @Composable before fun; others have syntax errors or misplaced annotations.

3. Final Answer:

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

4. Quick Check:

   @Composable annotation before fun [OK]

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

Common Mistakes:

• Omitting @Composable annotation
• Placing @Composable after fun keyword
• Using incorrect function syntax

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

@Composable
fun Greeting() {
  Text(text = "Hello, Compose!")
}

medium

A. Text showing 'Hello, World!'

B. A blank screen

C. A runtime error due to missing setContent

D. Text showing 'Hello, Compose!'

Solution

1. Step 1: Understand the composable function output

   The Greeting composable displays a Text element with the string "Hello, Compose!".

2. Step 2: Consider the code snippet's behavior

   When called inside setContent, it will render the exact text "Hello, Compose!" on screen.

3. Final Answer:

   Text showing 'Hello, Compose!' -> Option D

4. Quick Check:

   Text composable shows given string [OK]

Hint: Text composable displays the exact string passed [OK]

Common Mistakes:

• Assuming default text 'Hello, World!' is shown
• Thinking code runs without setContent
• Expecting blank screen without UI

4. Identify the error in this Compose code snippet:

@Composable
fun Welcome() {
  Text("Welcome to Compose")
  Button(onClick = { /*TODO*/ })
}

medium

A. Text composable cannot be used inside a function

B. Button requires a content parameter to display text

C. onClick lambda must return a value

D. Composable functions cannot have multiple UI elements

Solution

1. Step 1: Review Button composable usage

   Button requires a content lambda to specify what is shown inside the button, like text.

2. Step 2: Check the given code

   The Button call lacks content, so it will cause a compile error.

3. Final Answer:

   Button requires a content parameter to display text -> Option B

4. Quick Check:

   Button needs content lambda [OK]

Hint: Button always needs content inside curly braces [OK]

Common Mistakes:

• Omitting Button content lambda
• Thinking Text can't be inside composables
• Expecting onClick to return a value

5. You want to create a list of items in Compose that updates automatically when data changes. Which Compose feature helps achieve this modern UI behavior?

hard

A. Using static Text composables without recomposition

B. Using XML RecyclerView with adapters

C. Using mutableStateListOf to hold the list and observe changes

D. Using plain Kotlin lists without state management

Solution

1. Step 1: Understand Compose state management

   Compose uses state holders like mutableStateListOf to track data changes and trigger UI updates automatically.

2. Step 2: Compare options for dynamic UI updates

   Using mutableStateListOf to hold the list and observe changes uses Compose's reactive state; options A, B, and C do not support automatic UI updates in Compose.

3. Final Answer:

   Using mutableStateListOf to hold the list and observe changes -> Option C

4. Quick Check:

   Compose state holders enable auto UI updates [OK]

Hint: Use Compose state holders like mutableStateListOf for dynamic lists [OK]

Common Mistakes:

• Using XML RecyclerView in Compose projects
• Using plain lists without state triggers
• Expecting static Text to update automatically