Compose with existing Views (interop) in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a traditional Android Button inside a Compose UI using AndroidView.

Android Kotlin

AndroidView(factory = { context ->
    val button = Button(context)
    button.text = "Click me"
    button.setOnClickListener { /* handle click */ }
    [1]
})

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

Abutton

Bcontext

Cthis

Dview

Attempts:

3 left

💡 Hint

Common Mistakes

Returning context or this instead of the button.

Not returning anything from the factory lambda.

The AndroidView factory must return the Android View to be displayed. Here, returning button shows the Button inside Compose.

2fill in blank

medium

Complete the code to update the Android TextView's text inside AndroidView's update block.

Android Kotlin

AndroidView(factory = { context ->
    TextView(context).apply { text = "Hello" }
}, update = { textView ->
    textView.[1] = "Updated Text"
})

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

Atext

BsetText()

CcontentDescription

Dhint

Attempts:

3 left

💡 Hint

Common Mistakes

Using setText() as a property instead of a method.

Trying to set contentDescription instead of text.

The text property of TextView sets the displayed text. Using textView.text = "Updated Text" updates the text inside Compose.

3fill in blank

hard

Fix the error in the code to correctly add a SeekBar inside Compose using AndroidView.

Android Kotlin

AndroidView(factory = { context ->
    val seekBar = SeekBar(context)
    seekBar.max = 100
    seekBar.progress = 50
    [1]
})

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

Areturn seekBar

BseekBar

Creturn@factory seekBar

DseekBar.toString()

Attempts:

3 left

💡 Hint

Common Mistakes

Just writing 'seekBar' without return keyword.

Using 'return seekBar' without label causes error in lambdas.

Returning a string instead of the View.

In Kotlin lambdas with labels, return@factory seekBar explicitly returns the SeekBar from the factory lambda, which is required here.

4fill in blank

hard

Fill both blanks to create an Android EditText with a hint and update its text inside Compose.

Android Kotlin

AndroidView(factory = { context ->
    EditText(context).apply {
        [1] = "Enter name"
    }
}, update = { editText ->
    editText.[2] = "John Doe"
})

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

Ahint

Btext

CsetText()

DcontentDescription

Attempts:

3 left

💡 Hint

Common Mistakes

Using setText() instead of text for the update block.

Using contentDescription instead of hint.

The hint property sets the placeholder text in EditText. To update the text, use the text property inside the update block.

5fill in blank

hard

Fill all three blanks to create an Android CheckBox with a label, set its checked state, and update it inside Compose.

Android Kotlin

AndroidView(factory = { context ->
    CheckBox(context).apply {
        text = [1]
        isChecked = [2]
    }
}, update = { checkBox ->
    checkBox.isChecked = [3]
})

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

A"Accept Terms"

BTrue

CFalse

D"Check me"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes incorrectly around the label text.

Mixing true and false values for initial and updated checked state.

The CheckBox label is set with the text property. The initial checked state is set with isChecked. Inside update, you can change isChecked to update the UI.