Trigger Ripple Effect from Code in Jetpack Compose
One of the things I always like about Material UI design is its animations, they are simple, not distracting, and not outdated, given that I sometimes try to integrate more animations into my apps or websites to make them alive.
So, for today’s situation, I had a very specific use case:
When something needs to be changed in the Settings Screen. First, navigate to the Settings Page. Second, Scroll the page until the setting visible. Lastly, Make the setting noticeable to the user (highlight, Ripple Effect, etc — Developer choice) so he knows this setting needs to be changed.
Samsung Settings app is a real world example (when you search something):
https://i.imgur.com/FUljMV4.gifv
My initial implementation on my app (just the ripple effect):
https://i.imgur.com/B8jztRj.gifv
A recursive triggering compared to a thumb press example
As you can see in both the targeted setting tile gets that ripple effect, basically simulating a thumb press (without any actual interaction from user).
For simplification I will exclude Navigation and Scrolling implementation.
Starting with piece of code, we initialize some variables, notably interactionSource and indication, these two are important later. Next we see is a LaunchedEffect(Unit), We are going highlight the composable we are targeting right after MyScreen finishes rendering, highly recommended to be run inside a coroutine, as you can see it’s pretty much straight-forward, emit a press, wait for it to animate, then release it. You can play more with the durations in the delay(xxx) to find what best suits your use case.
The most important part in segment 2 is the line 28, that way when a press is emitted into the interactionSource, it goes into your targeted composable.
Here is a showcase this code app
https://i.imgur.com/L72Xx6F.gifv
Full Code of this showcase app can be found on Github here:
https://github.com/hahouari/triggered_ripple_effect
Happy coding day :) Oh! and if you have any questions go ahead and make a comment, I will be happy to help. Cheers!
