How to Create a Login Page Activity in Android using the Firebase ?
Hello Guys. In this blog, I am going to show you how to create a Login page activity in android using the firebase. Later in this blog, I will make a link between the Registration page activity which we created in the previous tutorial blog and the Login page activity.
If you want to have a look at how our application will look and work, then check out my youtube video. The link is given below.
If you have not yet checked how to create a Registration page activity, check out my blog post whose link is given below.
How to create a Registration Page Activity in Android using the Firebase?
Watch my YouTube video to get more clarity on how to create a Login page activity using the firebase.
Here, we are using "Firebase" in our android project to create a registration activity and a login activity because firebase provides us a central authentication mechanism where you can easily manage the users who registered in your android application.
Firebase provides us the methods using we can create users using email and password and store the detail on Google servers which makes our work a lot easier as compared to the scenario where we have to take care of all the data and create an authentication mechanism. Also, Firebase provides us the methods to send the reset password link to the email.
Step 1:-
Copy and paste the following XML code in the activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/white"
android:gravity="center"
android:orientation="vertical"
android:padding="@dimen/activity_horizontal_margin">
<ImageView
android:layout_width="@dimen/logo_w_h"
android:layout_height="@dimen/logo_w_h"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="30dp"
android:src="@mipmap/ic_launcher" />
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/login_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:hint="@string/hint_email"
android:inputType="textEmailAddress"
android:textColor="@android:color/black"
android:textColorHint="@android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/login_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:hint="@string/hint_password"
android:inputType="textPassword"
android:textColor="@android:color/black"
android:textColorHint="@android:color/black" />
</com.google.android.material.textfield.TextInputLayout>
<!-- Login Button -->
<Button
android:id="@+id/login_sign_in_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:background="@color/colorAccent"
android:text="@string/btn_login"
android:textColor="@android:color/black" />
<Button
android:id="@+id/login_btn_reset_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:background="@null"
android:text="@string/btn_forgot_password"
android:textAllCaps="false"
android:textColor="@color/colorAccent" />
<!-- Link to Login Screen -->
<Button
android:id="@+id/btn_signup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="@null"
android:text="@string/btn_link_to_register"
android:textAllCaps="false"
android:textColor="@color/colorAccent"
android:textSize="15dp" />
</LinearLayout>
<ProgressBar
android:id="@+id/login_progressBar"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center|bottom"
android:layout_marginBottom="20dp"
android:visibility="gone" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In this layout file, we are adding two TextInput to get the user's registered email id and password. Then we are adding three buttons, one to log in, second to switch to reset password activity, and third to switch to Registration page activity.
Step 2:-
Copy and paste the following code into the MainActivity.java file.
package techy.vaibhav.demo_project;
//import androidx.annotation.NonNull;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.text.TextUtils;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ProgressBar;
import android.widget.Toast;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.auth.FirebaseUser;
public class MainActivity extends AppCompatActivity {
private EditText inputEmail, inputPassword;
private FirebaseAuth firebaseAuth;
private ProgressBar progressBar;
private Button btnSignup, btnLogin, btnReset;
private FirebaseUser firebaseUser;
private Boolean doubleBackPressed = false;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//Get Firebase Auth Instance
firebaseAuth = FirebaseAuth.getInstance();
firebaseUser = firebaseAuth.getCurrentUser();
if(firebaseUser != null){
gotoUserProfile();
finish();
}
setContentView(R.layout.activity_main);
// Set the dimensions of the sign-in button.
//Toolbar toolbar = findViewById(R.id.toolbar);
//setSupportActionBar(toolbar);
inputEmail = findViewById(R.id.login_email);
inputPassword = findViewById(R.id.login_password);
btnLogin = findViewById(R.id.login_sign_in_button);
btnSignup = findViewById(R.id.btn_signup);
btnReset = findViewById(R.id.login_btn_reset_password);
progressBar = findViewById(R.id.login_progressBar);
btnSignup.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, SignupActivity.class));
}
});
btnReset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, ResetPasswordActivity.class));
//Toast.makeText(getApplicationContext(), "Reset Password Activity will initiate!", Toast.LENGTH_SHORT).show();
}
});
btnLogin.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String email = inputEmail.getText().toString();
final String password = inputPassword.getText().toString();
if (TextUtils.isEmpty(email)) {
Toast.makeText(getApplicationContext(), "Enter email address!", Toast.LENGTH_SHORT).show();
return;
}
if (TextUtils.isEmpty(password)) {
Toast.makeText(getApplicationContext(), "Enter password!", Toast.LENGTH_SHORT).show();
return;
}
progressBar.setVisibility(View.VISIBLE);
//authenticate user
firebaseAuth.signInWithEmailAndPassword(email, password)
.addOnCompleteListener(MainActivity.this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
// If sign in fails, display a message to the user. If sign in succeeds
// the auth state listener will be notified and logic to handle the
// signed in user can be handled in the listener.
progressBar.setVisibility(View.GONE);
if (!task.isSuccessful()) {
// there was an error
if (password.length() < 6) {
inputPassword.setError(getString(R.string.minimum_password));
} else {
Toast.makeText(MainActivity.this, getString(R.string.auth_failed), Toast.LENGTH_LONG).show();
}
} else {
//user = auth.getCurrentUser();
gotoUserProfile();
finish();
}
}
});
}
});
}
@Override
protected void onStart(){
super.onStart();
}
private void gotoUserProfile(){
Intent intent=new Intent(getApplicationContext(),HomePage.class);
startActivity(intent);
}
}
In the above code, we are adding action to the login button, where we are checking whether the user who is trying to log in, is a registered user or not. If the user is a registered user, then the HomePage activity will get open otherwise it will be showing an error. The other two buttons are responsible for switching to the respective activities like btnReset to switch to the Reset password activity while btnSignup to switch to the Registration page activity which we created in the previous blog.
Step 3:-
The above code must be giving an error showing that the HomePage java class is not present. To solve the error, create an empty activity with the name "HomePage". We will add code to this java file in the next blog. Till then, just leave it as it is. If the user is able to login successfully, this empty activity would get open.
Step 4:-
If you remember, you made the changes in the AndroidManifest.xml file where you changed the Launcher activity as "SignupActivity" to run and test the Registration part. Now change the following code in the AndroidManifest.xml file from:-
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".SignupActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
To
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".home_page"></activity>
<activity android:name=".SignupActivity" />
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
Now, MainActivity is your launcher activity.
Now run the application. Input the required email id, and password and click on "Login". Login should be done successfully.
In the next part of the blog, I am going to create the Reset password activity as well as would modify the HomePage activity to display the email id of the logged-in user and will integrate it into the same application. So stay tuned.
For More Posts, Follow my blog.
You can follow me on Instagram:-
http://instagram.com/vaibhavu3u
Comments
Post a Comment