XML to Compose Migration

Overview

Systematically convert Android XML layouts to idiomatic Jetpack Compose, preserving functionality while embracing Compose patterns. This skill covers layout mapping, state migration, and incremental adoption strategies.

Workflow

1. Analyze the XML Layout

Identify the root layout type (ConstraintLayout, LinearLayout, FrameLayout, etc.).
List all View widgets and their key attributes.
Map data binding expressions (@{}) or view binding references.
Identify custom views that need special handling.
Note any include, merge, or ViewStub usage.

2. Plan the Migration

Decide: Full rewrite or incremental migration (using ComposeView/AndroidView).
Identify state sources (ViewModel, LiveData, savedInstanceState).
List reusable components to extract as separate Composables.
Plan navigation integration if using Navigation component.

3. Convert Layouts

Apply the layout mapping table below to convert each View to its Compose equivalent.

4. Migrate State

Convert LiveData observation to StateFlow collection or observeAsState().
Replace findViewById / ViewBinding with Compose state.
Convert click listeners to lambda parameters.

5. Test and Verify

Compare visual output between XML and Compose versions.
Test accessibility (content descriptions, touch targets).
Verify state preservation across configuration changes.

Layout Mapping Reference

Container Layouts

XML Layout	Compose Equivalent	Notes
`LinearLayout (vertical)`	`Column`	Use `Arrangement` and `Alignment`
`LinearLayout (horizontal)`	`Row`	Use `Arrangement` and `Alignment`
`FrameLayout`	`Box`	Children stack on top of each other
`ConstraintLayout`	`ConstraintLayout` (Compose)	Use `createRefs()` and `constrainAs`
`RelativeLayout`	`Box` or `ConstraintLayout`	Prefer Box for simple overlap
`ScrollView`	`Column` + `Modifier.verticalScroll()`	Or use `LazyColumn` for lists
`HorizontalScrollView`	`Row` + `Modifier.horizontalScroll()`	Or use `LazyRow` for lists
`RecyclerView`	`LazyColumn` / `LazyRow` / `LazyGrid`	Most common migration
`ViewPager2`	`HorizontalPager`	From accompanist or Compose Foundation
`CoordinatorLayout`	Custom + `Scaffold`	Use `TopAppBar` with scroll behavior
`NestedScrollView`	`Column` + `Modifier.verticalScroll()`	Prefer Lazy variants

Common Widgets

XML Widget	Compose Equivalent	Notes
`TextView`	`Text`	Use `style` → `TextStyle`
`EditText`	`TextField` / `OutlinedTextField`	Requires state hoisting
`Button`	`Button`	Use `onClick` lambda
`ImageView`	`Image`	Use `painterResource()` or Coil
`ImageButton`	`IconButton`	Use `Icon` inside
`CheckBox`	`Checkbox`	Requires `checked` + `onCheckedChange`
`RadioButton`	`RadioButton`	Use with `Row` for groups
`Switch`	`Switch`	Requires state hoisting
`ProgressBar (circular)`	`CircularProgressIndicator`
`ProgressBar (horizontal)`	`LinearProgressIndicator`
`SeekBar`	`Slider`	Requires state hoisting
`Spinner`	`DropdownMenu` + `ExposedDropdownMenuBox`	More complex pattern
`CardView`	`Card`	From Material 3
`Toolbar`	`TopAppBar`	Use inside `Scaffold`
`BottomNavigationView`	`NavigationBar`	Material 3
`FloatingActionButton`	`FloatingActionButton`	Use inside `Scaffold`
`Divider`	`HorizontalDivider` / `VerticalDivider`
`Space`	`Spacer`	Use `Modifier.size()`

Attribute Mapping

XML Attribute	Compose Modifier/Property
`android:layout_width="match_parent"`	`Modifier.fillMaxWidth()`
`android:layout_height="match_parent"`	`Modifier.fillMaxHeight()`
`android:layout_width="wrap_content"`	`Modifier.wrapContentWidth()` (usually implicit)
`android:layout_weight`	`Modifier.weight(1f)`
`android:padding`	`Modifier.padding()`
`android:layout_margin`	`Modifier.padding()` on parent, or use `Arrangement.spacedBy()`
`android:background`	`Modifier.background()`
`android:visibility="gone"`	Conditional composition (don't emit)
`android:visibility="invisible"`	`Modifier.alpha(0f)` (keeps space)
`android:clickable`	`Modifier.clickable { }`
`android:contentDescription`	`Modifier.semantics { contentDescription = "" }`
`android:elevation`	`Modifier.shadow()` or component's `elevation` param
`android:alpha`	`Modifier.alpha()`
`android:rotation`	`Modifier.rotate()`
`android:scaleX/Y`	`Modifier.scale()`
`android:gravity`	`Alignment` parameter or `Arrangement`
`android:layout_gravity`	`Modifier.align()`

Common Patterns

LinearLayout with Weights

<!-- XML -->
<LinearLayout android:orientation="horizontal">
    <View android:layout_weight="1" />
    <View android:layout_weight="2" />
</LinearLayout>

// Compose
Row(modifier = Modifier.fillMaxWidth()) {
    Box(modifier = Modifier.weight(1f))
    Box(modifier = Modifier.weight(2f))
}

RecyclerView to LazyColumn

<!-- XML -->
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

// Compose
LazyColumn(modifier = Modifier.fillMaxSize()) {
    items(items, key = { it.id }) { item ->
        ItemRow(item = item, onClick = { onItemClick(item) })
    }
}

EditText with Two-Way Binding

<!-- XML with Data Binding -->
<EditText
    android:text="@={viewModel.username}"
    android:hint="@string/username_hint" />

// Compose
val username by viewModel.username.collectAsState()

OutlinedTextField(
    value = username,
    onValueChange = { viewModel.updateUsername(it) },
    label = { Text(stringResource(R.string.username_hint)) },
    modifier = Modifier.fillMaxWidth()
)

ConstraintLayout Migration

<!-- XML -->
<androidx.constraintlayout.widget.ConstraintLayout>
    <TextView
        android:id="@+id/title"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <TextView
        android:id="@+id/subtitle"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintStart_toStartOf="@id/title" />
</androidx.constraintlayout.widget.ConstraintLayout>

// Compose
ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
    val (title, subtitle) = createRefs()
    
    Text(
        text = "Title",
        modifier = Modifier.constrainAs(title) {
            top.linkTo(parent.top)
            start.linkTo(parent.start)
        }
    )
    Text(
        text = "Subtitle", 
        modifier = Modifier.constrainAs(subtitle) {
            top.linkTo(title.bottom)
            start.linkTo(title.start)
        }
    )
}

Include / Merge → Extract Composable

<!-- XML: layout_header.xml -->
<merge>
    <ImageView android:id="@+id/avatar" />
    <TextView android:id="@+id/name" />
</merge>

<!-- Usage -->
<include layout="@layout/layout_header" />

// Compose: Extract as a reusable Composable
@Composable
fun HeaderSection(
    avatarUrl: String,
    name: String,
    modifier: Modifier = Modifier
) {
    Row(modifier = modifier) {
        AsyncImage(model = avatarUrl, contentDescription = null)
        Text(text = name)
    }
}

// Usage
HeaderSection(avatarUrl = user.avatar, name = user.name)

Incremental Migration (Interop)

Embedding Compose in XML

<!-- In your XML layout -->
<androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

// In Fragment/Activity
binding.composeView.setContent {
    MaterialTheme {
        MyComposable()
    }
}

Embedding XML Views in Compose

// Use AndroidView for Views that don't have Compose equivalents
@Composable
fun MapViewComposable(modifier: Modifier = Modifier) {
    AndroidView(
        factory = { context ->
            MapView(context).apply {
                // Initialize the view
            }
        },
        update = { mapView ->
            // Update the view when state changes
        },
        modifier = modifier
    )
}

State Migration

LiveData to Compose

// Before: Observing in Fragment
viewModel.uiState.observe(viewLifecycleOwner) { state ->
    binding.title.text = state.title
}

// After: Collecting in Compose
@Composable
fun MyScreen(viewModel: MyViewModel = hiltViewModel()) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
    
    Text(text = uiState.title)
}

Click Listeners

// Before: XML + setOnClickListener
binding.submitButton.setOnClickListener {
    viewModel.submit()
}

// After: Lambda in Compose
Button(onClick = { viewModel.submit() }) {
    Text("Submit")
}

xml-to-compose-migration