Recreating Google’s Ripple Effect for iOS

Google’s new Material Design UI comes with many new interaction effects. One of them is this sweet touch ripple effect. This tutorial will show you how to make your own recreating of this effect for Titanium.

When designing an app, it’s always a good thing to let your users know that your app have received users input. It could be as simple as changing the color on your button to indicate that button has been activated. Here I’ll show you how to make a simple commonJS module to handle the Google Material Design Ripple Effect for iOS.

Basic thoughts

To make this animation we’ll need a handler that can receive the clicked view, and add the animation on top of it, based on users click position. Now enough talk, lets see some code.

Filename: RippleEffect.js

So now that we have a handler, all we need to do is to create our views and attach the click event. In this example I’ve added one extra attribute to our view objects called rippleEffect. That way I can check if the click event should call the Ripple Effect animation. You can also attach the addEventListener to each view if that suits my needs.

Filename: app.js

Conclusion

As you can see the implementation of this effect is pretty simple and straightforward. Now its up to you to create some awesome apps with cool UI feedback.Any suggestion will be welcomed, so don’t hesitate by posting a comment below this article.

Demo

screen_demo


  • Gerben Hofman

    This won’t work if your view has a width of Ti.UI.FILL / SIZE. Use this instead:

    var rippleWidth = e.source.toImage().width*2;

    var rippleHeight = e.source.toImage().width*2;

    • Srdjan Lukic-Bardak

      Hi Gerben

      That is correct. I didn’t think of that dynamic myself, but you are right, creating a image of the clicked object would return its size in px.

      • mdpauley

        Would you mind if I made an alloy widget with the library?

        • Srdjan Lukic-Bardak

          Yes! Feel free to use it as you like :)

    • Srdjan Lukic-Bardak

      I just pushed this CommonJS module on GitHub, incase you wanna contribute something :)

      Ps. I’ve added your changes.

      https://github.com/Lukic/Ti.RippleEffect

  • Carlos H. Lustosa

    Oh, this is really really cool stuff! Good work, I will try it on weekend =)