XML to Compose Migration

What This Skill Provides

The XML to Compose Migration skill helps you systematically convert Android XML layouts to Jetpack Compose while preserving functionality and embracing modern Compose patterns. This includes layout mapping, state migration, and incremental adoption strategies.

When to Use This Skill

Migrating existing XML-based UI to Compose
Converting Views to Composables
Modernizing legacy Android UI code
Planning incremental Compose adoption
Understanding View-to-Compose equivalents

Migration 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 layout mappings 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

LinearLayout
FrameLayout
RecyclerView

XML

<LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!-- Children -->
</LinearLayout>

Compose

Column(
    modifier = Modifier.fillMaxWidth(),
    verticalArrangement = Arrangement.Top,
    horizontalAlignment = Alignment.Start
) {
    // Children
}

XML

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- Stacked children -->
</FrameLayout>

Compose

Box(
    modifier = Modifier.fillMaxSize()
) {
    // Stacked children
}

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)
    }
}

Common Widgets

TextView
EditText
Button
ImageView

XML

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello World"
    android:textSize="18sp" />

Compose

Text(
    text = "Hello World",
    style = MaterialTheme.typography.bodyLarge
)

XML

<EditText
    android:id="@+id/usernameInput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Username" />

Compose

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    modifier = Modifier.fillMaxWidth()
)

XML

<Button
    android:id="@+id/submitButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Submit" />

Compose

Button(onClick = { /* Handle click */ }) {
    Text("Submit")
}

XML

<ImageView
    android:id="@+id/profileImage"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:src="@drawable/profile" />

Compose

Image(
    painter = painterResource(R.drawable.profile),
    contentDescription = "Profile picture",
    modifier = Modifier.size(48.dp)
)

Quick Reference Table

XML Widget	Compose Equivalent	Notes
`TextView`	`Text`	Use `style` parameter
`EditText`	`TextField` / `OutlinedTextField`	Requires state hoisting
`Button`	`Button`	Use `onClick` lambda
`ImageView`	`Image`	Use `painterResource()` or Coil
`CheckBox`	`Checkbox`	Requires state hoisting
`Switch`	`Switch`	Requires state hoisting
`ProgressBar`	`CircularProgressIndicator`	For circular variant
`RecyclerView`	`LazyColumn` / `LazyRow`	Most common migration
`CardView`	`Card`	Material 3 component
`Toolbar`	`TopAppBar`	Use inside `Scaffold`

Attribute Mapping

Layout Attributes

<View
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

<LinearLayout android:orientation="horizontal">
    <View
        android:layout_width="0dp"
        android:layout_weight="1" />
    <View
        android:layout_width="0dp"
        android:layout_weight="2" />
</LinearLayout>

Visual Attributes

XML Attribute	Compose Modifier
`android:padding`	`Modifier.padding()`
`android:layout_margin`	`Modifier.padding()` on parent
`android:background`	`Modifier.background()`
`android:visibility="gone"`	Conditional composition
`android:visibility="invisible"`	`Modifier.alpha(0f)`
`android:clickable`	`Modifier.clickable { }`
`android:elevation`	`Modifier.shadow()`
`android:alpha`	`Modifier.alpha()`
`android:rotation`	`Modifier.rotate()`

Visibility Mappingandroid:visibility="gone" → Remove from composition entirely (don’t render)android:visibility="invisible" → Modifier.alpha(0f) (keeps space but invisible)

Common Migration Patterns

LinearLayout with Weights

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Left" />
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="Right" />
</LinearLayout>

RecyclerView to LazyColumn

class MyFragment : Fragment() {
    private lateinit var binding: FragmentMyBinding
    private lateinit var adapter: MyAdapter
    
    override fun onCreateView(...): View {
        binding = FragmentMyBinding.inflate(inflater)
        adapter = MyAdapter()
        binding.recyclerView.adapter = adapter
        
        viewModel.items.observe(viewLifecycleOwner) { items ->
            adapter.submitList(items)
        }
        
        return binding.root
    }
}

EditText with Two-Way Binding

<EditText
    android:text="@={viewModel.username}"
    android:hint="@string/username_hint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

ConstraintLayout Migration

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <TextView
        android:id="@+id/title"
        android:text="Title"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
    <TextView
        android:id="@+id/subtitle"
        android:text="Subtitle"
        app:layout_constraintTop_toBottomOf="@id/title"
        app:layout_constraintStart_toStartOf="@id/title" />
</androidx.constraintlayout.widget.ConstraintLayout>

For simple vertical/horizontal layouts, prefer Column/Row over ConstraintLayout in Compose for better performance.

Include / Merge to Composable

<!-- layout_header.xml -->
<merge>
    <ImageView
        android:id="@+id/avatar"
        android:layout_width="48dp"
        android:layout_height="48dp" />
    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</merge>

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

Incremental Migration (Interop)

Embedding Compose in XML

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Embedding XML Views in Compose

AndroidView Wrapper

@Composable
fun MapViewComposable(
    modifier: Modifier = Modifier,
    onMapReady: (GoogleMap) -> Unit
) {
    AndroidView(
        factory = { context ->
            MapView(context).apply {
                onCreate(null)
                getMapAsync { map ->
                    onMapReady(map)
                }
            }
        },
        update = { mapView ->
            // Update the view when state changes
        },
        modifier = modifier
    )
}

Use AndroidView for Views that don’t have Compose equivalents yet, such as MapView, WebView, or custom third-party views.

State Migration

LiveData to StateFlow

class MyViewModel : ViewModel() {
    private val _uiState = MutableLiveData<UiState>()
    val uiState: LiveData<UiState> = _uiState
}

// In Fragment
viewModel.uiState.observe(viewLifecycleOwner) { state ->
    binding.title.text = state.title
}

Click Listeners to Lambdas

binding.submitButton.setOnClickListener {
    viewModel.submit()
}

Migration Checklist

Compose UI - Learn Compose best practices
Compose Navigation - Migrate navigation to Compose
Coil Compose - Load images in Compose

Get Started

Architecture & State

UI Development

Quality & Testing

Performance

Advanced Topics

What This Skill Provides

When to Use This Skill

Migration Workflow

1. Analyze the XML Layout

2. Plan the Migration

3. Convert Layouts

4. Migrate State

5. Test and Verify

Layout Mapping Reference

Container Layouts

Common Widgets

Quick Reference Table

Attribute Mapping

Layout Attributes

Visual Attributes

Common Migration Patterns

LinearLayout with Weights

RecyclerView to LazyColumn

EditText with Two-Way Binding

ConstraintLayout Migration

Include / Merge to Composable

Incremental Migration (Interop)

Embedding Compose in XML

Embedding XML Views in Compose

State Migration

LiveData to StateFlow

Click Listeners to Lambdas

Migration Checklist

References

Build docs developers (and LLMs) love

Get Started

Architecture & State

UI Development

Quality & Testing

Performance

Advanced Topics

​What This Skill Provides

​When to Use This Skill

​Migration Workflow

​1. Analyze the XML Layout

​2. Plan the Migration

​3. Convert Layouts

​4. Migrate State

​5. Test and Verify

​Layout Mapping Reference

​Container Layouts

​Common Widgets

​Quick Reference Table

​Attribute Mapping

​Layout Attributes

​Visual Attributes

​Common Migration Patterns

​LinearLayout with Weights

​RecyclerView to LazyColumn

​EditText with Two-Way Binding

​ConstraintLayout Migration

​Include / Merge to Composable

​Incremental Migration (Interop)

​Embedding Compose in XML

​Embedding XML Views in Compose

​State Migration

​LiveData to StateFlow

​Click Listeners to Lambdas

​Migration Checklist

​Related Skills

​References

Build docs developers (and LLMs) love

What This Skill Provides

When to Use This Skill

Migration Workflow

1. Analyze the XML Layout

2. Plan the Migration

3. Convert Layouts

4. Migrate State

5. Test and Verify

Layout Mapping Reference

Container Layouts

Common Widgets

Quick Reference Table

Attribute Mapping

Layout Attributes

Visual Attributes

Common Migration Patterns

LinearLayout with Weights

RecyclerView to LazyColumn

EditText with Two-Way Binding

ConstraintLayout Migration

Include / Merge to Composable

Incremental Migration (Interop)

Embedding Compose in XML

Embedding XML Views in Compose

State Migration

LiveData to StateFlow

Click Listeners to Lambdas

Migration Checklist

Related Skills

References