Convert Android XML layouts to Jetpack Compose. Use when asked to migrate Views to Compose, convert XML to Composables, or modernize UI from View system to Compose.

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 RecyclerView to LazyColumn EditText with Two Way Binding ConstraintLayout Migration Include / Merge → Extract Composable Incremental Migration (Interop) Embedding Compose in XML Embedding XML Views in Compose State Migration LiveData to Compose Click Listeners Checklist [ ] All layouts converted (no include or merge left) [ ] State hoisted properly (no internal mutable state for user input) [ ] Click handlers converted to lambdas [ ] RecyclerView adapters removed (using LazyColumn/LazyRow) [ ] ViewBinding/DataBinding removed [ ] Navigation integrated (NavHost or interop) [ ] Theming applied (MaterialTheme) [ ] Accessibility preserved (content descriptions, touch targets) [ ] Preview annotations added for development [ ] Old XML files deleted References [Interoperability APIs](https://developer.android.com/develop/ui/compose/migrate/interoperability apis) [Migration Strategy](https://developer.android.com/develop/ui/compose/migrate/strategy) [Compose and Views side by side](https://developer.android.com/develop/ui/compose/migrate)

xml-to-compose-migration