Categories: softare development

Login Form With Toggle Password Visibility in Android Studio: A Step By Step Process

Login forms help give authentication to users of a particular platform, and it is utilised most applications.

The toggle password visibility button both reveal and hide the passwords of user as they enter them in the password.

This helps users see and verify their password combination before clicking the the submit button.

Let’s see how to implement Login and Registration form in Android Studio.

1. Create a new Android Studio Project

Create new Android Studio Project

2. Choose Empty Activity

Choose Empty Activity

3. Name Your Project and Click Finish

4. Add Show and Hide icons to Drawable Folder

Go to File -> New -> Vector Asset

Add assets

5. Click on the clip art icon and search icon

Add icon

6. Add the following code to your activity_main.xml or similar layout

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/layout_first"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_marginTop="27dp">


        <ImageView
            android:layout_width="90dp"
            android:padding="18dp"
            android:layout_height="90dp"
            android:background="@drawable/round_layout"
            android:src="@drawable/key" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_marginTop="18dp"
            android:text="@string/wlc_sign_in"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/form"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="27dp"
        android:paddingEnd="27dp"
        android:gravity="center"
        android:layout_marginTop="36dp"
        android:orientation="vertical"
        android:layout_below="@+id/layout_first">

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/email"
            app:startIconDrawable="@drawable/ic_baseline_email_24"
            android:background="@color/white"
            android:layout_marginBottom="27dp">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:background="@color/white"
                android:ems="15"/>

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/password"
            app:startIconDrawable="@drawable/ic_baseline_lock_24"
            android:background="@color/white"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/primaryColor"
            android:layout_marginBottom="36dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:background="@color/white"
            android:ems="15"/>

    </com.google.android.material.textfield.TextInputLayout>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="13dp"
            android:text="@string/login_name"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/form"
        android:layout_marginTop="9dp"
        android:layout_centerHorizontal="true">

        <TextView
            android:id="@+id/signin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/primaryColor"
            android:text="@string/dont_have"/>

    </LinearLayout>

</RelativeLayout>

You will also notice, there’s an ImageView which you can replace with your own project image by simply adding it to the drawable folder:

7. Let’s add the code for Registration as follows:

<?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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <LinearLayout
        android:id="@+id/layout_first"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        android:layout_marginTop="18dp">


        <ImageView
            android:layout_width="117dp"
            android:padding="3dp"
            android:layout_height="90dp"
            android:src="@drawable/add" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:layout_marginTop="18dp"
            android:text="@string/wlc_sign_up"/>

    </LinearLayout>

    <LinearLayout
        android:id="@+id/form"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingStart="27dp"
        android:paddingEnd="27dp"
        android:gravity="center"
        android:layout_marginTop="36dp"
        android:orientation="vertical"
        android:layout_below="@+id/layout_first">

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/username"
            app:startIconDrawable="@drawable/ic_baseline_person_24"
            android:background="@color/white"
            android:layout_marginBottom="27dp">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:background="@color/white"
                android:ems="15"/>

        </com.google.android.material.textfield.TextInputLayout>

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/email"
            app:startIconDrawable="@drawable/ic_baseline_email_24"
            android:background="@color/white"
            android:layout_marginBottom="27dp">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:background="@color/white"
                android:ems="15"/>

        </com.google.android.material.textfield.TextInputLayout>


        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/password"
            app:startIconDrawable="@drawable/ic_baseline_lock_24"
            android:background="@color/white"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/primaryColor"
            android:layout_marginBottom="36dp">

            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:background="@color/white"
                android:ems="15"/>

        </com.google.android.material.textfield.TextInputLayout>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="13dp"
            android:text="@string/login_name"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/form"
        android:layout_marginTop="9dp"
        android:layout_centerHorizontal="true">

        <TextView
            android:id="@+id/signup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/primaryColor"
            android:text="@string/already_member"/>

    </LinearLayout>

</RelativeLayout>

8. Add the following to strings.xml file

 <string name="login_name">Sign in</string>
    <string name="register_name">Sign up</string>
    <string name="wlc_sign_in">Welcome back, sign in</string>
    <string name="wlc_sign_up">Sign up to continue</string>
    <string name="email">Email</string>
    <string name="password">Password</string>
    <string name="already_member">Already have an account, Sign in</string>
    <string name="dont_have">Don\'t have an account, Sign up</string>
    <string name="username">Username</string>

9. Finally add relevant colours to colors.xml file

 <color name="primaryColor">@color/darkIndigo</color>
    <color name="buttonColor">#800000</color>
    <color name="diamondDust">#f8f5e6</color>
    <color name="gray">#999</color>
    <color name="darkIndigo">#171d4b</color>
    <color name="gooseBerry">#afe19f</color>

10. Run the app. You should have something like this:

Login screen

Register screen

Why the Confirm Password Field is Useless

Leave a Comment
Share
Published by
codeflare
5 years ago

Recent Posts

How to Set Up Error Pages

Access all our software development training materials here. Error pages are custom web pages shown…

4 days ago

Compiler vs Interpreter — When to Choose What

At the heart of every programming language lies a crucial question: how does human-readable code become…

1 week ago

The Third Industrial Revolution (The Digital Revolution)

The Third Industrial Revolution refers to the transformative period in which digital technologies replaced analog and mechanical…

1 week ago

Linux Steam Locomotive Bash program

What is Steam Locomotive (sl)? Steam Locomotive (sl) is a small terminal program on Unix/Linux systems…

4 weeks ago

Rate Limiting in Node JS

What is Rate Limiting? Download this article as a PDF on the Codeflare Mobile App…

1 month ago

JavaScript promise chaining

Learn on the Go. Download the Codeflare Mobile from iOS App Store.  1. What is…

1 month ago

Find Us

Address
Suite C3-19, Central Market Plaza, Beside Sledge Resort, Off Byazhin Roundabout, Kubwa, Abuja.

Hours
Monday–Friday: 8:00AM–5:00PM
Saturday: 9:00AM–4:00PM