Skip to content

Fix xml-layout-migration.md #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
simona-anomis merged 1 commit into from
Apr 17, 2026
+27 −26
Merged

Fix xml-layout-migration.md #19

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 27 additions & 26 deletions ...gration/migrate-xml-views-to-jetpack-compose/references/xml-layout-migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Evaluate if the XML layout serves as a foundation-level design system component
\* **Feature parity \& restriction:** Ensure the new composable enforces the same UI constraints as the original XML component, preventing unauthorized style overrides while maintaining the intended flexibility.

Example before migration:
`xml
```xml
<style
name="Widget.Rounded.Button"
parent="Widget.Button.Borderless">
Expand All @@ -33,37 +33,38 @@ parent="Widget.Button.Borderless">
<item name="android:paddingStart">@dimen/padding_2</item>
<item name="android:paddingEnd">@dimen/padding_2</item>
<item name="cornerRadius">8dp</item>
</style>`
</style>
```

Example after migration:

## ```kotlin
```kotlin
@Composable
fun RoundedBorderlessButton(
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true
) {
TextButton(
onClick, modifier
.defaultMinSize(minWidth = dimensionResource(R.dimen.min_width))
.padding(
start = dimensionResource(R.dimen.padding_2),
end = dimensionResource(R.dimen.padding_2)
), enabled, shape = RoundedCornerShape(8.dp),
colors = ButtonDefaults.textButtonColors(
contentColor = MaterialTheme.colorScheme.primary
)
text: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true
) {
Text(
text = text,
style = MaterialTheme.typography.bodyMedium.copy(
fontFamily = FontFamily.SansSerif,
fontWeight = FontWeight.Medium
)
)
}
TextButton(
onClick, modifier
.defaultMinSize(minWidth = dimensionResource(R.dimen.min_width))
.padding(
start = dimensionResource(R.dimen.padding_2),
end = dimensionResource(R.dimen.padding_2)
), enabled, shape = RoundedCornerShape(8.dp),
colors = ButtonDefaults.textButtonColors(
contentColor = MaterialTheme.colorScheme.primary
)
) {
Text(
text = text,
style = MaterialTheme.typography.bodyMedium.copy(
fontFamily = FontFamily.SansSerif,
fontWeight = FontWeight.Medium
)
)
}
Comment on lines +49 to +67
Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot Apr 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

In Jetpack Compose, Modifier.padding applied to a Button (or TextButton) adds padding outside the component's boundaries, which differs from the internal padding behavior of android:padding in XML. To correctly replicate the XML style's padding, use the contentPadding parameter of the TextButton composable. Additionally, using named arguments for all parameters improves readability and maintainability. Note that per the guide's instructions on line 14, hard-coded values like 8.dp should ideally be replaced with dimension resources for consistency.

    TextButton(
        onClick = onClick,
        modifier = modifier.defaultMinSize(minWidth = dimensionResource(R.dimen.min_width)),
        enabled = enabled,
        shape = RoundedCornerShape(8.dp),
        colors = ButtonDefaults.textButtonColors(
            contentColor = MaterialTheme.colorScheme.primary
        ),
        contentPadding = PaddingValues(
            start = dimensionResource(R.dimen.padding_2),
            end = dimensionResource(R.dimen.padding_2)
        )
    ) {
        Text(
            text = text,
            style = MaterialTheme.typography.bodyMedium.copy(
                fontFamily = FontFamily.SansSerif,
                fontWeight = FontWeight.Medium
            )
        )
    }

}
```

Expand Down
Loading