migrate-xml-views-to-jetpack-compose

Migrates Android XML View layouts to Jetpack Compose through a structured ten-step workflow.

2|Updated Jun 21, 2026
One-click install
npx skills add https://github.com/IsKenKenYa/skills --skill migrate-xml-views-to-jetpack-compose-iskenkenya
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: migrate-xml-views-to-jetpack-compose
Source: https://github.com/IsKenKenYa/skills/tree/main/skills/android/jetpack-compose/migration/migrate-xml-views-to-jetpack-compose
Command: npx skills add https://github.com/IsKenKenYa/skills --skill migrate-xml-views-to-jetpack-compose-iskenkenya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Converting legacy Android XML View layouts to Jetpack Compose by hand is error-prone: visual parity is hard to verify, theming gets duplicated, and interoperability between Views and Compose is easy to get wrong. This Skill provides a disciplined, step-by-step migration methodology that keeps the transition stable and visually consistent. ## Core Features & Use Cases - Structured 10-step migration: Covers candidate selection, project analysis, planning, baseline screenshot capture, Compose dependency and compiler setup, theming migration, layout conversion, usage replacement, visual validation, and XML cleanup. - Visual parity validation: Compares a baseline screenshot of the original XML UI against the rendered Compose Preview and iterates until layout and styling match, then generates a Compose UI test. - Interoperability guidance: Includes official Android references for Compose-in-Views (ComposeView, ViewCompositionStrategy) and Views-in-Compose (AndroidView, AndroidViewBinding, AndroidFragment) for incremental adoption. - Use Case: You have a legacy screen built with res/layout/item_user_profile.xml and want to modernize it. The Skill identifies the lowest-risk candidate, sets up the Compose BOM and compiler plugin, migrates the Material 3 theme tokens, converts the layout to a reusable composable with a Preview, and safely removes the old XML. ## Quick Start Ask the AI to migrate the XML layout res/layout/item_user_profile.xml in this Android project to Jetpack Compose while preserving its exact appearance.

Frequently Asked Questions about migrate-xml-views-to-jetpack-compose

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate an Android XML layout to Jetpack Compose?

Follow a structured process: pick a low-risk leaf layout, analyze its structure and resources, set up Compose dependencies and theming, convert the XML to a composable with a Preview, validate against a baseline screenshot, replace usages, then delete the XML. This Skill automates that ten-step workflow.

Which XML layouts should I migrate to Compose first?

Start with leaf-node layouts that have few nested children, minimal state, no external UI dependencies, and low reuse across the project. Self-contained components used in a single Activity or Fragment carry the lowest regression risk.

Can I use Jetpack Compose inside existing XML View layouts?

Yes. Add a ComposeView to your XML layout and call setContent() with your composables. Set an appropriate ViewCompositionStrategy, such as DisposeOnViewTreeLifecycleDestroyed in Fragments, to avoid state loss during incremental migration.

How do I migrate an XML theme to Compose Material 3?

Map XML color names to Material 3 semantic roles (colorPrimary to primary, colorAccent to secondary), then define ColorScheme, Typography, and Shapes objects for MaterialTheme. Always reuse existing XML values as the source of truth and never hardcode new values.

How do I verify a Compose migration looks identical to the original XML?

Capture a baseline screenshot of the XML UI (via user upload, an existing screenshot test, or a new UI Automator/Espresso test), then compare it against the rendered Compose Preview. Iterate on the Compose code until layout and styling match, ignoring string content.

When should I not remove old XML files after migrating to Compose?

Only delete an XML layout and its legacy tests after confirming no other part of the project references it. Keep original XML themes while any View-based screens remain, since hybrid apps need both theming sources during incremental migration.