Phone Number Verification – OTP pin View in Android studio – Part 10

by | Android Material Design Tutorials, Android UI/UX Tutorials, City Guide App, UI UX

In this tutorial, we will create material design OTP screen or PIN view in android studio. In the OTP screen user will have to enter the one time password and we will validate that password using firebase.

If you are following the series (City Guide App) then you may know that we already created login, signup, welcome screen till here and before that, a splash screen and dashboard will appear to every user.

Resources + Dependencies

So, before going to start coding, we should have to understand the flow and basics we need to get started with today’s android tutorial!

 

We have to add a dependency to use the Pin View for OTP in android studio. To add this dependency Goto->app->Gradle Scripts->build.gradle(Module: app) from the left project menu and paste these dependencies inside dependencies {}.

implementation 'com.chaos.view:pinview:1.4.3'

Watch Youtube tutorial

 

Design the OTP Pin View

First thing we have to do after adding dependency  is to design the OTP screen so for that we will create a new activity and in the we will design the OTP as we designed in our Youtube video. So, to design that just paste the code below.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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:background="@color/white"
    tools:context=".Common.LoginSignup.VerifyOTP">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="30dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="goToHomeFromOTP"
            android:padding="5dp"
            android:src="@drawable/general_close_icon"
            android:tint="@color/black"
            android:contentDescription="@string/todo" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:fontFamily="@font/muli_black"
            android:includeFontPadding="false"
            android:text="@string/otp_code_text"
            android:textAlignment="center"
            android:textAllCaps="true"
            android:textColor="@color/black"
            android:textSize="100sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:fontFamily="@font/muli_black"
            android:includeFontPadding="false"
            android:text="@string/otp_verification_text"
            android:textAlignment="center"
            android:textAllCaps="true"
            android:textColor="@color/black"
            android:textSize="24sp" />


        <TextView
            android:id="@+id/otp_description_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="50dp"
            android:fontFamily="@font/muli"
            android:includeFontPadding="false"
            android:text="@string/otp_description_text"
            android:textAlignment="center"
            android:textColor="@color/black"
            android:textSize="16sp" />


        <com.chaos.view.PinView
            android:id="@+id/pin_view"
            style="@style/PinWidget.PinView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:cursorVisible="true"
            android:inputType="number"
            android:itemBackground="#65EAEAEA"
            app:cursorColor="@color/black"
            app:hideLineWhenFilled="true"
            app:itemCount="6"
            app:itemHeight="50dp"
            app:itemRadius="5dp"
            app:itemWidth="50dp"
            app:lineColor="@color/colorAccent"
            app:lineWidth="1dp" />


        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:background="@color/colorPrimary"
            android:onClick="callNextScreenFromOTP"
            android:text="@string/verify_code"
            android:textColor="@color/black"
            android:transitionName="transition_OTP_screen" />


    </LinearLayout>

</ScrollView>

Add Shared Animation

Once we have created the OTP Pin view design, now we want to call this activity from Signup Screen we created previously. To add the shared animation we will add the code with Intent to perform the animation but first, we should have to have all the transition names setup as I already explained. After adding transition names just paste this code inside the signup Java class in the function which executes when the user presses the Verify Code Button.


Intent intent = new Intent(getApplicationContext(), VerifyOTP.class);

//Add Transition
Pair[] pairs = new Pair[1];
pairs[0] = new Pair<View, String>(scrollView, "transition_OTP_screen");
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
  ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(SignUp3rdClass.this, pairs);
  startActivity(intent, options.toBundle());
} else {
  startActivity(intent);
}

Join Us

Videos are always a better source for in-depth knowledge so, join us at YouTube and get notified on each new upload.

Android Studio Complete Project Bulls rent- Splash Screen- Login Screen with validation- Signup Screen- User profile- Phone number verification OTP- Google verification

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!

FLUTTER APP

Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

You can watch it on YouTube or read and get source code from Blog Post.

You have Successfully Subscribed!