skillfed

xml-to-compose-migration

This skill guides you through converting Android XML layouts to idiomatic Jetpack Compose code. It provides layout mapping tables for common containers and widgets, attribute translation, and patterns for state migration from LiveData to Compose state. Use it for full rewrites or incremental adoption via ComposeView interop.

XML to Compose Migration converts Android XML layouts to Jetpack Compose with systematic mapping and state handling.

AI-generated summary based on this skill's SKILL.md

★ 905  87 Apache-2.0 updated by new-silvermoon

Install

new-silvermoon/awesome-android-agent-skills/xml-to-compose-migration

CLI (skillfed)coming soon 
git clone https://github.com/new-silvermoon/awesome-android-agent-skills
cp -r awesome-android-agent-skills/.github/skills/migration/xml-to-compose-migration ~/.claude/skills/xml-to-compose-migration

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How do I convert Android XML layout to Jetpack Compose?

xml-to-compose-migration guides you through converting Android XML layouts into idiomatic Jetpack Compose code. The skill provides layout mapping tables for common containers like LinearLayout, FrameLayout, and ConstraintLayout, plus widget equivalents (Button, EditText, ImageView, etc.). It covers attribute translation, state migration from LiveData to Compose state, and patterns for both full rewrites and incremental adoption using ComposeView interop.

What layout containers can xml-to-compose-migration help me map?

xml-to-compose-migration maps traditional Android containers to Compose equivalents: LinearLayout becomes Row or Column depending on orientation, ConstraintLayout converts to Box with modifier constraints, FrameLayout maps to Box, and RecyclerView transforms to LazyColumn or LazyRow. The skill includes detailed mapping tables showing how to translate layout_width, layout_height, gravity, and other XML attributes into Compose modifiers and parameters.

How does xml-to-compose-migration handle state migration?

xml-to-compose-migration provides patterns for migrating from View system state management to Compose. It covers converting LiveData and ViewModel patterns to Compose State and StateFlow, replacing DataBinding with Compose's declarative state hoisting, and modernizing ViewBinding usage. The skill guides you through managing state lifecycle in composables and integrating with existing Android architecture components during migration.

Can I use xml-to-compose-migration for incremental adoption?

Yes. xml-to-compose-migration supports incremental migration strategies using ComposeView interop, allowing you to adopt Compose gradually while maintaining XML layouts. The skill shows how to embed composables in existing XML-based fragments and activities, manage state across the XML-Compose boundary, and plan phased migration without requiring a complete rewrite of your codebase.

Does xml-to-compose-migration cover widget conversion?

xml-to-compose-migration provides conversion guidance for common widgets: EditText becomes TextField or OutlinedTextField, Button maps to Button with onClick lambda, ImageView converts to Image, CardView becomes Card, and RecyclerView transforms to LazyColumn. The skill includes attribute mapping for properties like hint, inputType, src, elevation, and more, helping you translate XML widget definitions into their Compose equivalents.

What does xml-to-compose-migration replace in modern Android development?

xml-to-compose-migration helps modernize your UI architecture by replacing ViewBinding with Compose's type-safe declarative syntax, DataBinding with Compose state management, and the entire View system with composables. It guides you away from XML layout inflation and fragment-based UI toward Compose's functional composition model, reducing boilerplate and improving maintainability while supporting interop during transition periods.

SKILL.md

rendered from the published skill — quoted content, verbatim

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

(truncated - see the full file via the links below)

Read as markdown · JSON record · Browse the source repository

File tree — 1 file 
.github/skills/migration/xml-to-compose-migration/SKILL.md

Related skills

styles (Apache-2.0) Cometchat Android V6 Kotlin Placement (unlicensed) Cometchat Android V5 Placement (unlicensed) Cometchat Android V5 Components (unlicensed) display-glasses-with-jetpack-compose-glimmer (Apache-2.0) material-3 (MIT) Cometchat Android V6 Troubleshooting (unlicensed) mobile-android-design (MIT) android-coil-compose (MIT) android-design-guidelines (MIT) Android Design (NOASSERTION) convert-file (MIT) migrate-xml-views-to-jetpack-compose (Apache-2.0)
All skills by new-silvermoon → Best frontend design skills for AI agents - SkillFed →

Tags

ui-modernization declarative-ui view-system-migration state-hoisting incremental-adoption android-interop layout-conversion compose-patterns