How To Create Google’s Ripple Effect in iOS Application

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

Whether you’re designing a mobile 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 or upgrade apps with material design and 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.

You may also like, How to Build Robust UI Using Android Imageview Design Widget?

Author Bio
Hitesh Trivedi
Hitesh Trivedi
Designation: iOS Team Lead

Hitesh Trivedi is an iOS Team Lead at Space-O Technologies. He has over 10 years of experience in iOS app development. He has guided to develop over 100 iPhone apps with unique features and functionalities. He has special expertise in Swift and Objective-C.