Compose with existing Views (interop) in Android Kotlin

Introduction

Sometimes you want to use new Compose UI together with old Android Views. This helps you add new features without rewriting everything.

You want to add a Compose button inside a screen built with XML layouts.

You have a custom Android View and want to show it inside a Compose screen.

You want to gradually migrate your app from Views to Compose without big changes.

You need to reuse existing View-based UI components inside Compose.

You want to mix Compose and Views for better flexibility in your app UI.

Syntax

Android Kotlin

/* To use Compose inside Views (XML or ViewGroup): */
val composeView = ComposeView(context).apply {
  setContent {
    // Compose UI here
  }
}

/* To use Views inside Compose: */
AndroidView(factory = { context ->
  TextView(context).apply {
    text = "Hello from View"
  }
})

ComposeView lets you put Compose UI inside traditional Views.

AndroidView lets you put Android Views inside Compose UI.

Examples

This creates a ComposeView in a View-based screen and shows a Compose Text inside it.

Android Kotlin

val composeView = ComposeView(context).apply {
  setContent {
    Text("Hello Compose inside View")
  }
}

This shows a classic Android Button inside a Compose UI.

Android Kotlin

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

Use AndroidView to embed an EditText (text input) inside Compose.

Android Kotlin

AndroidView(factory = { context ->
  EditText(context).apply {
    hint = "Enter text"
  }
})

Sample App

This app screen shows a Compose Text and below it an Android View TextView inside Compose using AndroidView.

Android Kotlin

import android.os.Bundle
import android.widget.TextView
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.platform.ComposeView
import androidx.compose.ui.viewinterop.AndroidView

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      Column {
        Text(text = "This is Compose Text")
        AndroidView(factory = { context ->
          TextView(context).apply {
            text = "This is Android View TextView"
            textSize = 20f
          }
        })
      }
    }
  }
}

Important Notes

Remember to manage lifecycle properly when mixing Views and Compose.

AndroidView can be used to wrap any existing View, including custom Views.

ComposeView can be added to XML layouts or ViewGroups to show Compose UI.

Summary

You can mix Compose and Views using ComposeView and AndroidView.

This helps migrate apps gradually or reuse existing UI parts.

Use ComposeView to put Compose inside Views, and AndroidView to put Views inside Compose.