Custom circular button for SignIn with Apple

user_2773233 0
Viewed 1482

I'm following Apple's guidelines for implementing the "Sign in with Apple" button. In the documentation apple says that it is also possible to use only the logo to create a custom button of "Log in with Apple), also you can also change the shape of the image to have a circular button ...

In order to be able to edit the image it also provides insert a mask but I don't understand that we have to create a mask for the button or the selected image.

This is what apple wrote in the documentation

enter image description here

At this point how can I get the sign in button with apple with only the circular logo?

sign-in-with-apple mask uiimage swift ios
3 Answers
user_128941580
user_38750610

I got a workaround! also got my app approved by the Apple review team.

What I did is,

  1. Take UIImageView with the same size of other social media logos in your app.

    @IBOutlet var imgAppleLogo: UIImageView!

  2. set the SVG icon(from apple design resources).

  3. Set background color and corner radius as below:

    imgAppleLogo.layer.cornerRadius = imgAppleLogo.frame.size.height / 2
imgAppleLogo.backgroundColor = UIColor.black

Done!

I had to set the background color to fill up the default padding of the apple icon. Otherwise the icon won't be circular.

You can follow the same even if you take UIButton.

By doing this, we are not modifying the default apple icon and so not breaking the Apple guidelines.

user_37340280
Related