Android Studio: Sign In & User Verification With Firebase Part 1

This tutorial will show you how to add a Sign In and create new user feature to your Android Studio app. For this tutorial you will need to create Firebase Account.

Firebase Authentication allows you to easily give your app the ability to create new users and Sign in current users using Phone Number, Email and Password.

To keep things simple this tutorial will be broken up into two parts. The first, will be building the UI layout of the app and part two will be coding and adding Firebase Auth features to the app.

Let’s Get Started!

Start by creating a new project, then select an empty activity.

Now let’s create Two more activities for this app. The first one will be named Register and the second SignIn. The Register activity will be for creating new users and the SignIn will be for signing in existing users. Do so by Right clicking on the Java File and Selecting New, the at the bottom of the list select Activity and then Empty Activity.

Let’s start with the activity_register.xml file and design the layout.

This layout out is going to consist of three elements Email EditText, Password EditText and Confirm Password EditText. The password and Confirm values must be the same in order for the user’s password to be set.

/// This sets the Email Edit Text   
 <EditText
   android:id="@+id/editText_email"
   android:layout_gravity="center_horizontal"
    android:layout_marginTop="100dp"
    android:layout_marginBottom="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Enter Email"
    android:gravity="center"
    android:ems="10"
    android:inputType="textEmailAddress"
     />

/// This sets the Password Edit Text   
    <EditText
    android:id="@+id/editText_password"
    android:layout_gravity="center_horizontal"
    android:layout_marginBottom="10dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Password"
    android:gravity="center"
    android:ems="10"
    android:inputType="textPassword"
    />
    
/// This sets the  Confirm Password Edit Text   
<EditText
        android:id="@+id/editText_passconfirm"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Confirm Password"
        android:gravity="center"
        android:ems="10"
        android:inputType="textPassword"
        />

/// Create Account Button    
    <Button
        android:id="@+id/button_create"
        android:layout_gravity="center"
        android:layout_marginTop="50dp"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:text="Create Account" />

Here is the activity_register.xml file.

Moving on to the activity_signin.xml layout. This layout will consist of two elements, Email Edit Text and a Password Edit Text. So, once a user creates an account the user can then Sign in and out of the app using the email and password they set.

activity_signin.xml

/// Setting Email Edit Text
<EditText
        android:id="@+id/editText_signEmail"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:gravity="center"
        android:hint="User Email"
        android:textSize="20sp" />

 /// Setting Password Edit Text   
<EditText
        android:id="@+id/editText_signPass"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:textSize="20sp"
       />

/// Creating SignIn Button 
    <Button
        android:id="@+id/button_signIn"
        android:layout_marginTop="55dp"
        android:layout_gravity="center_horizontal"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="Sign In"
        />

That is everything as far as the layout building goes, should be able to link the app to Firebase and start coding the Java files.

Before moving onto the second part of this tutorial lets go ahead and connect the app to Firebase. I you don’t have an account click the link and it will lead you to Firebase website where you can explore the Documentation and see what all their services have to offer.

Once you have an account, Go to the Tools tab in Android Studio and select Firebase.

Now select Authentication when the Firebase assistant pops up on the right side.

From there, click the Connect button and this should connect your app to Firebase. Also, if you don’t have the Firebase Dependencies added to your Build.Gradle it will ask you if you to set them. If you do it this way it should add them for you but if you want to do it manually here is a link to all the dependencies Firebase offers.

If everything was setup correctly it should display Connected.

That’s it for Part 1,In part two, we will start coding the functions of this app and finish setting up the Firebase console. Here is the link to Part Two of the tutorial.

Android Studio Loading Animation Between Activities

Progress Dialog is dialog showing a progress indicator and an optional text message or view. The methods of Progress Dialog being used in this tutorial are: ProgressDialog.setTitle() – Used to set title of dialog box ProgressDialog.setMessage() – Used to set dialog message being displayed ProgressDialog.setProgressStyle() – Choose the style of indicator ProgressDialog.dismiss() – Dismiss the … Read more Android Studio Loading Animation Between Activities

Android Studio Tutorial SeekBar

SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch thumb and drag left or right to set the current progress level or various other task. In this example, the seekbar will be used to display a percentage. As the user moves the SeekBar left to right the percentage value … Read more Android Studio Tutorial SeekBar

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s