Android Knowledge

Easy Login Page in Android Studio using Java – 5 Steps Only!

Table of Contents

What is Login Page?

The login page is used for authentication purposes in the applications. We required a firstly sign-up page where users will register themselves and will be able to log in further using a username and password

In this project, we have created a simple login page in the android studio where the authentication purpose is static, meaning the username and password will already be set in the code. With the same set of usernames and passwords, the user has to log in.

Pre-requisite Color

Please find the brand color as #8692f7 (Purple)

Add the color in the colors.xml file as given:

    <color name="purple">#8692f7</color>

Download Login Background Image

Download the login background image for free:

login page background android
Download

Step-by-Step Implementation:

Step 1: Open Android Studio, Create New Project and Choose Empty Activity. Click Finish.

create new project login android

Step 2: Add Color under folder res ->values->colors.xml

You can use any color according to your app requirements, I have used our brand color #8692f7.

    <color name="purple">#8692f7</color>

Step 3: Create custom_edittext.xml

Right-click on the drawable folder under the res folder then click on New -> Drawable Resource File

The round corners are 20dp, you can customize them as per your requirements.

Type the below code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke
        android:width="3dp"
        android:color="@color/purple"/>
    <corners
        android:radius="20dp"/>
</shape>

Step 4: Type the below code in activity_main.xml

We have created a minimal and beautiful design for the login page in android studio.

We have used Linear Layout in which a CardView is present and then further two EditText and one Button.

To give it a style, we have added the CardView background as custom_edittext.xml which will provide round corners with purple color.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="@drawable/loginbkg"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        app:cardCornerRadius="30dp"
        app:cardElevation="20dp"
        android:background="@drawable/custom_edittext">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_gravity="center_horizontal"
            android:padding="24dp">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Login"
                android:id="@+id/loginText"
                android:textSize="36sp"
                android:textAlignment="center"
                android:textStyle="bold"
                android:textColor="@color/purple"/>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:id="@+id/username"
                android:background="@drawable/custom_edittext"
                android:drawableLeft="@drawable/ic_baseline_person_24"
                android:drawablePadding="8dp"
                android:hint="Username"
                android:padding="8dp"
                android:textColor="@color/black"
                android:textColorHighlight="@color/cardview_dark_background"
                android:layout_marginTop="40dp"/>

            <EditText
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:id="@+id/password"
                android:background="@drawable/custom_edittext"
                android:drawableLeft="@drawable/ic_baseline_lock_24"
                android:drawablePadding="8dp"
                android:hint="Password"
                android:padding="8dp"
                android:inputType="textPassword"
                android:textColor="@color/black"
                android:textColorHighlight="@color/cardview_dark_background"
                android:layout_marginTop="20dp"/>

            <Button
                android:layout_width="match_parent"
                android:layout_height="60dp"
                android:id="@+id/loginButton"
                android:text="Login"
                android:textSize="18sp"
                android:layout_marginTop="30dp"
                android:backgroundTint="@color/purple"
                app:cornerRadius = "20dp"/>

        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Not yet registered? SignUp Now"
        android:textSize="14sp"
        android:textAlignment="center"
        android:id="@+id/signupText"
        android:textColor="@color/purple"
        android:layout_marginBottom="20dp"/>

</LinearLayout>

Step 5: Type the below code in MainActivity.java

There is a button named as loginButton on which we have set an onClickListener and in that, we have written the below logic.

We have set the username as “user” and the password as “1234”, so if the string matches with the user’s string then the toast will be shown as Login Successful but if the user’s string does not match with the static string then the toast will be shown as “Login Failed!”.

package com.example.loginscreen;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    EditText username;
    EditText password;
    Button loginButton;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        username = findViewById(R.id.username);
        password = findViewById(R.id.password);
        loginButton = findViewById(R.id.loginButton);

        loginButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (username.getText().toString().equals("user") && password.getText().toString().equals("1234")) {
                    Toast.makeText(MainActivity.this, "Login Successful!", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "Login Failed!", Toast.LENGTH_SHORT).show();
                }
            }
        });
    }
}

Output

login page android studio

AK Bonus Points

  • As it was a beginner-friendly project, we created a simple login page in the android studio without using any database.
  • You can use Firebase or SQL as a database to store user details.
  • You will require a signup or register page for sure to let your user signup first and then login into your app.

If you have any queries or errors, please feel free to comment below 🙂

For detailed steps, watch our youtube video: Login Page in Android Studio

Check our popular post here: How to Create Splash Screen in Android Studio