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 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 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