https://kotlinlang.org logo
Join Slack
Powered by
Is it expected that button touch target zone is no...
# compose-android
f
Is it expected that button touch target zone is not constrained by view size when min touch target size is not enforced? Example in thread 🧵
image.png,click_area.mp4
click_area.mp4
r
Button has its own constrained area so far I have used Can you share the whole composable?
f
its own constrained area
What do you mean? 🤔 If you’re referring to the minimum touch target size, it should be disabled using the CompositionLocalProvider, as seen in the image. There is nothing more to show. It's just a test composable with a Box wrapper
r
Ok I think I got the question wrong earlier To your question, if you are disabling the TouchTargetInforcement I believe compose internal logic to increase touch target kicks in From the docs
When the size of a clickable composable is smaller than the minimum touch target size, Compose still increases the touch target size. It does so by expanding the touch target size outside of the boundaries of the composable.
f
Interesting, where is this quote from?
r
It's in the middle of the section actually
f
So there is nothing I can do about it 😄 Good, at least I can tell the designer to reconsider those stupid tiny interactive surfaces. Thanks Rohan 🤝
So the composition locals only affect the draw boundaries of the composable, but input touch area cannot be overridden.
r
Touch target area ideally should be constrained by wrapping composable but I think in your case according to compose touch target it's not According to guidelines hence internal logic overrides it
v
The composition locals are named somewhat confusingly. 
LocalMinimumTouchTargetEnforcement
only applies for Material components.
There is also a
Copy code
LocalViewConfiguration.current.minimumTouchTargetSize
that applies globally
@Filip Wiesner if you want, you can override the global minimum like this:
Copy code
val viewConfiguration: ViewConfiguration = LocalViewConfiguration.current
val minTouchViewConfiguration = object : ViewConfiguration by viewConfiguration {
    override val minimumTouchTargetSize = DpSize(...)
}

CompositionLocalProvider(LocalViewConfiguration provides minTouchViewConfiguration) {
    ...
}
r
This will be on global level right?
v
You can provide the modifier LocalViewConfiguration wherever you need it. If you want for it to apply for the whole composition, put it at the root level. If you want it to apply only for a button component, provide it in that component
f
🙄 Why don’t material components use ViewConfiguration instead of their own solution, which only affects half of the functionality? Thanks for this, but I’ll still tell the designer it’s not possible and that we should follow accessibility requirements 😄
v
The material library does use the ViewConfiguration provided value for their implementation
It's just that you cannot control the global behaviour by using the material customization options
f
The material library does use the ViewConfiguration provided value for their implementation
I see the 
minimumInteractiveComponentSize
defined in material package as 
DpSize(48.dp, 48.dp)
.
l
The documentation here might be a bit confusing / lacking, but there are two separate concepts / requirements here. • In Compose, touch targets are automatically expanded using ViewConfiguration values, to try and ensure that anything that receives touch events is accessible. In some cases, such as if you have very small items next to each other, (e.g imagine a grid of 20x20 buttons), it is not possible to expand the touch input, as there is no empty space around. ViewConfiguration controls the value used by this system • Material (the design system) specifies a minimum touch target of 48 for all its interactable components. The extra intention here, is that the total layout size of each interactable component is at least this size, so that in normal situations it is not possible to place these components together in a way where they are not accessible - e.g two checkboxes placed next to each other will still leave enough space for accessible input. Because Compose already has support for expanding input, to support this in Material all we need to do is make sure we ‘allocate’ the extra space that Compose will automatically expand the input to, without us needing to manually move the pointer input handling to fill these bounds I guess the TL;DR is, Compose isn’t ‘forceful’ about layout size, but it will try to expand inputs. In Compose Material we want to enforce sizing so it is not possible for you to place components in a way where they aren’t accessible. The reason for the flag to disable this Material layout sizing is mostly to allow for compatibility when migrating to Compose, it shouldn’t really be used unless you are sure that you are leaving enough space around these components
v
Ah, it seems the internal implementation of Material has changed between versions. It uses the
Copy code
LocalViewConfiguration.current.minimumTouchTargetSize
in Material 1.3.1
r
I did not use the older version, so was not aware of the old flow.
f
Wow, thank you for the detailed explanation of the full picture, Louis
s
I can tell the designer to reconsider those stupid tiny interactive surfaces
Does your designer hate your users? Do they want them to become frustrated as they try to click little tiny things? I really would push back incredibly hard against such a touch target. 20dps is incredibly small ☠️
f
Oh it's much worse. It should be two 12.sp clickable texts in column with like 4.sp spacing 🙂
s
I can’t 😵
Do your designers even use phones?
r
May be send your designer these guidelines first
f
Guys, I know... 😄 I am trying so hard to be diplomatic and carefully explain why it is bad but you gotta do what you gotta do.
s
Fighting the good fight
f
Yup, I am basically a superhero if you think about it
83 Views
Open in Slack
PreviousNext
Powered by