How To Create Google’s Ripple Effect in iOS Application

How To Create Google’s Ripple Effect in iOS Application
Rate this post


Google’s new material design library has introduced many new interaction effects including ripple effect.

Whether you’re designing app in Android platform or iOS platform, it’s always good to let your users know that your app has received the input. Now, this could be as little as a color change on button to indicate that the button has been pressed.

Here, in today’s iOS app tutorial, we’ll see how to make ripple effect animation on an object to let users know that app has received the users’ input.

Let’s Get Started

Open your XCode and create a new project under file menu.rippleeffect1

Select Single View Application as project type and click on next.


Set the project name and detail.


Once you create a new project, go to Main.storyboard and select ViewController and drop UIButton from “Show the object library” section.



For Ripple effect create an extension class RippleButton for UIButton.



var circleShape = CALayer()

override func beginTrackingWithTouch(touch: UITouch, withEvent event: UIEvent?) -> Bool {
let width: CGFloat = self.bounds.size.width
let height: CGFloat = self.bounds.size.height
if (self.imageView!.image != nil) {
self.circleShape = self.createImageShapeWithPosition(CGPointMake(width / 2, height / 2), pathRect: CGRectMake(-CGRectGetMidX(self.bounds), -CGRectGetMidY(self.bounds), self.imageView!.image!.size.width, self.imageView!.image!.size.height))
self.circleShape.contents = (self.imageView!.image!.CGImage! as AnyObject)
else {
self.circleShape = self.createCircleShapeWithPosition(CGPointMake(width / 2, height / 2), pathRect: CGRectMake(-CGRectGetMidX(self.bounds), -CGRectGetMidY(self.bounds), width, height), radius: self.layer.cornerRadius)
return true

override func endTrackingWithTouch(touch: UITouch?, withEvent event: UIEvent?) {
let point = touch!.locationInView(self)
if point.x < 0 || point.y < 0 || point.x > self.bounds.size.width || point.y > self.bounds.size.height {
else {
let scale: CGFloat = 2.5
let groupAnimation = self.createFlashAnimationWithScale(scale, duration: 0.5)
//groupAnimation["circleShaperLayer"] = self!.circleShape
groupAnimation.delegate = self
self.circleShape.addAnimation(groupAnimation, forKey: nil)

func createImageShapeWithPosition(position: CGPoint, pathRect rect: CGRect) -> CALayer {
let imageLayer = CALayer()
imageLayer.bounds = rect
imageLayer.position = position
return imageLayer

func createCircleShapeWithPosition(position: CGPoint, pathRect rect: CGRect, radius: CGFloat) -> CAShapeLayer {
let circleShape = CAShapeLayer()
circleShape.path = self.createCirclePathWithRadius(rect, radius: radius)
circleShape.position = position
circleShape.fillColor = UIColor.clearColor().CGColor
circleShape.strokeColor = UIColor.purpleColor().CGColor
circleShape.opacity = 0
circleShape.lineWidth = 1
return circleShape

func createFlashAnimationWithScale(scale: CGFloat, duration: CGFloat) -> CAAnimationGroup {
let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
scaleAnimation.fromValue = NSValue(CATransform3D: CATransform3DIdentity)
scaleAnimation.toValue = NSValue(CATransform3D: CATransform3DMakeScale(scale, scale, 1))
let alphaAnimation = CABasicAnimation(keyPath: "opacity")
alphaAnimation.fromValue = 1
alphaAnimation.toValue = 0
let animation = CAAnimationGroup()
animation.animations = [scaleAnimation, alphaAnimation]
animation.duration = 1.0
return animation

func createCirclePathWithRadius(frame: CGRect, radius: CGFloat) -> CGPathRef {
return UIBezierPath(roundedRect: frame, cornerRadius: radius).CGPath

override func animationDidStop(anim: CAAnimation, finished flag: Bool) {


Now select UIButton and go to the identity inspector and set the class RippleButton.


And done!

As you can see, the implementation of ripple effect is pretty simple and straightforward. Now, it’s your turn to create awesome apps with amazing UI. Although, there are many UI widgets to discover, and it’s better that you consult iPhone app development company if you’re implementing directly into a live app.


Have an iOS App Idea in Mind? Let's Discuss!