Is there a way to “align” a composable based on th...

# compose

[christian.steffensen]

Is there a way to “align” a composable based on the content of the composable, ignoring any contentpadding?

If I have a Column with horizontalPadding of 24, then it works fine for all the composables within that column - until I get to a button, since that already has some contentpadding, so the button content is not aligned with the rest of the content. My solution so far is just to add manual horizontalpadding to all required elements in the column, but that is tedious.

[christian.steffensen]

Only really an issue for TextButtons, I suppose 🙂

[Raed Ghazal]

you can reduce the TextButton content padding, no?

TextButton(
    contentPadding = PaddingValues(0.dp),
    onClick = {
    }
) {}

[christian.steffensen]

Wouldn't that reduce the touch target size of the button which goes against a11y standards?

[Raed Ghazal]

yeah, but if you go with your solution, the click affect will show beyond the padding of the rest of the screen, isn't that also bad?

can you maybe share a screenshot?

[Raed Ghazal]

but I actually do have a similar question to yours but for a different situation,
when I have a horizontal list and would like to have the padding inside rather than outside :

screen-20241209-223332~2.mp4

[Stylianos Gakis]

Clickable areas can always grow to go outside of the bounds of the clickable item itself. So as long as you don't have clickable items touching each other you can have things be small yet still have the right touch target.

[christian.steffensen]

@Stylianos Gakis Yes, that’s not a problem 🙂 I was just looking for an easier way to align things, rather than manually adjusting padding to offset the button so the text itself is aligned with the rest of the content.

Not really a big issue, I was just curious if there was some magic modifier somewhere

[christian.steffensen]

Column(
    Modifier
        .background(White)
        .fillMaxSize()
        .padding(horizontal = 24.dp)
        .statusBarsPadding()
) {
    TextButton({}) { Text(text = "Back") }
    Text("Header", style = h1)
}

For example here, the padding will be wrong on the button, so I have to define manual padding for very single composable in my screen instead of just having it defined on the parent layout. Or offset the button manually:

Modifier.offset(x = (-10).dp))