XML to Jetpack Compose Converter

Convert Android XML layouts to idiomatic Jetpack Compose code.

Conversion Process

1. Analyze the XML structure and identify root layout
2. Map each view to its Compose equivalent
3. Convert attributes to Modifier chains (order matters!)
4. Handle resource references (@string, @dimen, @color)
5. Extract styles into reusable composables or theme values

Quick Reference

Layouts

LinearLayout (vertical)

Column

LinearLayout (horizontal)

Row

FrameLayout

Box

ConstraintLayout

Column

Row

ConstraintLayout

ScrollView

Column

Modifier.verticalScroll()

RecyclerView

LazyColumn

LazyRow

ViewPager2

HorizontalPager

Common Widgets

TextView

Text

EditText

TextField

OutlinedTextField

Button

Button

ImageView

Image

AsyncImage

CheckBox

Checkbox

Switch

Switch

ProgressBar

CircularProgressIndicator

LinearProgressIndicator

CardView

Card

Modifier Order

Order matters! Follow this sequence:

1. clickable

   /

   toggleable

2. padding

   (outer)

3. size

   /

   fillMaxWidth

   /

   weight

4. background

   /

   clip

5. border

6. padding

   (inner)

Detailed Mappings

See reference files for complete mappings:

• references/layouts.md

  — Layout containers

• references/widgets.md

  — UI components

• references/attributes.md

  — XML attributes to Modifiers

Output Guidelines

1. Use Material 3 — Import from

   androidx.compose.material3

2. Prefer built-in modifiers — Avoid custom implementations
3. Handle nullability — XML allows null text, Compose needs defaults
4. Extract dimensions — Use

   dimensionResource()

   or define in theme
5. Keep composables stateless — Hoist state to caller
6. Add Preview — Include

   @Preview

   function for each composable

Example

Input:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp">
    
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/welcome"
        android:textSize="24sp"
        android:textStyle="bold"/>
        
    <Button
        android:id="@+id/action_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="@string/get_started"/>
</LinearLayout>

Output:

@Composable
fun WelcomeSection(
    onGetStartedClick: () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text(
            text = stringResource(R.string.welcome),
            fontSize = 24.sp,
            fontWeight = FontWeight.Bold
        )
        
        Spacer(modifier = Modifier.height(8.dp))
        
        Button(
            onClick = onGetStartedClick,
            modifier = Modifier.fillMaxWidth()
        ) {
            Text(text = stringResource(R.string.get_started))
        }
    }
}

@Preview(showBackground = true)
@Composable
private fun WelcomeSectionPreview() {
    WelcomeSection(onGetStartedClick = {})
}

Key conversions:

• match_parent

  →

  fillMaxWidth()

  /

  fillMaxHeight()

• wrap_content

  → default (no modifier needed)

• layout_marginTop

  →

  Spacer

  between elements
• Click listeners → lambda parameters
• IDs → not needed (state hoisting instead)