Compose with existing Views (interop) in Android Kotlin - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Compose interop code?

Consider this Compose code embedding a traditional Android Button inside Compose. What will the user see and experience?

Android Kotlin

setContent {
  AndroidView(factory = { context ->
    Button(context).apply {
      text = "Click me"
      setOnClickListener { Toast.makeText(context, "Clicked!", Toast.LENGTH_SHORT).show() }
    }
  })
}

A A Compose Button with text 'Click me' but no click action happens on tap.

B A runtime crash because Button cannot be used inside Compose.

C A blank screen because AndroidView does not render inside Compose.

D A Compose UI showing a native Android Button labeled 'Click me' that shows a toast 'Clicked!' when tapped.

💡 Hint

AndroidView lets you embed classic Android Views inside Compose UI.

AndroidView creates and displays the native Android Button inside Compose. The button shows the text and responds to clicks by showing a toast.

❓ lifecycle

intermediate

What happens to the Android View lifecycle inside AndroidView in Compose?

When you use AndroidView in Compose to embed a View, which lifecycle event is guaranteed to be called when the Compose composable leaves the composition?

A The View remains attached and no lifecycle events are called.

B The View's onDestroy() method is called automatically.

C The View's onDetachedFromWindow() is called automatically.

D The View's onPause() method is called automatically.

💡 Hint

AndroidView manages the View lifecycle according to Compose's composition lifecycle.

When AndroidView leaves composition, the embedded View is removed from the view hierarchy, triggering onDetachedFromWindow().

📝 Syntax

advanced

Which code snippet correctly updates the Android View inside AndroidView when Compose state changes?

You want to update the text of an Android TextView inside AndroidView when a Compose state variable changes. Which snippet correctly does this?

Android Kotlin

var text by remember { mutableStateOf("Hello") }
AndroidView(factory = { context -> TextView(context) }, update = { it.text = text })

A AndroidView(factory = { context -> TextView(context) }, update = { it.text = text })

B AndroidView(factory = { context -> TextView(context).apply { text = text } })

C AndroidView(factory = { context -> TextView(context) }, update = { it.setText("Hello") })

D AndroidView(factory = { context -> TextView(context) }, update = { it.text = "Hello" })

💡 Hint

Use the update parameter to react to Compose state changes.

The update lambda runs every recomposition and updates the View with the current Compose state value.

🔧 Debug

advanced

Why does this AndroidView code cause a memory leak?

This code embeds a WebView inside Compose using AndroidView. Why might it cause a memory leak? AndroidView(factory = { context -> WebView(context) })

A Because WebView holds references to the context and is not properly destroyed when Compose disposes the AndroidView.

B Because AndroidView does not support WebView and crashes immediately.

C Because WebView requires a Fragment, not a Context, causing errors.

D Because Compose automatically destroys WebView causing null pointer exceptions.

💡 Hint

WebView needs explicit cleanup to avoid leaks.

WebView holds internal resources and references to the context. Without explicit cleanup (like calling destroy()), it can leak memory when Compose removes the AndroidView.

🧠 Conceptual

expert

What is the main benefit of using Compose with existing Views via AndroidView?

Why would a developer choose to embed existing Android Views inside Compose using AndroidView instead of rewriting the UI fully in Compose?

A Because Compose cannot create any UI elements on its own.

B To reuse existing complex Views or libraries without rewriting, enabling gradual migration to Compose.

C Because AndroidView automatically converts Views to Compose components for better performance.

D Because Compose requires all Views to be wrapped in AndroidView to display anything.

💡 Hint

Think about migration and reuse of legacy code.

AndroidView allows embedding existing Views so developers can reuse legacy UI or third-party Views while gradually adopting Compose.