How to Create Facebook Login UI using Android Studio? - GeeksforGeeks

24 Feb, 2021
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 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     xmlns:android="http://schemas.android.com/apk/res/android"    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. 
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
Android-Studio
Android
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
How to Post Data to API using Retrofit in Android?
Retrofit with Kotlin Coroutine in Android
How to Get Current Location in Android?
Android Listview in Java with Example
Flexbox-Layout in Android
How to Save Data to the Firebase Realtime Database in Android?
How to Change the Background Color After Clicking the Button in Android?