Xml To Compose Migration

3. Convert Layouts

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

4. Migrate State

• Convert LiveData → StateFlow + collectAsStateWithLifecycle()
• Replace findViewById / ViewBinding references with Compose state
• Convert click listeners to lambda parameters passed down from the screen composable

5. Test and Verify

• Compare visual output between XML and Compose versions
• Test accessibility (content descriptions, touch targets, TalkBack traversal)
• Verify state survives configuration changes (rememberSaveable where needed)

Layout Mapping

Container Layouts

Common Widgets

Attribute Mapping

Common Migration Patterns

RecyclerView → LazyColumn

// Before: XML RecyclerView + Adapter
<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

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

LiveData → StateFlow

// Before: LiveData in ViewModel
val userName: LiveData<String> = MutableLiveData("Alice")

// After: StateFlow in ViewModel
private val _userName = MutableStateFlow("Alice")
val userName: StateFlow<String> = _userName.asStateFlow()

// In composable:
val name by viewModel.userName.collectAsStateWithLifecycle()

ViewBinding click listener → lambda

// Before: ViewBinding
binding.loginButton.setOnClickListener {
    viewModel.onLoginClicked(binding.emailInput.text.toString())
}

// After: Compose — state hoisted to screen, events flow up
LoginScreen(
    uiState = uiState,
    onLoginClick = viewModel::onLoginClicked
)

@Composable
fun LoginScreen(
    uiState: LoginUiState,
    onLoginClick: (String) -> Unit
) {
    var email by remember { mutableStateOf("") }
    TextField(value = email, onValueChange = { email = it })
    Button(onClick = { onLoginClick(email) }) { Text("Log in") }
}

Incremental migration with ComposeView

For large apps, migrate one screen at a time using ComposeView inside the existing XML Activity/Fragment:

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

// In Activity or Fragment
val composeView = findViewById<ComposeView>(R.id.compose_view)
composeView.setViewCompositionStrategy(
    ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed
)
composeView.setContent {
    AppTheme {
        MyMigratedScreen(viewModel = viewModel())
    }
}

Always set ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed in Fragments to avoid state leaks.

Gotchas