How to Create Facebook Login UI using Android Studio?
Nowadays, android apps are very popular especially social media apps. This UI has generally seen in the “Facebook Lite” App. In this article, we will create a Facebook login UI in Android. Below are the various steps on how to do it.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Firstly select empty activity then click the next button. Give the name of your app like “Facebook Login UI”. Then select Kotlin/Java as the programming language. Then select minimum SDK for example in this we are using “API16: Android 4.1(Jelly Bean)”. then click on the finish button.
Step 2: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < LinearLayout android:layout_width = "match_parent" android:layout_height = "match_parent" android:background = "#3b5998" android:orientation = "vertical" > <!--Imageview for Facebook logo image--> < ImageView android:layout_width = "80dp" android:layout_height = "80dp" android:layout_gravity = "center" android:layout_marginTop = "80dp" android:src = "@drawable/fb_logo" /> <!--EditText for user name or email address--> < EditText android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginLeft = "20dp" android:layout_marginTop = "80dp" android:layout_marginRight = "20dp" android:backgroundTint = "#d3d3d3" android:hint = "Username or Email" android:inputType = "textEmailAddress" android:maxLines = "1" android:padding = "10dp" android:textColor = "#ffffff" android:textColorHint = "#d3d3d3" /> <!--EditText for user password--> < EditText android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginLeft = "20dp" android:layout_marginTop = "10dp" android:layout_marginRight = "20dp" android:backgroundTint = "#d3d3d3" android:hint = "Password" android:inputType = "textPassword" android:maxLines = "1" android:padding = "10dp" android:textColor = "#ffffff" android:textColorHint = "#d3d3d3" /> <!-- Login Button for Facebook Log In--> < Button android:id = "@+id/btnLogin" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_marginLeft = "20dp" android:layout_marginTop = "35dp" android:layout_marginRight = "20dp" android:backgroundTint = "#5c6bc0" android:padding = "10dp" android:text = "Log In" android:textColor = "#ffffff" android:textSize = "16sp" android:textStyle = "bold" /> < RelativeLayout android:layout_width = "match_parent" android:layout_height = "match_parent" > < LinearLayout android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_alignParentBottom = "true" android:orientation = "vertical" > < TextView android:id = "@+id/txtSignUp" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "center_horizontal" android:text = "Sign Up for Facebook" android:textColor = "#ffffff" /> < TextView android:id = "@+id/txtForgotPassword" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_gravity = "center_horizontal" android:layout_marginTop = "15dp" android:layout_marginBottom = "15dp" android:text = "Forgot Password?" android:textColor = "#ffffff" /> </ LinearLayout > </ RelativeLayout > </ LinearLayout > |
Step 3: Working with the colors.xml file
Add this code in app > res > values > colors.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?> < resources > <!-- colors code we are using in this project --> < color name = "purple_200" >#3b5998</ color > < color name = "purple_500" >#FF6200EE</ color > < color name = "purple_700" >#FF3700B3</ color > < color name = "teal_200" >#FF03DAC5</ color > < color name = "teal_700" >#FF018786</ color > < color name = "black" >#FF000000</ color > < color name = "white" >#FFFFFFFF</ color > </ resources > |
The image used in this project is added to the drawable folder. For navigating the image, Navigate to the app > res > drawable and you will find the image in that folder. Now run the app and see the output of the code below.
Output UI:
Note: To create a Facebook login using an Android App please refer to How to create a Facebook login using an Android App?
GitHub link: https://github.com/bhartik021/Facebook_Login_Register_UI
Please Login to comment...