Compose with existing Views (interop) in Android Kotlin - Mini App: Build & Ship

Build: ComposeInteropScreen

A screen that shows a Compose UI with a traditional Android Button inside it using interop.

Target UI

-------------------------
| ComposeInteropScreen   |
|-----------------------|
|                       |
|  [Compose Text Here]   |
|                       |
|  [Android Button]      |
|                       |
-------------------------

Use Compose to create a screen with a Text composable displaying 'Hello from Compose!'

Below the Text, embed a traditional Android Button using AndroidView interop.

The Button should have the label 'Click Me' and show a Toast message 'Button clicked!' when tapped.

Starter Code

Android Kotlin

import android.os.Bundle
import android.widget.Button
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView

class ComposeInteropScreen : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      ComposeInteropContent()
    }
  }
}

@Composable
fun ComposeInteropContent() {
  val context = LocalContext.current
  Column(modifier = Modifier.padding(16.dp)) {
    Text(text = "Hello from Compose!")
    // TODO: Add AndroidView with Button here
  }
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import android.os.Bundle
import android.widget.Button
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import androidx.compose.ui.viewinterop.AndroidView

class ComposeInteropScreen : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      ComposeInteropContent()
    }
  }
}

@Composable
fun ComposeInteropContent() {
  val context = LocalContext.current
  Column(modifier = Modifier.padding(16.dp)) {
    Text(text = "Hello from Compose!")
    AndroidView(factory = { ctx ->
      Button(ctx).apply {
        text = "Click Me"
        setOnClickListener {
          Toast.makeText(ctx, "Button clicked!", Toast.LENGTH_SHORT).show()
        }
      }
    }, modifier = Modifier.padding(top = 16.dp))
  }
}

This solution uses the AndroidView composable to embed a traditional Android Button inside a Compose layout.

The factory lambda creates the Button and sets its label to "Click Me".

We add a click listener to show a Toast message when the button is tapped.

This shows how Compose can interoperate with existing Android Views easily.

Final Result

Completed Screen

-------------------------
| ComposeInteropScreen   |
|-----------------------|
|                       |
|  Hello from Compose!   |
|                       |
|  [Click Me Button]     |
|                       |
-------------------------

When user taps the 'Click Me' button, a Toast message 'Button clicked!' appears briefly at the bottom.

Stretch Goal

Add a second Android Button below the first that changes the Compose Text to 'Button 2 clicked!' when tapped.

💡 Hint

Use a Compose state variable to hold the text and update it inside the second Button's onClickListener.