Composable functions in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple composable function that displays "Hello World" text.

Android Kotlin

import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun Greeting() {
    Text(text = [1])
}

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

AText("Hello World")

BHello World

Ctext = "Hello World"

D"Hello World"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string

Passing the whole Text call inside Text

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

2fill in blank

medium

Complete the code to call the Greeting composable inside another composable function.

Android Kotlin

import androidx.compose.runtime.Composable

@Composable
fun MainScreen() {
    [1]()
}

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

AText

BGreeting

CsetContent

DButton

Attempts:

3 left

💡 Hint

Common Mistakes

Calling setContent inside a composable

Using UI elements like Button or Text instead of the composable name

To display the Greeting composable inside MainScreen, you call Greeting() inside it.

3fill in blank

hard

Fix the error in the composable function by completing the code to add a parameter for the name and display it.

Android Kotlin

import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, [1]!")
}

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

A$name

Buser

CName

D"name"

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the variable name inside quotes, making it a literal string

Using a different variable name not declared

To insert the parameter value inside the string, use the variable name without quotes inside the string template.

4fill in blank

hard

Fill the blank to create a composable that shows a button with a click action that updates a counter.

Android Kotlin

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.*

@Composable
fun Counter() {
    var count by [1]
    Button(onClick = { count++ }) {
        Text(text = "Clicked: $count")
    }
}

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

Aremember { mutableStateOf }

BmutableStateOf

Cremember { mutableStateOf(0) }

Dremember { mutableStateOf(0) }()

Attempts:

3 left

💡 Hint

Common Mistakes

Not using remember to keep state

Calling mutableStateOf without initial value

Incorrect lambda syntax for onClick

Use remember { mutableStateOf(0) } to create a state variable. The onClick lambda increments the count.

5fill in blank

hard

Fill all three blanks to create a composable that displays a list of names using a Column and Text composables.

Android Kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.material.Text
import androidx.compose.runtime.Composable

@Composable
fun NameList(names: List<String>) {
    Column {
        for (name in [1]) {
            Text(text = [2])
        }
    }
}

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

Anames

Bname

C"name"

DnamesList

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string literal "name" instead of the variable

Using a wrong variable name for the list

The for loop iterates over the names list, and each Text shows the current name variable.