Open in app

Sign in

Write

Sign in

How to Create a Firebase Authentication in Android studio.

Siddiquah Anjum
7 min readFeb 18, 2022

--

This Blog will give you a 101 tour of how one can create a Complete working Firebase Authentication App in Android studio. I have explained each process and have also attached screenshots and the github link of the project. With this blog, I assume that you already have some basic android development and firebase knowledge. Awesome Lets get Coding.

My Setup

My current setup is , my editor version is Android Studio Arctic Fox | 2020.3.1 Patch 3 and we also need Firebase https://firebase.google.com/ along with this the language we are using to code is JAVA (openjdk version “17.0.1” 2021–10–19), also my operating system is MacOs. please make sure you are using the same version or higher. This project might work on older versions as well but since i have not yet tested it, I am not sure. But if you have the same version, all is good and you can start coding. All the best!!!

1. Make project

Open your android studio and make a new Empty project . You can name it anything, but this project is going to be named LoginFormFirebase. You can read this Guide on how to create a new project. https://developer.android.com/training/basics/firstapp/creating-project

Your Empty project should look like this now.

Now that you have an empty project to work with, lets connect it to firebase.

2. Add/Connect with Firebase

Next, click on Tools -> Firebase -> Authentication -> Email and Password Authentication.

Now click on two buttons, first click on Connect to firebase button, which will connect your project to firebase, obviously and if you haven’t added your app to firebase beforehand, android studio will do it for you in this step. then next click on Add Firebase authentication to your app button, which will add dependencies in build.gradle file. after doing this, both the buttons will have check mark and green color. So far so good, right?

For clear instruction on how to do this, you can also read this Doc https://firebase.google.com/docs/android/setup

After adding and connecting your project to firebase

3. Make UI Design for all pages in xml.

For our App we will need 4 Screens. Go to res -> layout . Create 3 new activities named LoginActivity, SignupActivity, and HomeActivity. and since you already have MainActivity. at the end you should have a total of 4 activities.

Make a total of 4 Activities.

Main Screen: where logo, login and sign up button will be,

Login Screen: user can login to the app from here,

Signup Screen: user can sign up into the app from here, and finally

Home Screen: this page will come only after successful login.

After doing this lets Design each Screens in their XML files.

I have attached screenshots of the design i used along with the files and code with this Blog.

Main Activity

Design of main Activity. and the Screenshot of the layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#E6E6E6"
    tools:context=".MainActivity">
<!--I have used Constraint layout to constrain everything to the screen, so no matter the size of the screen they don't overlap each other.-->

<!-- I used Relative layout to align the LOGO vertically. -->
    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/logo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="145dp"
            android:gravity="center"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="145dp"
            android:text="صديقة"
            android:textColor="#9297A9"
            android:textSize="40sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/logo"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="145dp"
            android:layout_marginTop="-5dp"
            android:layout_marginEnd="145dp"
            android:gravity="center"
            android:text="A N J U M"
            android:textColor="#9297A9"
            android:textSize="14dp" />

    </RelativeLayout>

<!--This relativelayout aligns the buttons vertically-->
    <RelativeLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/imageView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/relativeLayout">

        <TextView
            android:id="@+id/wel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="0dp"
            android:gravity="center"
            android:text="Hello There! Come on in :D 🌱"
            android:textColor="#A3A98B"
            android:textSize="16sp" />

<!--These buttons shape is custom made. you can find it in drawable folder. -->
        <Button
            android:id="@+id/LoginBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/wel"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_marginTop="20dp"
            android:layout_marginEnd="150dp"
            android:background="@drawable/login_btn"
            android:gravity="center"
            android:text="Log In ➝"
            android:textColor="#ffffff"
            android:textSize="12sp" />

        <Button
            android:id="@+id/SignUpBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/LoginBtn"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="150dp"
            android:layout_marginTop="30dp"
            android:background="@drawable/signup_btn"
            android:gravity="center"
            android:text="Sign Up ＋"
            android:textColor="#ffffff"
            android:textSize="12sp" />


    </RelativeLayout>

<!-- Just an image, you can find it in drawable file. -->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="250dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:srcCompat="@drawable/front_page" />


</androidx.constraintlayout.widget.ConstraintLayout>

Now after designing the Main Activity , let's go design Login and signup Activities.

LoginActivity

Design of Login Activity. and the Screenshot of the layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#FFFFA6"
    android:layout_height="match_parent"
    tools:context=".LoginActivity">
<!--Please make sure to constraint everything properly-->

<!--This is custom shape i made for background. you can find the code in drawable file. -->
    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="500dp"
        android:layout_height="500dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/i" />

    <ImageView
        android:id="@+id/imageView10"
        android:layout_width="220dp"
        android:layout_height="313dp"
        android:src="@drawable/v"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintVertical_bias="1.0" />

    <TextView
        android:id="@+id/log"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="60dp"
        android:layout_marginTop="28dp"
        android:text="Login"
        android:textColor="#977E9E"
        android:textSize="40dp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/wel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="60dp"
        android:layout_marginTop="4dp"
        android:text="Welcome back"
        android:textColor="#E8BDA5"
        android:textSize="30dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/log" />

<!--i custom made this in drawable file.-->
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="250dp"
        android:layout_height="250dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.496"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.501"
        app:srcCompat="@drawable/card"/>

    <TextView
        android:id="@+id/enter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="* Please enter your Email id and Password"
        android:textColor="#E78279"
        android:textSize="10dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintHorizontal_bias="0.378"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2" />

    <EditText
        android:id="@+id/editTextTextEmailAddress"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:textColor="#818181"
        android:layout_marginTop="10dp"
        android:textSize="15dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/enter" />

    <EditText
        android:id="@+id/editTextTextPassword"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:hint="********"
        android:textSize="15dp"
        android:ems="10"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:layout_marginTop="20dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword" />



</androidx.constraintlayout.widget.ConstraintLayout>

SignupActivity

Design of Signup Activity. and the Screenshot of the layout.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SignupActivity">

<!--Custom shape in drawable file.-->
    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/signup_bg" />

    <TextView
        android:id="@+id/log"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="56dp"
        android:layout_marginTop="28dp"
        android:text="Signup"
        android:textColor="#9E9DB2"
        android:textSize="40dp"
        android:textStyle="bold"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/wel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="56dp"
        android:text="Welcome"
        android:textColor="#81B0D5"
        android:textSize="30dp"
        app:layout_constraintBottom_toTopOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/log"
        app:layout_constraintVertical_bias="0.0" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="238dp"
        android:layout_height="214dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintVertical_bias="1.0"
        app:srcCompat="@drawable/f" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="286dp"
        android:layout_height="320dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.496"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.42"
        app:srcCompat="@drawable/card" />

    <TextView
        android:id="@+id/enter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="34dp"
        android:text="* Please enter your Details"
        android:textColor="#E78279"
        android:textSize="10dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintHorizontal_bias="0.192"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toTopOf="@+id/imageView2" />

    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        android:textColor="#818181"
        android:textSize="14dp"
        android:layout_marginTop="5dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/enter" />

    <EditText
        android:id="@+id/editTextTextEmailAddress"
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Email"
        android:layout_marginTop="10dp"
        android:inputType="textEmailAddress"
        android:textColor="#818181"
        android:textSize="14dp"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName" />

    <EditText
        android:id="@+id/editTextPhone"
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Contact No"
        android:textColor="#818181"
        android:layout_marginTop="10dp"
        android:textSize="14dp"
        android:inputType="phone"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextEmailAddress" />

    <EditText
        android:id="@+id/editTextTextPassword2"
        android:layout_width="220dp"
        android:layout_height="wrap_content"
        android:textColor="#818181"
        android:textSize="14dp"
        android:hint="******"
        android:layout_marginTop="10dp"
        android:ems="10"
        android:inputType="textPassword"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/editTextPhone" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
        app:layout_constraintEnd_toEndOf="@+id/imageView2"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/editTextTextPassword2"
        app:layout_constraintVertical_bias="0.0" />


</androidx.constraintlayout.widget.ConstraintLayout>

Home Activity

Good Job for staying with me so far. Give yourself a pat in the back. I hope everything was clear, if not you can reach out to me anytime at siddiquahanjum111@gmail.com

4. Now let’s write Java Code for MainActivity.

This part is very simple. All we need to do is add onclick on both the login and signup buttons.

Firstly, Let's create two variables.

Button LoginBtn, SignupBtn;

Next, we will get these variable id in xml file.

LoginBtn = findViewById(R.id.LoginBtn);
SignupBtn = findViewById(R.id.SignUpBtn);

after this the only thing we have to do is use intent to switch from main activity to login/signup activity.

LoginBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        Intent intent = new Intent(MainActivity.this, LoginActivity.class);
        startActivity(intent);
    }
});

This code, lets the user click on the login button. when the user clicks on this button, the screens are switched , from main activity to login activity. this is intents job. An intent is to perform an action on the screen. It is mostly used to start activity, send broadcast receiver,start services and send message between two activities.

we will do the same for signup button. we will create a OnClickListener first and then inside it create an intent that will switch the screens.

SignupBtn.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this, SignupActivity.class);
        startActivity(intent);
    }
});

Complete code of Main Activity

Main Activity(Xml file + Java file)

PART 1, is complete, GOOD JOB guys. I’ll post part 2 soon, please tell me if you have any suggestions or questions.

Project Repo: https://github.com/siddiquah/LoginSignup-inFirebase

reach me at : Siddiquahanjum111@gmail.com

Thanks :D

Android
Firebase
Login Page
Part 1
Tutorial

--

--

Siddiquah Anjum

Written by Siddiquah Anjum

12 Followers

Software Developer

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams