Pablo Garcia

Apps for iPhone, iPad, Apple TV and Apple Watch

Camera Record Button

Jun 12, 2018

For a project that I've been working on, I decided to create a record button like the one in iOS.

Here is the result.

The source code is on github

Overriding the draw(_ rect: CGRect) function

RecordButton extends UIView and overrides the draw(_ rect: CGRect) function. In this function, we draw the button and add a gesture recognizer to detect when the button is pressed. We also add an animation to transform the button from a round shape to a square.


Classes that use RecordButton class should implement RecordButtonDelegate to know the button has been pressed.

protocol RecordButtonDelegate: class {

    func tapButton(isRecording: Bool)


Interface Builder

  • Drag RecordButton class into your project
  • In your storyboard, select an UIView
  • Go the the identity inspector and in the class field, type RecordButton instead of UIView


  • Drag RecordButton class into your project
  • In your ViewController add the following
     var recordButton: RecordButton?
    override func viewDidAppear(_ animated: Bool) {


        let recordButtonSide = self.view.bounds.size.height/10
        recordButton = RecordButton(frame: CGRect(x: self.view.bounds.width/2-recordButtonSide/2,
                                                  y: self.view.bounds.height/2-recordButtonSide/2,
                                                  width: recordButtonSide,
                                                  height: recordButtonSide))
        recordButton?.delegate = self



You can download the full project with a fully functional example here

And that's it!! If you use it I'll be happy to know about it.