# Xml To Compose Migration

Convert Android XML layouts to Jetpack Compose.

- Repository: https://github.com/new-silvermoon/awesome-android-agent-skills (998 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-07-27
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add new-silvermoon/awesome-android-agent-skills --skill xml-to-compose-migration -g -a claude-code -y`
Codex: `npx skills add new-silvermoon/awesome-android-agent-skills --skill xml-to-compose-migration -g -a codex -y`
Cursor: `npx skills add new-silvermoon/awesome-android-agent-skills --skill xml-to-compose-migration -g -a cursor -y`
Gemini CLI: `npx skills add new-silvermoon/awesome-android-agent-skills --skill xml-to-compose-migration -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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

The rest: https://github.com/new-silvermoon/awesome-android-agent-skills/blob/HEAD/.github/skills/migration/xml-to-compose-migration/SKILL.md