Hi guys. Lately, I've worked on a custom checkBox using `canvas` and `BlendMode` in order to accompl...

# compose

[Cédric]

Hi guys. Lately, I've worked on a custom checkBox using canvas and BlendMode in order to accomplish some effects.

I would appreciate a review of it and have your advice if I can make some improvements.

Source code:
https://github.com/kosher9/Compose_Nice_CheckBox

This is the result

Screen_Recording_20230621_143142_Compose Nice CheckBox.mp4

[Albert Chang]

1. Use Modifier.toggleable() instead of Modifier.selectable(). Read the doc of Modifier.selectable() for the difference between them.
2. saveLayer is very inefficient. Use Modifier.graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen) instead of that.
3. What is tickPaint for? You are not using it.

[Tobias Suchalla]

Also: Checkboxes should never be round. Round checkboxes look like radio buttons and will clash with user expactation.
http://danieldelaney.net/checkboxes/
(coming from https://kotlinlang.slack.com/archives/C01D6HTPATV/p1686824436961039, was linked in the Medium article)

[Cédric]

• Thank you @Albert Chang I think Modifier.toggleable() is more appropriate here.
• There is definitely a lot to learn on Modifier 😅. I struggled a lot to find a way to achieve this BlendMode effect. saveLayer was my only one option so far. Thanks.
• I am using the tickPaint now.

[Cédric]

Thank you @Tobias Suchalla I was trying to create the one used in telegram app using compose.