xml-to-compose-migration

XML to Compose Migration

Systematically convert Android XML layouts to idiomatic Jetpack Compose, preserving functionality while embracing Compose patterns.

Workflow

1. Analyse 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 ViewBinding references
• Identify custom views that need special handling
• Note any include, merge, or ViewStub usage

2. Plan the Migration

• Decide: full rewrite or incremental (embedding Compose into existing XML via ComposeView)
• Identify state sources (ViewModel, LiveData, savedInstanceState)
• List reusable components to extract as separate composables
• Plan navigation integration if the screen uses the Navigation component

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

XML	Compose	Notes
LinearLayout (vertical)	Column	Use Arrangement and Alignment
LinearLayout (horizontal)	Row	Use Arrangement and Alignment
FrameLayout	Box	Children stack; last child is on top
ConstraintLayout	ConstraintLayout (Compose)	Use createRefs() and constrainAs
RelativeLayout	Box or ConstraintLayout	Prefer Box for simple overlap
ScrollView	Column + Modifier.verticalScroll()	Use LazyColumn for lists
HorizontalScrollView	Row + Modifier.horizontalScroll()	Use LazyRow for lists
RecyclerView	LazyColumn / LazyRow / LazyVerticalGrid	Most common migration
ViewPager2	HorizontalPager	From androidx.compose.foundation
CoordinatorLayout + AppBarLayout	Scaffold + TopAppBar with scrollBehavior
NestedScrollView	Column + Modifier.verticalScroll()	Prefer LazyColumn for large content

Common Widgets

XML	Compose	Notes
TextView	Text	Map style → TextStyle
EditText	TextField / OutlinedTextField	Requires state hoisting
Button	Button	Use onClick lambda
ImageView	Image (local) / AsyncImage (remote)	Use Coil for URLs
ImageButton	IconButton	Wrap Icon inside
CheckBox	Checkbox	Requires checked + onCheckedChange
RadioButton	RadioButton in a Column	Manage selected state externally
Switch	Switch	Requires state hoisting
ProgressBar (circular)	CircularProgressIndicator
ProgressBar (horizontal)	LinearProgressIndicator
SeekBar	Slider	Requires state hoisting
Spinner	ExposedDropdownMenuBox + DropdownMenuItem	More explicit pattern
CardView	Card	Material 3
Toolbar	TopAppBar	Inside Scaffold
BottomNavigationView	NavigationBar	Material 3
NavigationView (drawer)	ModalNavigationDrawer	Material 3
FloatingActionButton	FloatingActionButton	Inside Scaffold
Divider	HorizontalDivider / VerticalDivider
Space	Spacer + Modifier.size()

Attribute Mapping

XML Attribute	Compose Equivalent
layout_width="match_parent"	Modifier.fillMaxWidth()
layout_height="match_parent"	Modifier.fillMaxHeight()
layout_width="wrap_content"	Default (implicit)
layout_weight	Modifier.weight(1f)
android:padding	Modifier.padding()
android:layout_margin	Modifier.padding() on parent, or Arrangement.spacedBy()
android:background	Modifier.background()
visibility="gone"	Conditional composition — don't emit the composable
visibility="invisible"	Modifier.alpha(0f) — keeps the space
android:clickable	Modifier.clickable { }
android:contentDescription	contentDescription parameter or Modifier.semantics
android:elevation	Modifier.shadow() or component elevation param
android:alpha	Modifier.alpha()
android:rotation	Modifier.rotate()
android:scaleX/Y	Modifier.scale()
android:gravity	Alignment / Arrangement parameters
android:textSize	fontSize in TextStyle
android:textColor	color in Text()
android:textStyle="bold"	fontWeight = FontWeight.Bold
android:maxLines	maxLines parameter in Text
android:ellipsize	overflow = TextOverflow.Ellipsis

---

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

Pitfall	Fix
visibility="gone" equivalent	Don't emit the composable at all — if (isVisible) { MyComposable() }
drawableLeft / drawableRight on TextView	Compose Row with Icon + Text
include / merge tags	Extract as a composable function
ViewStub (lazy inflation)	Conditional composable wrapped in if
savedInstanceState in Fragment	rememberSaveable in composable
Shared element transitions between Activities	Compose shared element transitions (sharedElement modifier, Navigation 2.8+)
Custom View subclass	Wrap in AndroidView initially; rewrite to composable over time