Why advanced Compose creates rich UIs in Android Kotlin - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a simple text in Compose.

Android Kotlin

Text(text = [1])

Drag options to blanks, or click blank then click option'

A"Hello Compose!"

BHello Compose!

Ctext

DText

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing a variable name without quotes

The Text composable requires a string argument for the text parameter. It must be a string literal in quotes.

2fill in blank

medium

Complete the code to create a Column layout in Compose.

Android Kotlin

Column(modifier = Modifier.[1]()) {
    Text("Item 1")
    Text("Item 2")
}

Drag options to blanks, or click blank then click option'

Abackground

Bpadding

CfillMaxWidth

Dclickable

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding instead of fillMaxWidth

Using background which changes color but not size

fillMaxWidth() makes the Column fill the available width, helping layout the items vertically.

3fill in blank

hard

Fix the error in the code to make the Button clickable.

Android Kotlin

Button(onClick = [1]) {
    Text("Click me")
}

Drag options to blanks, or click blank then click option'

A{}

B{ println("Clicked") }

C"Clicked"

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a string instead of a lambda

Passing empty braces without code

Passing null

The onClick parameter expects a lambda function. Using { println("Clicked") } defines the action when the button is clicked.

4fill in blank

hard

Fill both blanks to create a Box with padding and background color.

Android Kotlin

Box(modifier = Modifier.[1](16.dp).[2](Color.Blue)) {
    Text("Box content")
}

Drag options to blanks, or click blank then click option'

Apadding

Bbackground

Cclickable

DfillMaxSize

Attempts:

3 left

💡 Hint

Common Mistakes

Using clickable instead of background

Using fillMaxSize instead of padding

padding(16.dp) adds space inside the Box edges, and background(Color.Blue) colors the Box background blue.

5fill in blank

hard

Fill all three blanks to create a LazyColumn with items and a modifier.

Android Kotlin

LazyColumn(modifier = Modifier.[1](), contentPadding = PaddingValues([3])) {
    items([2]) { item ->
        Text(text = item)
    }
}

Drag options to blanks, or click blank then click option'

AfillMaxSize

BlistOf("Apple", "Banana", "Cherry")

C16.dp

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding() as modifier

Passing a string instead of listOf

Using padding instead of PaddingValues

fillMaxSize() makes the list fill the screen. items(listOf(...)) provides the data to show. PaddingValues(16.dp) adds padding around the list content.