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

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

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.

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'

Watch Youtube tutorial

 

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>

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!