Friday, May 15, 2020

Create Button Auth Facebook FBLoginButton Full Width


In my app Dog Master, I have authentication to log in from two platform that are Google and Facebook. Basically I used the login button that is created by Google Firebase and Facebook. These two button are in different width. As you know the google button sign in is easy to be designed in storyboard. But Facebook it's fixed width if we want to make it full width in each edge of screen, it would make space padding.

In this post, I don't talk about how to auth with facebook. But for additional information I used authentication with Firebase auth. It's easy to use if you follow the tutorial given by Firebase documentation. If you have any issue about it maybe I can help you. Just comment below this post.

As you can see above screenshoot image, the facebook login button is basically only the facebook icon and "Continue with Facebook" text. Without blue background behind it. I customized it using UIView and I added tap handler to click FBLoginButton. I created this button on UITableViewCell, so it's basically same with UIViewController. 

First, we need to create UIView in storyboard or you can create it programmatically. My above picture is just an example, you don't need to follow it. But the point is to make the button full width. I used leading and tralling in my button to 16 points. Therefore whatever devices, it would be full width with padding 16 points. If you have already implemented the button in your controller. Next step is to modify a little bit our codes. Check this out, I think it's easy to understand.


Second, you need to add tap gesture in your UIView. Because fb login button is using UIView to be inside of it. After that you need to adjust the x and y position for spesific devices. I have already tried it to every devices. It seems some device is not correct position. So I just adjust it to make it center beautifully. That's it. For DeviceType I've already added, it just makes our controller know what devices users used.

Yes, It makes our button login facebook looks user experience more better. It's same width with Google sign button. If you have any question, feel free to ask below. Thanks you so much. Thanks for visiting.



No comments:

Post a Comment