Firebase Authentication 02 - Login form

First of all you have to connect your app to Firebase. You can use “Firebase Authentication 01 – connect Firebase” article to connect your app to Firebase.

Let’s start Firebase Authentication 02 – Login form article. And also we can use firebase android to google analytics android, firebase push notification, firebase database, firebase analytics app like wise.

First you need to design a login form. To do that create a new Empty Activity called “LoginActivity”. In here I am going to design a Login form like this.

In here, I used a drawable xml file for the background. You can see a Blue shape background. Others are two Editboxs and one button. I used two Textviews to display “sign in” title and “Don;t have an account? sign up”. That’s it. very simple. Let’s design background drawable resource xml file.

Drawable XML file

To create a drawable file, right click on the drawable file and click new. Then select “Drawable Resource File”. In here I name it as “background”. Here is the code for that xml file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:bottomLeftRadius="100dp"
        android:bottomRightRadius="300dp"/>
    <solid android:color="#04095E"/>
</shape>

In here “<?xml version=”1.0″ encoding=”utf-8″?>” is the default line, when you create a new file. Using “shape” tag, you can create a shape in the drawable file. I used “corners” tag to adjust corners in the shape. you can see I added radius for the bottom left and right corners.

Let’s design activity_login.xml

Go to LoginActivity’s layout resource xml file. Here is the code for that.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/background"
        android:orientation="vertical">

        <ProgressBar
            android:id="@+id/login_progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:indeterminate="true"
            android:visibility="invisible" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="170dp"
                android:text="SIGN IN"
                android:textAlignment="center"
                android:textColor="#ffffff"
                android:layout_marginBottom="10dp"
                android:textSize="15dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
            <EditText
                android:id="@+id/setup_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Sign in with Email"
                android:layout_marginLeft="50dp"
                android:layout_marginRight="50dp"
                android:layout_marginTop="40dp"
                android:gravity="center"
                android:background="#ffffff"
                android:padding="10dp"
                android:ems="10"
                android:inputType="textPersonName" />
            <EditText
                android:id="@+id/re"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:background="#ffffff"
                android:padding="10dp"
                android:gravity="center"
                android:layout_marginLeft="50dp"
                android:layout_marginRight="50dp"
                android:layout_marginTop="10dp"
                android:ems="10"
                android:inputType="textPersonName" />
            <Button
                android:id="@+id/login_btn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="50dp"
                android:layout_marginLeft="50dp"
                android:layout_marginRight="50dp"
                android:textColor="#04095E"
                android:background="#ffffff"
                android:text="Sign In" />
            <TextView
                android:id="@+id/regTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Don't have an Account? Sign Up"
                android:layout_marginLeft="30dp"
                android:layout_marginTop="20dp"
                android:layout_marginRight="30dp"
                android:textColor="#ffffff"
                android:textAlignment="center"/>
            
        </LinearLayout>

    </LinearLayout>
</RelativeLayout>

Let’s code LoginActivity.java class

Open you java class. Here is the code for that.

onstart() method – This method will run when this LoginActivity.java class start. So it will check App user is a current user or not. It means the user already registered to system or not. If user is registered, app will redirect to MainActivity.class (sendToMain() is a function for create intent to redirect to MainActivity.class) click here to refer Android Intent.
Above oncreate() method, you have to define Firebase instance and other instance regarding to Edittexts, Textviews, Buttons and the progressbar (I used progree bar in here)

Before run the app, you need an user. because we don’t have registration form to create an user. So log in to your Firebase console using firebase.google.com

Then go to your project and select the Authentication tab.

Authentication tab | Firebase Authentication 02 – Login form

Then go to “sign in method” tab. In here you can see various type of sign in method. But in this article we are discussing sign in using email and the password. so click “Email/password” row.

You can enable the top enable button. You don’t need to Enable the below one. If you enable the below one, the user can log into your app using only email link. Let’s only talk about sign in using email and also the password.

Go to Users tab and click “Add user” button. Then give an example user.