Implement Login, Signup and Logout Page in Android using Firebase Backend

3 min read

As a mobile application developer, one of the invaluable skills to have is the knowledge of working with Firebase.
Firebase is a Backend-as-a-Service offering a real-time database for powering mobile and web applications. This allows developers to focus more on the front end development of their projects, with little effort to building backend applications.
Today, we are going to develop a complete Login and Signup page in Android, powered by the firebase backend.

By the end of this tutorial, you will have learned the following:
1. How to build a complete signup, login and sign-out page that works across all Android apps
2. How to create a firebase project and integrate with Android application
3. How to build a Tab layout in Android using the Bottom Navigation View
4. How to build custom components (Buttons, EditText Fields etc) in Android

Below is a demo the final application we will be building today.

 

1. Creating a New Android Project

Launch the Android Studio IDE and create a new project by selecting the Empty Activity from the list of available templates.
A detailed guide on setting up a new project in Android Studio can be found here.

2. Creating a New Project in Firebase

Head up to the firebase console and follow the below steps in order to setup a new firebase project for your Android application.

Step 1

Click on the Add Project button

 

Step 2

 

Step 3

 

Step 4

 

Step 5

 

Step 6

 

Step 7

 

Step 8

 

Step 9

3. Integrating with Firebase in Android Studio

Step 1

Add the below code snippet to the list of your project dependencies in app/build.gradle. Click the Sync button to update the project dependencies.

Step 2

Update the project level build.gradle file to look similar to the below code. Click on Sync to update the project.

Step 3

Now let’s update the colors.xml, strings.xml and styles.xml with the resources we will be using for our project development.

(a) Open the colors.xml file at app/src/main/res/value and update with the below code snippet.

(b) Open the strings.xml file at app/src/main/res/value and update with the below code snippet.

(c) Open the styles.xml file at app/src/main/res/value and change the application parent theme to NoActionBar. Your file should be similar to the code snippet below.

Step 4

We need to update our drawable folder with the resources used for custom definitions for some of the components used in this project, as well as images and icons used.

Download the drawable resource file here.

Step 5

At this point, we will be building out our registration, login and main application page layout.

(a) Under app/src/main/res/layout, create a XML layout file and name it activity_login.xml. Copy and paste the below code snippet.

(b) Just as you did in step 5(a), create another XML layout file and name it activity_register.xml. Copy and paste the below code.

Step 6

Let’s create an Activity class for the designed login and registration page. I have created a new package named activities under my application package name. This helps in maintaining a clean code structure and also makes it easier to main code in the future.

(a) Create LoginActivity.java under the activities package as shown above. Copy and paste the below code snippet.

(b) Create RegisterActivity.java also under the activities package as shown above. Copy and paste the below code snippet.

4. Building the MainActivity screen using the Bottom Navigation View

Step 1

Create a menu folder to hold the menu resources that will be used. This menu folder should be created under app/src/main/res, as shown below.

(a) Create a menu resource named bottom_menu.xml under menu as shown above and copy below code snippet into it.

(b) Create another menu resource under menu and name it main_menu.xml. Copy and paste the below code into it.

Step 2

Open up the activity_main.xml that was created while setting up the initial project, update the file with the below code snippet, in order to match up with our project design layout.

Step 3

We need to create fragment for each sections represented in the Tab menu in our MainActivity screen. For this tutorial, we are working with three sections named Home, Dashboard and Profile section for demonstration purposes.

(a) Create a XML layout file under app/src/main/res/layout and name it fragment_home.xml. Copy and paste the below code snippet.

(b) Create fragment_dashboard.xml layout file and update with the below code snippet.

(c) Create fragment_profile.xml layout file. Copy the below code snippet into it.

Step 4

Create the fragment class for each of the fragment layout created in step 3. You should try to create a new package called fragment under your application name in other to keep your code structure clean.

(a) Create a class named HomeFragment.java. Update with the below code snippet below

(b) Create a class named DashboardFragment.java and update with the below code snippet

(c) Create a java class named ProfileFragment.java. Copy and paste the below code snippet

Step 5

Locate the MainActivity.java file and update with the code below.

5. Update the AndroidManifest.xml file

Here, we need to add the INTERNET permission, as well as register all newly create java activity classes. Your final AndroidManifest.xml file should be similar to the code snippet below.

6. Build and Run app on a device

Connect your Android device to your computer and click the run button in Android studio, select your device as the deployment target.

Your final project structure should be similar to what we have below:

Leave a Reply

Your email address will not be published. Required fields are marked *

Never miss a tutorial from us, get weekly updates in your inbox.