2019 Login & Registration Page With OTP Verification Android studio UI Design tutorial

This is the tutorial for the OTP verification UI design I don’t talk much as this is just an XML code you can understand.

So first create a new project and remove the action bar from the style.xml use NoActionbar as the theme.Now open your app level build file and add this dependency then sync the project.

dependencies {
    implementation 'com.chaos.view:pinview:1.3.2'    
}

Now open your activity_main.xml file and paste this XML code this will create the UI design for you so simple but you will get some error for the resources like font and images for that just click on this link and copy them from here-> Drawable Files & Fonts File

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/backgtound_png"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/topText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="25dp"
        android:layout_marginTop="68dp"
        android:layout_marginEnd="25dp"
        android:fontFamily="@font/baloo"
        android:text="You're cute. Can I have your number?"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--This is the first Step-->
    <android.support.constraint.ConstraintLayout
        android:id="@+id/first_step"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="60dp"
        android:orientation="vertical"
        android:visibility="gone"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="8dp"
            android:text="Full name"
            app:layout_constraintStart_toStartOf="@+id/username"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="25dp"
            android:layout_marginTop="12dp"
            android:layout_marginEnd="25dp"
            android:background="@drawable/edittext_background"
            android:hint="Whats your name?"
            android:inputType="textPersonName"
            android:padding="15dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="15dp"
            android:text="Phone number"
            app:layout_constraintStart_toStartOf="@+id/userPhone"
            app:layout_constraintTop_toBottomOf="@+id/username" />

        <EditText
            android:id="@+id/userPhone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="25dp"
            android:layout_marginTop="12dp"
            android:layout_marginEnd="25dp"
            android:layout_marginBottom="8dp"
            android:background="@drawable/edittext_background"
            android:hint="Your Phone number!"
            android:inputType="phone"
            android:padding="15dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView2" />


    </android.support.constraint.ConstraintLayout>

    <!--This is second step-->
    <android.support.constraint.ConstraintLayout
        android:id="@+id/secondStep"
        android:layout_width="match_parent"
        android:layout_height="148dp"
        android:layout_marginBottom="60dp"
        android:orientation="vertical"
        android:visibility="gone"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent">

        <TextView
            android:id="@+id/textView_noti"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:text="Enter the 4 digit OTP"
            android:textAlignment="center"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@+id/pinView"
            app:layout_constraintEnd_toEndOf="@+id/pinView"
            app:layout_constraintStart_toStartOf="@+id/pinView"
            app:layout_constraintTop_toTopOf="parent" />

        <com.chaos.view.PinView
            android:id="@+id/pinView"
            style="@style/PinWidget.PinView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginBottom="8dp"
            android:inputType="number"
            android:padding="10dp"
            android:textSize="18sp"
            app:itemCount="4"
            app:itemHeight="48dp"
            app:itemRadius="10dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:lineColor="@android:color/darker_gray"
            app:viewType="rectangle" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"
            android:text="Didn't get the OTP? RESEND OTP."
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/pinView"
            app:layout_constraintHorizontal_bias="0.473"
            app:layout_constraintStart_toStartOf="@+id/pinView"
            app:layout_constraintTop_toBottomOf="@+id/pinView" />

    </android.support.constraint.ConstraintLayout>

    <Button
        android:id="@+id/button"
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="40dp"
        android:background="@drawable/button_background"
        android:foreground="?android:attr/selectableItemBackground"
        android:text="Let's go!"
        android:textAllCaps="false"
        android:textColor="@android:color/white"
        android:textSize="17sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.496"
        app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>

Now open your MainActivity.java file and add this code so it will handle the errors and change the colors.

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private PinView pinView;
    private Button next;
    private TextView topText,textU;
    private EditText userName, userPhone;
    private ConstraintLayout first, second;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        /*requestWindowFeature(1);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
                WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
        getWindow().setStatusBarColor(Color.TRANSPARENT);*/
        setContentView(R.layout.activity_main);

        topText = findViewById(R.id.topText);
        pinView = findViewById(R.id.pinView);
        next = findViewById(R.id.button);
        userName = findViewById(R.id.username);
        userPhone = findViewById(R.id.userPhone);
        first = findViewById(R.id.first_step);
        second = findViewById(R.id.secondStep);
        textU = findViewById(R.id.textView_noti);
        first.setVisibility(View.VISIBLE);

        next.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {

        if (next.getText().equals("Let's go!")) {
            String name = userName.getText().toString();
            String phone = userPhone.getText().toString();

            if (!TextUtils.isEmpty(name) && !TextUtils.isEmpty(phone)) {
                next.setText("Verify");
                first.setVisibility(View.GONE);
                second.setVisibility(View.VISIBLE);
                topText.setText("I Still don't trust you.nTell me something that only two of us know.");
            } else {
                Toast.makeText(MainActivity.this, "Please enter the details", Toast.LENGTH_SHORT).show();
            }
        } else if (next.getText().equals("Verify")) {
            String OTP = pinView.getText().toString();
            if (OTP.equals("3456")) {
                pinView.setLineColor(Color.GREEN);
                textU.setText("OTP Verified");
                textU.setTextColor(Color.GREEN);
                next.setText("Next");
            } else {
                pinView.setLineColor(Color.RED);
                textU.setText("X Incorrect OTP");
                textU.setTextColor(Color.RED);
            }
        }

    }
}

That’s it you done your coding it’s simple now you can run this application and see how its look.

You can get the full source code from our GitHub Repository -> https://github.com/MonsterTechnoGit/OTP-Verification-UI–Sign-up-using-OTP-Verification–2019