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.



Popular posts from this blog

How to have ConstraintLayout inside ScrollView and ScrollView inside ConstraintLayout Android

Image
Hai guys, last week I found a unique way to create layout Android look. You can see the title, that's actually what I want. I know it sounds weird but sometimes we need to create something that we might curious if it's in o n the internet or not. Why I'm using ConstraintLayout because it's almost same with iOS xcode. There is constraint where you can set top constraint, bottom constraint, left constraint and right constraint. So it's easy for me to design like what I want. But it's personal, it depends on you too. And fortunely you can combine ScrollView and ConstraintLayout. Because you need to worry when the height of your layout is high than real device height. And if you don't use UIScrollview your component will be unseen when the height of device is more small than layout that we design. Like my app, I want to use ConstraintLayout and ScrollView together. Maybe it can do with RelativeLayout or others layout. But something special that I want i...
Read more

Missing system image Android Studio solution

Image
Happy holidays guys, this is december with long weekend haha. I still have a problem with Android Studio. After I update my emulator and suddenly I got a issue that is so weird. You can see picture above I need to redownload emulator from android studio. If you got a issue like me, don't worry and don't uninstall your android studio. It's not complicated to resolve it. You just need to redownload the emulator go to Tools -> AVD Manager. You can see the issue of your emulator and redownload or resolve it. And you will be like image above. Just wait the download and your emulator will be fine again. If you still have the issue, please comment below and let me know what's the problem. I'm happy if i can help you guys. I'm not expert but it's fun when i can solve programming issues.
Read more

Fixing Keyboard Hide When Reload UITableview iOS swift 5

Image
Hello guys, If you ever worked with UITableview and UITextView or UITextfield. Like chat App or Comment app. You will face the keyboard will hide or in other word the keyboard close to down. And If we other famous apps like Instagram, it's not close but still exist even if we type and send messages. And In this article I want to share with you guys, how to avoid it so you can easily make the keyboard always opened guys. I found many solution on the internet but some are bad because the keyboard have animation close and open again. I used UITextview and customize it using GrowingTextView. Because I want to the Textbox change the height when user make a new line. So it will look like Whatsapp chat and It looks good. And I make the textbox above keyboard so it will make the user easily type and send messages. The point is to make a new class custom and override canResignFirstResponder variable. So we can change it in our own class view controller. And that's good becaus...
Read more