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.