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


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.