Why does a `Row` including `TextButton` have a height of 48 dp, although the button itself has heigh...

# compose

[Lukasz Kalnik]

Why does a Row including TextButton have a height of 48 dp, although the button itself has height of 40 dp? I'm not adding any padding to the `Row`:

[Lukasz Kalnik]

Row height:

[Lukasz Kalnik]

Button height:

[Lukasz Kalnik]

Is it because the TextButton somehow automagically increases the container size to min touch target size (which would be 48 dp)?

[Lukasz Kalnik]

Ok, that seems to be the reason indeed:
https://stackoverflow.com/questions/75406686/android-compose-how-to-remove-the-space-above-and-below-the-switch

[vide]

yes, that is correct

[vide]

it applies to most (all?) material components

[Lukasz Kalnik]

Yes, all that are interacting with touch

[Lukasz Kalnik]

I'm struggling though with having constant height of the Row with the button shown and hidden

[Lukasz Kalnik]

The Row is inside a Column, so I need to calculate the Spacer sizes above and below it based on whether the Button is shown or not

[vide]

not sure what the best approach would be, can just just make the row a fixed height with the minimum touch target size taken into account?

[Csaba Szugyiczki]

Honestly, I would just hard code the Row to be at least 48.dp high

[vide]

or force the button to be 0dp wide and disabled 😛

[Lukasz Kalnik]

Then it doesn't look good without the button, with a lot more excessive white space on top and bottom than the rows below.

[Lukasz Kalnik]

Also this can be the top row of a Card which has 16.dp padding, So then the padding would be optically different in the top of the Card.

[vide]

this might be more of a design question then

[vide]

could you show the button for all rows but just disabled?

[Lukasz Kalnik]

The design actually looks good with even spacings between rows.

[vide]

or ignore the minimum touch target size

[Lukasz Kalnik]

That was also something I considered.

[Lukasz Kalnik]

Because it's still very well clickable, even with the touch target being just the size of the text.

[Zach Klippenstein (he/him) [MOD]]

How are you hiding the buttons? It might be an option to measure the buttons but not place them, to use their height in the measurement of your rows

[Lukasz Kalnik]

I just have a flag

[Lukasz Kalnik]

if (showButton) {
    TextButton( /* ... */)
}

[Joel Denke]

You can override Googles defaultMinSize modifier by using heightIn(max = 40.dp). Hidden in their documentation comments in material. Just find this myself had issue with input fields with height and width.

[Lukasz Kalnik]

Yes, but I would like to keep the original touch target.

[Lukasz Kalnik]

So the question is, how can I easily make the Row size constant, with the `TextButton`'s touch target extending above and below the Row (because there is enough white space around the Row)

[Joel Denke]

This would decrease button size and remove "padding" from virtual touch area. And can increase size of row instead.

[Lukasz Kalnik]

I want to keep the row height as only the text height. That is currently 19.dp (with the default button text size, which is labelLarge I think)

[Joel Denke]

RequireHeight on Row and maxHeight on button I think could work

[Joel Denke]

Also another option. Dont add clickable button here. Just add text instead being blue. And use button role on Row and merge descendants

[Joel Denke]

To make Row act as an button. Not sure if wanted.

[Joel Denke]

From what I recall cant wrap content size and heightIn at the same time. Because measuring hidden in material button. Had exact same issue with textfield.

[Lukasz Kalnik]

Yes, these are all valid approaches.
I was wondering if there is something which doesn't decrease the touch target though.

[vide]

There's a separate mechanism to keep the touch target some size regardless of bounds. I think it only works without clipping or something, don't remember the details.

[vide]

Check out minimumTouchTargetSize in LocalViewConfiguration

[Lukasz Kalnik]

Basically what I want is something like constraint layout with guidelines, where there is a top guideline and a bottom guideline.
And then align the top of the text on the button to the top guideline, and the text baseline to the bottom guideline.

[Joel Denke]

Yeah it works if you create your own button implementation :) I mean you cant change how Material compose code is. Some stuff can be overriden. Like @vide mention could override local view composition locally decrease touch area requirements.

[Joel Denke]

I recommend custom here. As even if make work today, can stop work tomorrow. Google changed so much here.

[Joel Denke]

https://developer.android.com/jetpack/compose/layouts/constraintlayout
Also this exists :)

[Lukasz Kalnik]

Yes, but I don't think it has alignment to the top of the button text.

[Lukasz Kalnik]

Baseline I suppose is supported.

[Lukasz Kalnik]

I rather suspect I would have to go with custom Modifier like in this example:
https://developer.android.com/jetpack/compose/layouts/custom

[Lukasz Kalnik]

Like @Zach Klippenstein (he/him) [MOD] suggested above - measure the button, and place it in a custom way

[Joel Denke]

I wouldve just make Text instead of TextButton and make it clickable :) Not sure why need to have material button.