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

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>

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!

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