Complete Forget Password Screens – UI/UX Design in Android – Part 11

by | Jul 4, 2020 | Android for Beginners, Android Material Design Tutorials, Android UI/UX Tutorials, Basics, City Guide App, UI UX | 0 comments

Forget Password Screens in android studio by taimoor sikander

In this tutorial, we will create material design multiple screens for forget password in android studio. We will use slide animations and apply them when new screen appears.

Screens we will create are Forget Password Screen to get the phone number instead of email, then we will let the user select the options available OR simply call the OTP Screen we already designed, after that, we will allow the user to set a new password and at last show success message.

Get Complete Code

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!

 

Download images and icons

As we will use material design (Know more about Material design) so, We have to add a dependency to use the Material Design dependency 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.google.android.material:material:1.1.0'

 

Setup Material design dependency and Theme

Watch Youtube tutorial

 

Subscribe

Add Animations

To add animations we have to first create animation files in Goto->app->res->anim->slide_animation and paste this code below in side onCreate(). To add shared animations click here.

Animation File

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

    <translate
        android:fromYDelta="20%"
        android:fromXDelta="0%"
        android:duration="1000"/>

    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="1000"/>

</set>

Animation Usage in Java

 //Animation Hook
animation = AnimationUtils.loadAnimation(this, R.anim.slide_animation);

//Set animation to all the elements
screenIcon.setAnimation(animation);
title.setAnimation(animation);
description.setAnimation(animation);
phoneNumberTextField.setAnimation(animation);
countryCodePicker.setAnimation(animation);
nextBtn.setAnimation(animation);

Code

To get the complete code click here.

<?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"
    android:padding="30dp"
    tools:context=".Common.LoginSignup.ForgetPassword">


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


        <ImageView
            android:id="@+id/forget_password_back_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="callBackScreenFromForgetPassword"
            android:padding="5dp"
            android:src="@drawable/general_back_icon" />


        <ImageView
            android:id="@+id/forget_password_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="50dp"
            android:src="@drawable/forget_password_icon" />


        <TextView
            android:id="@+id/forget_password_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="36dp"
            android:fontFamily="@font/muli_black"
            android:gravity="center"
            android:includeFontPadding="false"
            android:text="Forget\nPassword"
            android:textAlignment="center"
            android:textAllCaps="true"
            android:textColor="@color/black"
            android:textSize="30sp" />


        <TextView
            android:id="@+id/forget_password_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:fontFamily="@font/muli"
            android:gravity="center"
            android:text="@string/forget_password_detail"
            android:textAlignment="center"
            android:textColor="@color/black"
            android:textSize="16sp" />


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <com.hbb20.CountryCodePicker
                android:id="@+id/country_code_picker"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:background="@drawable/black_border"
                android:padding="7dp"
                app:ccp_autoDetectCountry="true"
                app:ccp_showFlag="true"
                app:ccp_showFullName="true"
                app:ccp_showNameCode="true" />


            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/forget_password_phone_number"
                style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/country_code_picker"
                android:layout_marginTop="10dp"
                android:hint="@string/enter_phone_number"
                android:textColorHint="@color/black"
                app:boxBackgroundColor="@color/lightWhite"
                app:boxStrokeColor="@color/black"
                app:boxStrokeWidthFocused="2dp"
                app:endIconMode="clear_text"
                app:endIconTint="@color/black"
                app:hintTextColor="@color/black"
                app:startIconDrawable="@drawable/field_phone_number_icon"
                app:startIconTint="@color/black">


                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fontFamily="@font/muli_semibold"
                    android:inputType="phone"
                    android:textColor="@color/black"
                    android:textCursorDrawable="@null" />


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


            <Button
                android:id="@+id/forget_password_next_btn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/forget_password_phone_number"
                android:layout_gravity="center"
                android:layout_marginTop="20dp"
                android:background="@color/colorPrimary"
                android:onClick="verifyPhoneNumber"
                android:text="@string/next_btn"
                android:textColor="@color/black" />


        </RelativeLayout>


    </LinearLayout>


</ScrollView>
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:padding="30dp"
    tools:context=".Common.LoginSignup.MakeSelection">


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


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="callBackScreenFromMakeSelection"
            android:padding="5dp"
            android:src="@drawable/general_back_icon" />


        <TextView
            android:id="@+id/make_selection_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:fontFamily="@font/muli_black"
            android:text="@string/make_selection"
            android:textAllCaps="true"
            android:textColor="@color/black"
            android:textSize="35sp" />


        <TextView
            android:id="@+id/make_selection_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="@font/muli"
            android:text="@string/make_selection_detail"
            android:textColor="@color/black"
            android:textSize="16sp" />


        <RelativeLayout
            android:id="@+id/make_selection_sms_box"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_marginTop="50dp"
            android:background="@color/lightWhite"
            android:padding="10dp">


            <ImageView
                android:id="@+id/mobile_icon"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:src="@drawable/mobile_custom_icon" />


            <TextView
                android:id="@+id/mobile_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="48dp"
                android:layout_toRightOf="@id/mobile_icon"
                android:fontFamily="@font/muli"
                android:text="@string/via_sms"
                android:textSize="20sp" />


            <TextView
                android:id="@+id/mobile_des"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/mobile_title"
                android:layout_toRightOf="@id/mobile_icon"
                android:fontFamily="@font/muli"
                android:text="+923332562233"
                android:textColor="@color/black"
                android:textSize="20sp" />


            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/transparent"
                android:onClick="callOTPScreenFromMakeSelection" />


        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/make_selection_mail_box"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:layout_marginTop="20dp"
            android:background="@color/lightWhite"
            android:padding="10dp">


            <ImageView
                android:id="@+id/mail_icon"
                android:layout_width="60dp"
                android:layout_height="55dp"
                android:layout_centerVertical="true"
                android:layout_marginRight="20dp"
                android:src="@drawable/mail_custom_icon" />


            <TextView
                android:id="@+id/mail_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="48dp"
                android:layout_toRightOf="@id/mail_icon"
                android:fontFamily="@font/muli"
                android:text="@string/via_mail"
                android:textSize="20sp" />


            <TextView
                android:id="@+id/mail_des"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/mail_title"
                android:layout_toRightOf="@id/mail_icon"
                android:fontFamily="@font/muli"
                android:text="support@gmail.com"
                android:textColor="@color/black"
                android:textSize="20sp" />


            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/transparent" />


        </RelativeLayout>


    </LinearLayout>


</ScrollView>
<?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"
    android:padding="30dp"
    tools:context=".Common.LoginSignup.SetNewPassword">


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


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


        <ImageView
            android:id="@+id/set_new_password_icon"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_gravity="center"
            android:layout_marginTop="50dp"
            android:src="@drawable/update_new_password_icon" />


        <TextView
            android:id="@+id/set_new_password_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:fontFamily="@font/muli_black"
            android:gravity="center"
            android:text="@string/new_credentials"
            android:textAlignment="center"
            android:textAllCaps="true"
            android:textColor="@color/black"
            android:textSize="30sp" />


        <TextView
            android:id="@+id/set_new_password_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:fontFamily="@font/muli"
            android:gravity="center"
            android:text="@string/new_credentials_detail"
            android:textAlignment="center"
            android:textColor="@color/black"
            android:textSize="16sp" />


        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/new_password"
                style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="40dp"
                android:hint="New Password"
                android:textColorHint="@color/black"
                app:boxBackgroundColor="@color/lightWhite"
                app:boxStrokeColor="@color/black"
                app:boxStrokeWidthFocused="2dp"
                app:endIconMode="password_toggle"
                app:endIconTint="@color/black"
                app:startIconDrawable="@drawable/field_password_icon"
                app:startIconTint="@color/black">


                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword" />


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


            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/confirm_password"
                style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/new_password"
                android:layout_marginTop="10dp"
                android:hint="Confirm Password"
                android:textColorHint="@color/black"
                app:boxBackgroundColor="@color/lightWhite"
                app:boxStrokeColor="@color/black"
                app:boxStrokeWidthFocused="2dp"
                app:endIconMode="password_toggle"
                app:endIconTint="@color/black"
                app:startIconDrawable="@drawable/field_password_icon"
                app:startIconTint="@color/black">


                <com.google.android.material.textfield.TextInputEditText
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword" />


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


            <Button
                android:id="@+id/set_new_password_btn"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/confirm_password"
                android:layout_marginTop="20dp"
                android:background="@color/colorPrimary"
                android:onClick="setNewPasswordBtn"
                android:text="Update" />


        </RelativeLayout>


    </LinearLayout>


</ScrollView>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="30dp"
    tools:context=".Common.LoginSignup.ForgetPasswordSuccessMessage">


    <!--         there will be no back button here!
    So we can just use only parent liner layout and add gravity="center"-->

    <TextView
        android:id="@+id/success_message_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="-50dp"
        android:fontFamily="@font/muli_black"
        android:gravity="center"
        android:text="@string/password_updated"
        android:textAlignment="center"
        android:textAllCaps="true"
        android:textColor="@color/black"
        android:textSize="30sp" />


    <ImageView
        android:id="@+id/success_message_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:src="@drawable/password_updated_icon" />


    <TextView
        android:id="@+id/success_message_description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@font/muli"
        android:gravity="center"
        android:text="@string/password_updated_success_message"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="16sp" />


    <Button
        android:id="@+id/success_message_btn"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@color/black"
        android:onClick="backToLogin"
        android:text="@string/login"
        android:textColor="@color/white" />


</LinearLayout>
Get Complete Code

Recommended Posts

 

 

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

Subscribe
Download City Guide
Download Bulls Rent

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
Access Admin Panel, Premium Tutorials, Live Chat, 50% off Codes, and More on Patreon!
Join Now!
This is default text for notification bar
Learn more