xml-to-compose-migration

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 4bc96bf96aac · 31 Oct 2026Report an issue or request a re-scan

• Publishernew-silvermoon GitHub userOwner of the repository this skill is read from
• Source foldernew-silvermoon/awesome-android-agent-skills/.github/skills/migration/xml-to-compose-migrationThe exact folder we audited
• LicenceApache-2.0As the repository states it
• Commit pinned for this verdict4bc96bf96aacA new audit runs when the source changes
• Repository statusNot archivedLast push 95 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: 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.

---
name: xml-to-compose-migration
description: 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

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

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

### RecyclerView to LazyColumn

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

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

### EditText with Two-Way Binding

```xml
<!-- XML with Data Binding -->
<EditText
    android:text="@={viewModel.username}"
    an

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/new-silvermoon/awesome-android-agent-skills
git -C awesome-android-agent-skills checkout 4bc96bf96aac

Works in

1. 2026-10-31
   ✓SAFE B 89 / 100

   first audit · source 4bc96bf96aac

Questions about xml-to-compose-migration

• github.com/new-silvermoon/awesome-android-agent-skills/tree/main — the audited source at commit 4bc96bf96aac and every finding aboveObserved · 31 Oct 2026

Spotted something wrong? Report a correction · Methodology