I implemented the M3 Expressive bouncy button grou...

# compose

[Kyant]

I implemented the M3 Expressive bouncy button group. I want to talk about the best implementation here.
Currently I modifies the padding for each items instead of changing width with fixed paddings, it resolved the squeezing issue caused by "not enough width" while the width is smaller than the original. The padding modifier I use is customized, with lambdas for performance.
Do you have better method to achieve the width effect?

Screenrecording_20250516_091155.mp4

[Dinoy Raj k]

Nice 🙂 but button group is already available in jetpack compose in new material 3 library alpha version

[Dinoy Raj k]

Can you share the code of this custom implementation

[Kyant]

The compose official version is very limited. You even can't define a true Button.
I'm working on the annoying weights, it breaks my current implementation. I am exploring a more common way.

[Kyant]

I think I should write a brand new RowScope 🥲

[efemoney]

A “better way” would be to use lookahead because this is the sort of case it was built for.

At the high level the children layout nodes will update their size & position normally.
Internally, however, your lookahead implementation will animate the changes. Normal lookahead based layout animation will not work here so you will need a custom one that can coordinate the animation between all the children.