Interop and Migration

AndroidView, ComposeView and Migrating a Screen Incrementally

Few teams rewrite a View-based app at once, so Compose 234 interoperates both ways. AndroidView puts a classic View into a composition: a map, a chart, or the RatingBar, which has no Compose equivalent.

ui/LegacyRatingBar.kt: a View-system widget inside Compose (imports omitted)Kotlin

@Composable
fun LegacyRatingBar(rating: Double, modifier: Modifier = Modifier) = AndroidView(
  factory = { context -> RatingBar(context, null, android.R.attr.ratingBarStyleSmall) },
  update = { bar -> bar.rating = rating.toFloat() },   // reruns for each new rating
  modifier = modifier,
)

factory builds the View once; update bridges Compose values to imperative setters. In a LazyColumn, also pass onReset so rows can recycle the View. The reverse, ComposeView, is a View hosting a composition, placed in XML like any widget. activity_legacy.xml puts one under its TextView:

LegacyActivity.kt: Compose inside a View layout (excerpt)Kotlin

findViewById<ComposeView>(R.id.compose_cards).apply {
  setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
  setContent {
    MaterialTheme {
      Column { books.take(3).forEach { BookCard(it, Modifier.padding(top = 8.dp)) } }
    }
  }
}

The strategy decides when the composition is disposed: the default, DisposeOnDetachedFromWindowOrReleasedFromPool, suits RecyclerView items; Fragments want DisposeOnViewTreeLifecycleDestroyed. Migrate leaf first: new components enter old screens via ComposeView, whole screens follow, and Navigation Compose 234 (Navigation Compose) replaces Fragment transactions last. The first two screens in First Screen's figure show both directions running.

MENU