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.

Practice

1. What is the main purpose of using AndroidView in Jetpack Compose?

easy

A. To create animations in Compose

B. To convert Compose UI elements into XML layouts

C. To replace all Views with Compose components automatically

D. To embed traditional Android Views inside a Compose UI

Solution

1. Step 1: Understand AndroidView role

   AndroidView allows embedding existing Android Views inside Compose UI, enabling reuse of legacy UI parts.

2. Step 2: Compare options

   Creating animations, converting Compose UI elements into XML layouts, and automatically replacing all Views with Compose components do not describe embedding Views inside Compose. Only embedding traditional Android Views inside a Compose UI correctly states the purpose.

3. Final Answer:

   To embed traditional Android Views inside a Compose UI -> Option D

4. Quick Check:

   AndroidView = Embed Views in Compose [OK]

Hint: AndroidView puts Views inside Compose UI [OK]

Common Mistakes:

• Confusing AndroidView with ComposeView
• Thinking AndroidView converts Compose to XML
• Assuming AndroidView replaces Views automatically

2. Which of the following is the correct way to add a Compose UI inside an existing Android View hierarchy?

easy

A. Use AndroidView inside the View XML layout

B. Use ComposeView inside the View hierarchy

C. Replace the View with a Compose function directly

D. Use setContentView with Compose functions

Solution

1. Step 1: Identify ComposeView usage

   ComposeView is a View that hosts Compose UI inside a traditional View hierarchy.

2. Step 2: Eliminate wrong options

   Use AndroidView inside the View XML layout is wrong because AndroidView is for Compose to View embedding, not View XML. Replace the View with a Compose function directly is invalid as Views cannot be replaced directly by Compose functions. Use setContentView with Compose functions is for setting Compose as the whole content, not embedding.

3. Final Answer:

   Use ComposeView inside the View hierarchy -> Option B

4. Quick Check:

   ComposeView = Compose inside Views [OK]

Hint: ComposeView hosts Compose inside Views [OK]

Common Mistakes:

• Using AndroidView to embed Compose in Views
• Trying to replace Views with Compose functions directly
• Confusing setContentView with embedding Compose

3. What will be displayed when the following Compose code runs?

AndroidView(factory = { context ->
    Button(context).apply {
        text = "Click Me"
    }
})

medium

A. An empty space because Button is not a Compose component

B. A Compose Button with text "Click Me"

C. A traditional Android Button with text "Click Me" inside Compose

D. A runtime error because Button cannot be used inside AndroidView

Solution

1. Step 1: Analyze AndroidView factory

   The factory creates a traditional Android Button with text "Click Me" inside Compose UI.

2. Step 2: Understand output

   AndroidView embeds the View, so the Button is shown as a View inside Compose, not a Compose Button.

3. Final Answer:

   A traditional Android Button with text "Click Me" inside Compose -> Option C

4. Quick Check:

   AndroidView shows Views inside Compose [OK]

Hint: AndroidView shows Views, not Compose components [OK]

Common Mistakes:

• Thinking AndroidView creates Compose components
• Expecting runtime error for Button usage
• Confusing Android Button with Compose Button

4. Identify the error in this Compose code embedding a View:

AndroidView(factory = { context ->
    TextView(context).apply {
        setText("Hello")
    }
}) {
    text = "World"
}

medium

A. Cannot set text inside the trailing lambda; it should be inside factory

B. TextView does not exist in Android Views

C. Missing import for AndroidView

D. Factory lambda must return null

Solution

1. Step 1: Check AndroidView usage

   The trailing lambda is for updating the View, but text is not a Compose property; it should be set on the View inside the factory or update block.

2. Step 2: Identify correct usage

   Setting text outside the factory like this causes error because text is not recognized in that scope.

3. Final Answer:

   Cannot set text inside the trailing lambda; it should be inside factory -> Option A

4. Quick Check:

   Set View properties inside factory or update lambda [OK]

Hint: Set View properties inside factory or update lambda [OK]

Common Mistakes:

• Trying to set View properties directly in trailing lambda
• Assuming trailing lambda is Compose scope
• Ignoring factory return value requirements

5. You want to gradually migrate an app from Views to Compose. Which approach correctly mixes Compose and Views for a smooth transition?

hard

A. Use ComposeView to add Compose UI inside existing View layouts and AndroidView to add Views inside Compose screens

B. Rewrite all Views to Compose before running the app

C. Use only AndroidView everywhere to avoid Compose

D. Replace setContentView with Compose functions and remove all Views immediately

Solution

1. Step 1: Understand gradual migration

   Gradual migration means mixing Compose and Views without rewriting everything at once.

2. Step 2: Identify correct interop usage

   ComposeView embeds Compose inside Views; AndroidView embeds Views inside Compose. Using both allows smooth transition.

3. Step 3: Eliminate wrong options

   Rewriting all Views to Compose before running the app, using only AndroidView everywhere to avoid Compose, and replacing setContentView with Compose functions and removing all Views immediately are extreme or incorrect approaches that do not support gradual migration.

4. Final Answer:

   Use ComposeView to add Compose UI inside existing View layouts and AndroidView to add Views inside Compose screens -> Option A

5. Quick Check:

   ComposeView + AndroidView = smooth migration [OK]

Hint: Use ComposeView and AndroidView together for migration [OK]

Common Mistakes:

• Trying to rewrite entire app at once
• Using only AndroidView or only ComposeView
• Removing Views before Compose is ready