https://kotlinlang.org logo
Join Slack
Powered by
Why does a `Row` including `TextButton` have a hei...
# compose
l
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`:
Row height:
Button height:
Is it because the 
TextButton
somehow automagically increases the container size to min touch target size (which would be 48 dp)?
⬆️ 2
v
yes, that is correct
👍 2
it applies to most (all?) material components
l
Yes, all that are interacting with touch
I'm struggling though with having constant height of the Row with the button shown and hidden
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
v
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?
➕ 1
c
Honestly, I would just hard code the Row to be at least 48.dp high
v
or force the button to be 0dp wide and disabled 😛
😅 1
l
Then it doesn't look good without the button, with a lot more excessive white space on top and bottom than the rows below.
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
.
v
this might be more of a design question then
could you show the button for all rows but just disabled?
l
The design actually looks good with even spacings between rows.
v
or ignore the minimum touch target size
l
That was also something I considered.
Because it's still very well clickable, even with the touch target being just the size of the text.
z
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
👀 1
➕ 1
l
I just have a flag
Copy code
if (showButton) {
    TextButton( /* ... */)
}
j
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.
l
Yes, but I would like to keep the original touch target.
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
)
j
This would decrease button size and remove "padding" from virtual touch area. And can increase size of row instead.
l
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)
j
RequireHeight on Row and maxHeight on button I think could work
Also another option. Dont add clickable button here. Just add text instead being blue. And use button role on Row and merge descendants
➕ 1
To make Row act as an button. Not sure if wanted.
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.
l
Yes, these are all valid approaches. I was wondering if there is something which doesn't decrease the touch target though.
v
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.
Check out 
minimumTouchTargetSize
in 
LocalViewConfiguration
l
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.
j
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.
I recommend custom here. As even if make work today, can stop work tomorrow. Google changed so much here.
l
Yes, but I don't think it has alignment to the top of the button text.
Baseline I suppose is supported.
I rather suspect I would have to go with custom 
Modifier
like in this example: https://developer.android.com/jetpack/compose/layouts/custom
Like @Zach Klippenstein (he/him) [MOD] suggested above - measure the button, and place it in a custom way
j
I wouldve just make Text instead of TextButton and make it clickable :) Not sure why need to have material button.
488 Views
Open in Slack
PreviousNext
Powered by