SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsandroid-compose-migration

android-compose-migration

Coding & development

View repository

Updated 10-15 22:13

About this skill

XML to Jetpack Compose Migration

Priority: P1 (HIGH)

Structured 10-step workflow for migrating XML layouts to Compose.

Step 1: Identify the migration candidate

If the user specified a target XML layout, proceed to Step 2. Otherwise, pick the best candidate:

  • Prefer leaf layouts (not deeply nested in other XMLs).
  • Prefer layouts with few custom Views.
  • Avoid layouts with complex RecyclerView adapters as a first migration.

Step 2: Analyze the layout

Examine the XML structure: list all Views, data bindings, click listeners, style references, and custom Views needing AndroidView wrappers.

Step 3: Create a plan

Generate a checklist of every View → Composable mapping. Present to user for approval.

Step 4: Capture baseline UI

Ask the user for a screenshot, or take one via emulator for visual comparison.

Step 5: Set up Compose dependencies

Check build.gradle.kts or libs.versions.toml for Compose BOM and compiler. If missing, add them. See dependency setup.

Step 6: Set up Compose theming

If missing, initialize minimum required theme — map XML colors/styles to Compose. Do NOT migrate the entire theme.

Step 7: Migrate the XML layout

Convert each View to its Compose equivalent. See interop patterns for the View→Composable mapping table, ComposeView, and AndroidView usage. Include a @Preview for every new Composable. Use LazyColumn or LazyRow for list-heavy screens instead of flattening them into one large static composable.

Step 8: Replace usages

Use ComposeView to host Compose in Views, or AndroidView for Views in Compose. See interop patterns.

Step 9: Validate

Compare baseline screenshot with Compose Preview. Focus on layout and styling. Iterate until visual parity.

Step 10: Clean up

Delete the migrated XML file and legacy tests. Only remove code not referenced elsewhere.

Verification

  • Compose Preview renders correctly.
  • Visual parity with original XML layout.
  • ./gradlew build succeeds.
  • No broken references to deleted XML files.

Anti-Patterns

  • No full theme migration: Only migrate what the target layout needs.
  • No new View instances in AndroidView update: Mutate existing, don't recreate.
  • No missing ViewCompositionStrategy: Always set it on ComposeView to avoid leaks.

References