Compose with existing Views (interop) in Android Kotlin - UI Render Trace

Component - Compose with existing Views (interop)

This UI component shows how to use Jetpack Compose together with traditional Android Views. It lets you put a classic Android Button inside a Compose layout, so you can reuse old UI parts while building new ones.

Widget Tree

ComposeView
└── Column
    ├── Text
    └── AndroidView
        └── Button

The root is a ComposeView hosting Compose content. Inside, a Column arranges a Text and an AndroidView vertically. The AndroidView wraps a classic Android Button, showing how Compose and Views work together.

Render Trace - 4 Steps

Step 1: ComposeView

Step 2: Column

Step 3: Text

Step 4: AndroidView

State Change - Re-render

Trigger:User clicks the Android Button

Before

Button shows label 'Click Me', no click count

→

After

Button click count increments, UI updates to show count

Re-renders:Entire ComposeView subtree re-renders to update displayed count

UI Quiz - 3 Questions

What does the AndroidView composable do in this UI?

A It replaces the Compose Column layout

B It creates a new Compose Text element

C It wraps a traditional Android View inside Compose UI

D It removes the ComposeView container

Key Insight

Using AndroidView inside Compose lets you reuse existing Android Views easily. This helps migrate apps gradually by mixing new Compose UI with old Views without rewriting everything at once.