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

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