Comments (18)
To summarize my findings - it's not possible to add now another clickable outside of the component ( eg extend Chip or Button externally and add other callbacks like LongClick) - for that we have to rewrite the component itself ( by using combinedClickable or other modifiers) .
This not only applies to Wear Compose and Horologist, but to the core Compose components (phone/desktop) as well.
The only way to achieve this now will be to copy existing implementations and rewrite clickable handling there
from horologist.
I just wanted to recommend a feature, unfortunately I don't have enough time to contribute
from horologist.
Thanks for proposal @IsakTheHacker. That's great suggestion, it works!
But be aware that it handles clicks only for a section which your content takes. For Button it's ok, because we don't have any paddings in it. But we have inner paddings in some components - like Chip or Card. So you have to override it internally - removing it from Chip
or Card
, and adding it to the inner Box
.
Something like this
...
Chip(
onClick = {},
contentPadding = PaddingValues(0.dp),
enabled = enabled,
interactionSource = interactionSource,
shape = shape,
) {
Box(
modifier = modifier
.fillMaxSize()
.combinedClickable(
interactionSource = interactionSource,
indication = null, //We already get the visual indication by using the standard Material Button
enabled = enabled,
onClick = onClick,
onLongClick = onLongClick,
onDoubleClick = onDoubleClick,
)
.padding(ChipDefaults.ContentPadding) // padding should go after specified clickable
A real bummer is that in androidx.compose Chip has a hardcoded padding, which can't be overriden :/ . But in wear components we have this option :)
from horologist.
@yschimke I implemented your idea, but instead of wrapping the Wear Compose button with a Box, I did the exact opposite. Here is my final solution:
@OptIn(ExperimentalFoundationApi::class)
@Composable
internal fun MultiClickButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
onLongClick: (() -> Unit)? = null,
onDoubleClick: (() -> Unit)? = null,
enabled: Boolean = true,
colors: ButtonColors = ButtonDefaults.primaryButtonColors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
shape: Shape = CircleShape,
border: ButtonBorder = ButtonDefaults.buttonBorder(),
content: @Composable BoxScope.() -> Unit,
) {
Button(
onClick = {},
enabled = enabled,
colors = colors,
interactionSource = interactionSource,
shape = shape,
border = border,
) {
Box(
modifier = modifier
.combinedClickable(
interactionSource = interactionSource,
indication = null, //We already get the visual indication by using the standard Material Button
enabled = enabled,
onClick = onClick,
onLongClick = onLongClick,
onDoubleClick = onDoubleClick,
),
contentAlignment = Alignment.Center,
content = content,
)
}
}
I also tried having the Box be the outer composable and the Button as content in the BoxScope, but that resulted in the same behaviour I described in #1979. Maybe something similar to this solution could be added in Horologist?
from horologist.
Yes, it only receives touch inputs that are within the circle covered by the button
from horologist.
Are you interested in submitting a PR?
from horologist.
What is?
from horologist.
It's a good feature request. I'm just checking if you are asking for it to be implemented, or if you are interested in contributing it by submitting a PR.
from horologist.
@yschimke Do we also want to inclide onDoubleClick??
Just to be clear we will now use combinedClickable for all of these
from horologist.
hey @Kpeved, do you have any thoughts on what would the best approach to implement this?
from horologist.
Checking whether it's possible to have a workaround for a current implementation. If not - we might consider a new api for Chips. ( in M3 and possibly in M2.5)
I think the same problem might exist for other components - such as Button
from horologist.
Do we want to add those copies here to support LongClick? Or could this be added in Wear Compose without changing the API, just modifiers? I'm assuming not.
from horologist.
Theoretically we can add them in Wear Compose, but that's not a quick solution.
from horologist.
@Kpeved would this be possible by wrapping the Wear Compose button with a simple Box, that has the clickable, but sharing the interactionSource?
If so, we could put that in Horologist and supporting the combinedClickable properties as params.
from horologist.
Nice
Is the touch target of the box the same size as
the button.
from horologist.
There is some fillMaxSize when we try with Chip, but an example with Button and Card #2021 (review)
from horologist.
Fixed
from horologist.
I think we will remove doubleClick, just leaving the additional longClick. Mainly for unclear a11y reasons.
from horologist.
Related Issues (20)
- Compose-Layout transitive dep on compose-navigation HOT 4
- Improve tracking Tile installation HOT 2
- Invalid doc links
- Review pipeline initializations
- Use correct padding for all responsive SLC
- Use Responsive Dialog consistently
- [Feature request] scalingLazyColumnDefaults does not support userScrollEnabled parameter HOT 10
- Stop a release off a release branch from generating docs HOT 1
- rotaryWithScroll in Dialogs HOT 4
- Uamp isn't restarting playback after pause and resume HOT 2
- Using rotaryWithScroll and onRotaryInputAccumulatedWithFocus simultaneously HOT 5
- AGP 8.3.0 upgrade is blocked
- Improve Tile tracking initialization HOT 1
- Some datalayer docs out of date HOT 1
- [FR] Expose beyondViewportPageCount to PagerScreen HOT 1
- Some screenshot tests not completing HOT 3
- horologist-datalayer-watch dependencies HOT 6
- Horologist
- Tile "Bitmap.toImageResource()" enforce RGB_565 without possibility to change and keep alpha. HOT 2
- FR: Tiles API for GraphicsLayer
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from horologist.