From 329ca4d1b0b2f8323a175075daaca7d64d4d888b Mon Sep 17 00:00:00 2001
From: Jay Panchal <jay@logicrays.com>
Date: Tue, 12 Nov 2024 17:41:48 +0530
Subject: [PATCH 1/2] Set common appbar in connectId screens

Set common app bar in connectId screens
---
 app/AndroidManifest.xml                       |   1 +
 app/res/drawable/bottom_shadow.xml            |  11 +
 .../drawable/ic_connect_action_overflow.xml   |  13 +
 app/res/drawable/ic_connect_arrow_back.xml    |  13 +
 app/res/layout/connectid_common_title_bar.xml |  72 ++++
 app/res/layout/fragment_recovery_code.xml     |  18 +-
 .../fragment_secondary_phone_number.xml       | 342 +++++++++---------
 app/res/layout/fragment_signup.xml            |  16 +-
 .../layout/screen_connect_password_verify.xml |  16 +-
 .../layout/screen_connect_phone_verify.xml    |  16 +-
 .../layout/screen_connect_primary_phone.xml   |  16 +-
 app/res/layout/screen_connect_verify.xml      |  17 +-
 app/res/values/themes.xml                     |  38 ++
 .../activities/connect/ConnectIdActivity.java |   6 -
 .../fragments/BreadcrumbBarFragment.java      |  10 +-
 .../ConnectIDSecondaryPhoneNumber.java        |  11 +-
 .../connectId/ConnectIDSignupFragment.java    |  11 +-
 .../ConnectIdBiometricConfigFragment.java     |  15 +-
 ...ConnectIdPasswordVerificationFragment.java |  11 +-
 .../connectId/ConnectIdPhoneFragment.java     |  11 +-
 .../ConnectIdPhoneVerificationFragmnet.java   |  11 +-
 .../connectId/ConnectIdPinFragment.java       |  22 +-
 .../commcare/utils/ConnectIdAppBarUtils.java  |  84 +++++
 .../commcare/views/connect/CustomOtpView.java | 159 ++++++++
 24 files changed, 747 insertions(+), 193 deletions(-)
 create mode 100644 app/res/drawable/bottom_shadow.xml
 create mode 100644 app/res/drawable/ic_connect_action_overflow.xml
 create mode 100644 app/res/drawable/ic_connect_arrow_back.xml
 create mode 100644 app/res/layout/connectid_common_title_bar.xml
 create mode 100644 app/src/org/commcare/utils/ConnectIdAppBarUtils.java
 create mode 100644 app/src/org/commcare/views/connect/CustomOtpView.java

diff --git a/app/AndroidManifest.xml b/app/AndroidManifest.xml
index da9698ed6b..8e2b3444dc 100644
--- a/app/AndroidManifest.xml
+++ b/app/AndroidManifest.xml
@@ -171,6 +171,7 @@
 
         <activity
             android:name="org.commcare.activities.connect.ConnectIdActivity"
+            android:theme="@style/NoAppBarTheme"
             android:exported="true" />
         <activity
             android:name="org.commcare.activities.connect.ConnectActivity"
diff --git a/app/res/drawable/bottom_shadow.xml b/app/res/drawable/bottom_shadow.xml
new file mode 100644
index 0000000000..f77c7a8d43
--- /dev/null
+++ b/app/res/drawable/bottom_shadow.xml
@@ -0,0 +1,11 @@
+<!-- bottom_shadow.xml -->
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <gradient
+                android:startColor="@color/connect_blue_color_50"
+                android:endColor="@android:color/transparent"
+                android:angle="270" />
+        </shape>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/app/res/drawable/ic_connect_action_overflow.xml b/app/res/drawable/ic_connect_action_overflow.xml
new file mode 100644
index 0000000000..07e41af307
--- /dev/null
+++ b/app/res/drawable/ic_connect_action_overflow.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <group>
+        <clip-path
+            android:pathData="M0,0h24v24h-24z"/>
+        <path
+            android:pathData="M12,19.269C11.587,19.269 11.234,19.122 10.941,18.828C10.647,18.535 10.5,18.181 10.5,17.769C10.5,17.357 10.647,17.003 10.941,16.709C11.234,16.416 11.587,16.269 12,16.269C12.413,16.269 12.766,16.416 13.059,16.709C13.353,17.003 13.5,17.357 13.5,17.769C13.5,18.181 13.353,18.535 13.059,18.828C12.766,19.122 12.413,19.269 12,19.269ZM12,13.5C11.587,13.5 11.234,13.353 10.941,13.059C10.647,12.765 10.5,12.412 10.5,12C10.5,11.587 10.647,11.234 10.941,10.941C11.234,10.647 11.587,10.5 12,10.5C12.413,10.5 12.766,10.647 13.059,10.941C13.353,11.234 13.5,11.587 13.5,12C13.5,12.412 13.353,12.765 13.059,13.059C12.766,13.353 12.413,13.5 12,13.5ZM12,7.73C11.587,7.73 11.234,7.584 10.941,7.29C10.647,6.996 10.5,6.643 10.5,6.23C10.5,5.818 10.647,5.465 10.941,5.171C11.234,4.877 11.587,4.73 12,4.73C12.413,4.73 12.766,4.877 13.059,5.171C13.353,5.465 13.5,5.818 13.5,6.23C13.5,6.643 13.353,6.996 13.059,7.29C12.766,7.584 12.413,7.73 12,7.73Z"
+            android:fillColor="#ffffff"/>
+    </group>
+</vector>
\ No newline at end of file
diff --git a/app/res/drawable/ic_connect_arrow_back.xml b/app/res/drawable/ic_connect_arrow_back.xml
new file mode 100644
index 0000000000..98a528a4af
--- /dev/null
+++ b/app/res/drawable/ic_connect_arrow_back.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <group>
+        <clip-path
+            android:pathData="M0,0h24v24h-24z"/>
+        <path
+            android:pathData="M7.373,12.75L13.069,18.446L12,19.5L4.5,12L12,4.5L13.069,5.554L7.373,11.25H19.5V12.75H7.373Z"
+            android:fillColor="#ffffff"/>
+    </group>
+</vector>
\ No newline at end of file
diff --git a/app/res/layout/connectid_common_title_bar.xml b/app/res/layout/connectid_common_title_bar.xml
new file mode 100644
index 0000000000..d63b6908ef
--- /dev/null
+++ b/app/res/layout/connectid_common_title_bar.xml
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <LinearLayout
+        android:id="@+id/appBar"
+        android:layout_width="match_parent"
+        android:layout_height="60dp"
+        android:paddingVertical="18dp"
+        android:paddingStart="16dp"
+        android:background="@color/connect_blue_color"
+        android:gravity="start"
+        tools:ignore="RtlSymmetry">
+
+        <ImageButton
+            android:id="@+id/menu_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:background="?attr/selectableItemBackground"
+            android:contentDescription="@null"
+            android:src="@drawable/ic_menu_bar"
+            android:tint="@color/white"
+            android:visibility="invisible" />
+
+        <org.commcare.views.connect.connecttextview.ConnectMediumTextView
+            android:id="@+id/title"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center"
+            android:layout_weight="1"
+            android:layout_marginStart="10dp"
+            android:fontFamily="@font/roboto_medium"
+            android:text=""
+            android:textColor="#FFFFFF"
+            android:textSize="18sp" />
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:gravity="center">
+
+            <ImageButton
+                android:id="@+id/notification_icon"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:layout_gravity="center"
+                android:background="?attr/selectableItemBackground"
+                android:contentDescription="@null"
+                android:paddingHorizontal="8dp"
+                android:src="@drawable/ic_notifications_24"
+                android:visibility="gone" />
+
+            <ImageButton
+                android:id="@+id/menu_icon"
+                android:layout_width="wrap_content"
+                android:layout_height="match_parent"
+                android:background="?attr/selectableItemBackground"
+                android:contentDescription="@null"
+                android:paddingHorizontal="8dp"
+                android:visibility="gone"
+                android:src="@drawable/ic_connect_action_overflow" />
+        </LinearLayout>
+    </LinearLayout>
+
+    <View
+        android:layout_width="match_parent"
+        android:layout_height="10dp"
+        android:layout_below="@+id/appBar"
+        android:background="@drawable/bottom_shadow" />
+</RelativeLayout>
\ No newline at end of file
diff --git a/app/res/layout/fragment_recovery_code.xml b/app/res/layout/fragment_recovery_code.xml
index 60ecec7874..162dc98c5a 100644
--- a/app/res/layout/fragment_recovery_code.xml
+++ b/app/res/layout/fragment_recovery_code.xml
@@ -8,12 +8,28 @@
         android:background="@color/white"
         android:orientation="vertical">
 
+        <LinearLayout
+            android:id="@+id/llTopBar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <include
+                android:id="@+id/commonAppBar"
+                layout="@layout/connectid_common_title_bar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+        </LinearLayout>
+
         <ImageView
             android:id="@+id/company_logo"
             android:layout_width="wrap_content"
             android:layout_height="40dp"
-            android:layout_marginTop="60dp"
+            android:layout_marginTop="40dp"
+            android:layout_below="@+id/llTopBar"
             android:layout_centerHorizontal="true"
+            android:contentDescription="@null"
             android:src="@drawable/ic_dimagi_logo" />
 
         <View
diff --git a/app/res/layout/fragment_secondary_phone_number.xml b/app/res/layout/fragment_secondary_phone_number.xml
index b39910f2ca..75b1602f75 100644
--- a/app/res/layout/fragment_secondary_phone_number.xml
+++ b/app/res/layout/fragment_secondary_phone_number.xml
@@ -7,190 +7,210 @@
         android:background="@color/grey_light"
         android:backgroundTint="@color/connect_blue_color">
 
-        <androidx.cardview.widget.CardView
+        <LinearLayout
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginLeft="16dp"
-            android:layout_marginTop="30dp"
-            android:layout_marginRight="16dp"
-            app:cardCornerRadius="10dp">
+            android:layout_height="match_parent"
+            android:orientation="vertical">
 
-            <RelativeLayout
+            <LinearLayout
+                android:id="@+id/llTopBar"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:background="@color/white"
-                android:orientation="vertical">
-
-
-                <ImageView
-                    android:id="@+id/company_logo"
-                    android:layout_width="wrap_content"
-                    android:layout_height="40dp"
-                    android:layout_centerHorizontal="true"
-                    android:layout_marginTop="40dp"
-                    android:src="@drawable/ic_dimagi_logo" />
-
-                <View
-                    android:id="@+id/divider"
-                    android:layout_width="fill_parent"
-                    android:layout_height="1dp"
-                    android:layout_below="@+id/company_logo"
-                    android:layout_marginHorizontal="20dp"
-                    android:layout_marginTop="40dp"
-                    android:background="@android:color/darker_gray" />
-
-                <org.commcare.views.connect.connecttextview.ConnectBoldTextView
-                    android:id="@+id/secondary_phone_title"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@id/divider"
-                    android:layout_marginStart="16dp"
-                    android:layout_marginTop="16dp"
-                    android:layout_marginEnd="16dp"
-                    android:fontFamily="@font/roboto_bold"
-                    android:text="Add Secondary Phone Number"
-                    android:textColor="@color/connect_dark_blue_color"
-                    android:textSize="18sp" />
-
-                <org.commcare.views.connect.connecttextview.ConnectMediumTextView
-                    android:id="@+id/secondary_phone_sub_title"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@id/secondary_phone_title"
-                    android:layout_marginStart="16dp"
-                    android:layout_marginTop="10dp"
-                    android:layout_marginEnd="16dp"
-                    android:fontFamily="@font/roboto_bold"
-                    android:text="Add secondary phone number to reset your Recovery Code."
-                    android:textColor="@color/connect_subtext_80"
-                    android:textSize="12sp" />
-
-                <LinearLayout
-                    android:id="@+id/phone_layout"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <include
+                    android:id="@+id/commonAppBar"
+                    layout="@layout/connectid_common_title_bar"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content" />
+            </LinearLayout>
+
+            <androidx.cardview.widget.CardView
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginLeft="16dp"
+                android:layout_marginTop="30dp"
+                android:layout_marginRight="16dp"
+                app:cardCornerRadius="10dp">
+
+                <RelativeLayout
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:layout_below="@id/secondary_phone_sub_title"
-                    android:layout_marginHorizontal="16dp"
-                    android:layout_marginTop="16dp"
-                    android:orientation="horizontal">
+                    android:background="@color/white"
+                    android:orientation="vertical">
 
-                    <LinearLayout
-                        android:layout_width="42dp"
-                        android:layout_height="42dp"
-                        android:background="@drawable/connect_side_icon_bg"
-                        android:gravity="center">
 
-                        <ImageView
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:contentDescription="@null"
-                            android:padding="1dp"
-                            android:src="@drawable/ic_outline_phone_24" />
+                    <ImageView
+                        android:id="@+id/company_logo"
+                        android:layout_width="wrap_content"
+                        android:layout_height="40dp"
+                        android:layout_centerHorizontal="true"
+                        android:layout_marginTop="40dp"
+                        android:src="@drawable/ic_dimagi_logo" />
+
+                    <View
+                        android:id="@+id/divider"
+                        android:layout_width="fill_parent"
+                        android:layout_height="1dp"
+                        android:layout_below="@+id/company_logo"
+                        android:layout_marginHorizontal="20dp"
+                        android:layout_marginTop="40dp"
+                        android:background="@android:color/darker_gray" />
+
+                    <org.commcare.views.connect.connecttextview.ConnectBoldTextView
+                        android:id="@+id/secondary_phone_title"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@id/divider"
+                        android:layout_marginStart="16dp"
+                        android:layout_marginTop="16dp"
+                        android:layout_marginEnd="16dp"
+                        android:fontFamily="@font/roboto_bold"
+                        android:text="Add Secondary Phone Number"
+                        android:textColor="@color/connect_dark_blue_color"
+                        android:textSize="18sp" />
 
-                    </LinearLayout>
+                    <org.commcare.views.connect.connecttextview.ConnectMediumTextView
+                        android:id="@+id/secondary_phone_sub_title"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@id/secondary_phone_title"
+                        android:layout_marginStart="16dp"
+                        android:layout_marginTop="10dp"
+                        android:layout_marginEnd="16dp"
+                        android:fontFamily="@font/roboto_bold"
+                        android:text="Add secondary phone number to reset your Recovery Code."
+                        android:textColor="@color/connect_subtext_80"
+                        android:textSize="12sp" />
 
                     <LinearLayout
+                        android:id="@+id/phone_layout"
                         android:layout_width="match_parent"
                         android:layout_height="wrap_content"
-                        android:orientation="vertical">
+                        android:layout_below="@id/secondary_phone_sub_title"
+                        android:layout_marginHorizontal="16dp"
+                        android:layout_marginTop="16dp"
+                        android:orientation="horizontal">
+
+                        <LinearLayout
+                            android:layout_width="42dp"
+                            android:layout_height="42dp"
+                            android:background="@drawable/connect_side_icon_bg"
+                            android:gravity="center">
+
+                            <ImageView
+                                android:layout_width="wrap_content"
+                                android:layout_height="wrap_content"
+                                android:contentDescription="@null"
+                                android:padding="1dp"
+                                android:src="@drawable/ic_outline_phone_24" />
+
+                        </LinearLayout>
 
                         <LinearLayout
                             android:layout_width="match_parent"
                             android:layout_height="wrap_content"
-                            android:layout_marginStart="16dp"
-                            android:background="@drawable/connect_edit_text_bg"
-                            android:padding="0dp">
-
-                            <EditText
-                                android:id="@+id/countryCode"
-                                android:layout_width="64dp"
-                                android:layout_height="55dp"
-                                android:background="@null"
-                                android:gravity="center"
-                                android:hint="@string/connect_phone_country_code_default"
-                                android:inputType="number"
-                                android:text="@string/connect_phone_country_code_default"
-                                android:textColorHint="@color/connect_grey" />
-
-                            <View
-                                android:layout_width="1dp"
-                                android:layout_height="match_parent"
-                                android:layout_marginVertical="10dp"
-                                android:background="@color/connect_blue_color_10" />
-
-                            <AutoCompleteTextView
-                                android:id="@+id/connect_primary_phone_input"
-                                android:layout_width="fill_parent"
-                                android:layout_height="55dp"
-                                android:background="@null"
-                                android:digits="1234567890"
-                                android:focusable="true"
-                                android:focusableInTouchMode="true"
-                                android:hint="@string/connect_phone_number_hint"
-                                android:inputType="numberDecimal"
-                                android:paddingLeft="16dp"
-                                android:textAlignment="textStart"
-                                android:textColorHint="@color/connect_grey" />
+                            android:orientation="vertical">
+
+                            <LinearLayout
+                                android:layout_width="match_parent"
+                                android:layout_height="wrap_content"
+                                android:layout_marginStart="16dp"
+                                android:background="@drawable/connect_edit_text_bg"
+                                android:padding="0dp">
+
+                                <EditText
+                                    android:id="@+id/countryCode"
+                                    android:layout_width="64dp"
+                                    android:layout_height="55dp"
+                                    android:background="@null"
+                                    android:gravity="center"
+                                    android:hint="@string/connect_phone_country_code_default"
+                                    android:inputType="number"
+                                    android:text="@string/connect_phone_country_code_default"
+                                    android:textColorHint="@color/connect_grey" />
+
+                                <View
+                                    android:layout_width="1dp"
+                                    android:layout_height="match_parent"
+                                    android:layout_marginVertical="10dp"
+                                    android:background="@color/connect_blue_color_10" />
+
+                                <AutoCompleteTextView
+                                    android:id="@+id/connect_primary_phone_input"
+                                    android:layout_width="fill_parent"
+                                    android:layout_height="55dp"
+                                    android:background="@null"
+                                    android:digits="1234567890"
+                                    android:focusable="true"
+                                    android:focusableInTouchMode="true"
+                                    android:hint="@string/connect_phone_number_hint"
+                                    android:inputType="numberDecimal"
+                                    android:paddingLeft="16dp"
+                                    android:textAlignment="textStart"
+                                    android:textColorHint="@color/connect_grey" />
+                            </LinearLayout>
+
+                            <org.commcare.views.connect.connecttextview.ConnectMediumTextView
+                                android:id="@+id/errorTextView"
+                                android:layout_width="wrap_content"
+                                android:layout_height="wrap_content"
+                                android:paddingStart="16dp"
+                                android:paddingTop="4dp"
+                                android:textColor="@android:color/holo_red_light"
+                                android:textSize="14sp"
+                                android:visibility="gone" />
                         </LinearLayout>
 
-                        <org.commcare.views.connect.connecttextview.ConnectMediumTextView
-                            android:id="@+id/errorTextView"
-                            android:layout_width="wrap_content"
-                            android:layout_height="wrap_content"
-                            android:paddingStart="16dp"
-                            android:paddingTop="4dp"
-                            android:textColor="@android:color/holo_red_light"
-                            android:textSize="14sp"
-                            android:visibility="gone" />
                     </LinearLayout>
 
-                </LinearLayout>
-
-                <RelativeLayout
-                    android:id="@+id/relativeLayout1"
-                    android:layout_width="fill_parent"
-                    android:layout_height="wrap_content"
-                    android:layout_below="@id/phone_layout"
-                    android:layout_marginHorizontal="10dp"
-                    android:layout_marginVertical="16dp">
+                    <RelativeLayout
+                        android:id="@+id/relativeLayout1"
+                        android:layout_width="fill_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_below="@id/phone_layout"
+                        android:layout_marginHorizontal="10dp"
+                        android:layout_marginVertical="16dp">
 
-                    <org.commcare.views.connect.RoundedButton
-                        android:id="@+id/back_button"
-                        android:layout_width="wrap_content"
-                        android:layout_height="45dp"
-                        android:layout_alignParentStart="true"
-                        android:layout_margin="16dp"
-                        android:layout_marginStart="16dp"
-                        android:layout_marginTop="16dp"
-                        android:layout_marginBottom="16dp"
-                        android:gravity="start|center"
-                        android:text="Learn More"
-                        android:visibility="gone"
-                        app:roundButtonBorderColor="@color/border_grey"
-                        app:roundButtonBorderVisible="true"
-                        app:roundButtonTextColor="@color/connect_blue_color"
-                        app:roundButtonTextSize="6.5sp" />
-
-                    <org.commcare.views.connect.RoundedButton
-                        android:id="@+id/continueButton"
-                        android:layout_width="wrap_content"
-                        android:layout_height="45dp"
-                        android:layout_alignParentEnd="true"
-                        android:layout_marginStart="16dp"
-                        android:layout_marginTop="16dp"
-                        android:layout_marginEnd="16dp"
-                        android:layout_marginBottom="16dp"
-                        android:gravity="start|center"
-                        android:text="Continue"
-                        app:roundButtonBackgroundColor="@color/connect_blue_color"
-                        app:roundButtonBorderRadius="@dimen/dp48"
-                        app:roundButtonIcon="@drawable/connect_right_arrow"
-                        app:roundButtonIconLeftAlign="false"
-                        app:roundButtonTextColor="@color/white"
-                        app:roundButtonTextSize="6.5sp" />
+                        <org.commcare.views.connect.RoundedButton
+                            android:id="@+id/back_button"
+                            android:layout_width="wrap_content"
+                            android:layout_height="45dp"
+                            android:layout_alignParentStart="true"
+                            android:layout_margin="16dp"
+                            android:layout_marginStart="16dp"
+                            android:layout_marginTop="16dp"
+                            android:layout_marginBottom="16dp"
+                            android:gravity="start|center"
+                            android:text="Learn More"
+                            android:visibility="gone"
+                            app:roundButtonBorderColor="@color/border_grey"
+                            app:roundButtonBorderVisible="true"
+                            app:roundButtonTextColor="@color/connect_blue_color"
+                            app:roundButtonTextSize="6.5sp" />
+
+                        <org.commcare.views.connect.RoundedButton
+                            android:id="@+id/continueButton"
+                            android:layout_width="wrap_content"
+                            android:layout_height="45dp"
+                            android:layout_alignParentEnd="true"
+                            android:layout_marginStart="16dp"
+                            android:layout_marginTop="16dp"
+                            android:layout_marginEnd="16dp"
+                            android:layout_marginBottom="16dp"
+                            android:gravity="start|center"
+                            android:text="Continue"
+                            app:roundButtonBackgroundColor="@color/connect_blue_color"
+                            app:roundButtonBorderRadius="@dimen/dp48"
+                            app:roundButtonIcon="@drawable/connect_right_arrow"
+                            app:roundButtonIconLeftAlign="false"
+                            app:roundButtonTextColor="@color/white"
+                            app:roundButtonTextSize="6.5sp" />
+                    </RelativeLayout>
                 </RelativeLayout>
-            </RelativeLayout>
-        </androidx.cardview.widget.CardView>
+            </androidx.cardview.widget.CardView>
+        </LinearLayout>
 
     </FrameLayout>
 </layout>
\ No newline at end of file
diff --git a/app/res/layout/fragment_signup.xml b/app/res/layout/fragment_signup.xml
index 7a6be6f251..47aab9e627 100644
--- a/app/res/layout/fragment_signup.xml
+++ b/app/res/layout/fragment_signup.xml
@@ -12,13 +12,27 @@
             android:id="@+id/firstLayout"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:layout_marginTop="60dp"
             android:orientation="vertical">
 
+            <LinearLayout
+                android:id="@+id/llTopBar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <include
+                    android:id="@+id/commonAppBar"
+                    layout="@layout/connectid_common_title_bar"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content" />
+            </LinearLayout>
+
             <ImageView
                 android:id="@+id/company_logo"
                 android:layout_width="wrap_content"
                 android:layout_height="40dp"
+                android:layout_marginTop="60dp"
                 android:layout_gravity="center"
                 android:src="@drawable/ic_dimagi_logo" />
 
diff --git a/app/res/layout/screen_connect_password_verify.xml b/app/res/layout/screen_connect_password_verify.xml
index a3c8ba8db1..be5fd060a8 100644
--- a/app/res/layout/screen_connect_password_verify.xml
+++ b/app/res/layout/screen_connect_password_verify.xml
@@ -7,12 +7,26 @@
         android:background="@color/white"
         android:orientation="vertical">
 
+        <LinearLayout
+            android:id="@+id/llTopBar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <include
+                android:id="@+id/commonAppBar"
+                layout="@layout/connectid_common_title_bar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+        </LinearLayout>
+
         <ImageView
             android:id="@+id/company_logo"
             android:layout_width="wrap_content"
             android:layout_height="40dp"
             android:layout_gravity="center"
-            android:layout_marginTop="60dp"
+            android:layout_marginTop="40dp"
             android:contentDescription="@null"
             android:src="@drawable/ic_dimagi_logo" />
 
diff --git a/app/res/layout/screen_connect_phone_verify.xml b/app/res/layout/screen_connect_phone_verify.xml
index 7264d83731..be368cfaf6 100644
--- a/app/res/layout/screen_connect_phone_verify.xml
+++ b/app/res/layout/screen_connect_phone_verify.xml
@@ -9,12 +9,26 @@
         android:background="@color/white"
         android:orientation="vertical">
 
+        <LinearLayout
+            android:id="@+id/llTopBar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <include
+                android:id="@+id/commonAppBar"
+                layout="@layout/connectid_common_title_bar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+        </LinearLayout>
+
         <ImageView
             android:id="@+id/company_logo"
             android:layout_width="wrap_content"
             android:layout_height="40dp"
             android:layout_gravity="center"
-            android:layout_marginTop="60dp"
+            android:layout_marginTop="40dp"
             android:contentDescription="@null"
             android:src="@drawable/ic_dimagi_logo" />
 
diff --git a/app/res/layout/screen_connect_primary_phone.xml b/app/res/layout/screen_connect_primary_phone.xml
index c6c8fa9f5c..da42e1f4b4 100644
--- a/app/res/layout/screen_connect_primary_phone.xml
+++ b/app/res/layout/screen_connect_primary_phone.xml
@@ -8,12 +8,26 @@
         android:background="@color/white"
         android:orientation="vertical">
 
+        <LinearLayout
+            android:id="@+id/llTopBar"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
+
+            <include
+                android:id="@+id/commonAppBar"
+                layout="@layout/connectid_common_title_bar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content" />
+        </LinearLayout>
+
         <ImageView
             android:id="@+id/company_logo"
             android:layout_width="wrap_content"
             android:layout_height="40dp"
             android:layout_gravity="center"
-            android:layout_marginTop="60dp"
+            android:layout_marginTop="40dp"
             android:contentDescription="@null"
             android:src="@drawable/ic_dimagi_logo" />
 
diff --git a/app/res/layout/screen_connect_verify.xml b/app/res/layout/screen_connect_verify.xml
index 5f5a010b0b..408fced1d5 100644
--- a/app/res/layout/screen_connect_verify.xml
+++ b/app/res/layout/screen_connect_verify.xml
@@ -10,15 +10,28 @@
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginTop="20dp"
             android:orientation="vertical">
 
+            <LinearLayout
+                android:id="@+id/llTopBar"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <include
+                    android:id="@+id/commonAppBar"
+                    layout="@layout/connectid_common_title_bar"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content" />
+            </LinearLayout>
+
             <org.commcare.views.connect.connecttextview.ConnectBoldTextView
                 android:id="@+id/connect_verify_title"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
+                android:layout_marginTop="20dp"
                 android:layout_gravity="center"
-                android:layout_marginTop="5dp"
                 android:layout_marginBottom="5dp"
                 android:text="@string/connect_verify_title"
                 android:textAlignment="center"
diff --git a/app/res/values/themes.xml b/app/res/values/themes.xml
index 91999a8f0c..4fd8fef848 100644
--- a/app/res/values/themes.xml
+++ b/app/res/values/themes.xml
@@ -38,6 +38,44 @@
         <item name="materialCalendarTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar</item>
     </style>
 
+    <style name="NoAppBarTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
+        <item name="colorPrimary">@color/cc_brand_color</item>
+        <item name="colorPrimaryDark">@color/cc_brand_text</item>
+        <item name="colorAccent">@color/cc_dark_cool_accent_color</item>
+        <item name="colorControlActivated">@color/cc_dark_cool_accent_color</item>
+        <item name="android:textColorSecondary">@color/cc_neutral_text</item>
+        <item name="android:textColorPrimary">@color/cc_core_text</item>
+        <item name="buttonStyle">@style/Commcare.Button.Primary</item>
+        <item name="buttonBarButtonStyle">@style/Commcare.Button.Primary</item>
+        <item name="android:textAppearanceButton">@style/TextAppearance.AppCompat.Medium</item>
+        <item name="android:colorBackground">@color/cc_core_bg</item>
+        <item name="detail_odd_row_color">@color/cc_neutral_bg</item>
+        <item name="detail_even_row_color">@color/transparent</item>
+        <item name="entity_view_header_background_color">@color/cc_brand_text</item>
+        <item name="entity_view_header_text_color">@color/cc_core_bg</item>
+        <item name="drawer_pulldown_text_color">@color/white</item>
+        <item name="drawer_pulldown_even_row_color">@color/cc_brand_bg</item>
+        <item name="drawer_pulldown_odd_row_color">@color/drawer_pulldown_odd_row_color</item>
+        <item name="actionBarStyle">@style/ActionBar</item>
+        <item name="actionOverflowButtonStyle">@style/OverflowButton</item>
+        <item name="android:textViewStyle">@style/AppTheme.Widget.TextView</item>
+        <item name="android:textSize">@dimen/text_medium</item>
+        <item name="menu_tile_title_text_color">@color/cc_brand_bg</item>
+        <item name="entity_select_title_text_color">@color/cc_light_warm_accent_text</item>
+        <item name="filter_select_background_color">@color/cc_brand_text</item>
+        <item name="filter_select_text_color">@color/cc_light_warm_accent_text</item>
+        <item name="android:listViewStyle">@style/fading_edge</item>
+        <item name="android:scrollViewStyle">@style/fading_edge</item>
+        <item name="android:windowContentOverlay">@null</item>
+        <item name="android:dropDownListViewStyle">@style/dropDownListView</item>
+        <item name="android:statusBarColor">@color/connect_status_bar_color</item>
+
+        <!--  Material Components styling that can be removed when we migrate to a material component theme from the bridge theme-->
+        <item name="materialCalendarStyle">@style/Widget.MaterialComponents.MaterialCalendar</item>
+        <item name="materialCalendarFullscreenTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar.Fullscreen</item>
+        <item name="materialCalendarTheme">@style/ThemeOverlay.MaterialComponents.MaterialCalendar</item>
+    </style>
+
     <style name="AppBaseTheme" parent="CommonTheme" />
 
     <style name="PreferenceTheme" parent="AppBaseTheme">
diff --git a/app/src/org/commcare/activities/connect/ConnectIdActivity.java b/app/src/org/commcare/activities/connect/ConnectIdActivity.java
index 32a2159e19..e883213afd 100644
--- a/app/src/org/commcare/activities/connect/ConnectIdActivity.java
+++ b/app/src/org/commcare/activities/connect/ConnectIdActivity.java
@@ -39,7 +39,6 @@ protected void onActivityResult(int requestCode, int resultCode, Intent data) {
         } else if (requestCode == ConnectConstants.CONNECTID_REQUEST_CODE) {
             handleRedirection(data);
         }
-
         if (requestCode == RESULT_OK) {
             finish();
         }
@@ -50,13 +49,8 @@ protected void onActivityResult(int requestCode, int resultCode, Intent data) {
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_connect_id);
-        Window window = getWindow();
-        window.setStatusBarColor(getResources().getColor(R.color.connect_status_bar_color));
         NavHostFragment host2 = (NavHostFragment)getSupportFragmentManager().findFragmentById(R.id.nav_host_fragment_connectid);
         controller = host2.getNavController();
-        ColorDrawable colorDrawable
-                = new ColorDrawable(getResources().getColor(R.color.connect_blue_color));
-        getSupportActionBar().setBackgroundDrawable(colorDrawable);
         handleRedirection(getIntent());
     }
 
diff --git a/app/src/org/commcare/fragments/BreadcrumbBarFragment.java b/app/src/org/commcare/fragments/BreadcrumbBarFragment.java
index 94d938d4c2..e0fb47179c 100644
--- a/app/src/org/commcare/fragments/BreadcrumbBarFragment.java
+++ b/app/src/org/commcare/fragments/BreadcrumbBarFragment.java
@@ -93,10 +93,12 @@ public void refresh(AppCompatActivity activity) {
 
         ActionBar actionBar = activity.getSupportActionBar();
 
-        if (!breadCrumbsEnabled) {
-            configureSimpleNav(activity, actionBar);
-        } else {
-            attachBreadcrumbBar(activity, actionBar);
+        if(actionBar != null) {
+            if (!breadCrumbsEnabled) {
+                configureSimpleNav(activity, actionBar);
+            } else {
+                attachBreadcrumbBar(activity, actionBar);
+            }
         }
 
         try {
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIDSecondaryPhoneNumber.java b/app/src/org/commcare/fragments/connectId/ConnectIDSecondaryPhoneNumber.java
index 1f9edc2cbf..e83ee671b2 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIDSecondaryPhoneNumber.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIDSecondaryPhoneNumber.java
@@ -21,6 +21,7 @@
 import org.commcare.connect.network.IApiCallback;
 import org.commcare.dalvik.R;
 import org.commcare.dalvik.databinding.FragmentSecondaryPhoneNumberBinding;
+import org.commcare.utils.ConnectIdAppBarUtils;
 import org.commcare.utils.PhoneNumberHelper;
 
 import java.io.IOException;
@@ -103,10 +104,18 @@ public void afterTextChanged(Editable s) {
         binding.secondaryPhoneSubTitle.setText(getString(R.string.connect_phone_message_alternate));
 
         updateButtonEnabled();
-
+        handleAppBar(view);
         return view;
     }
 
+    private void handleAppBar(View view) {
+        View appBarView = view.findViewById(R.id.commonAppBar);
+        ConnectIdAppBarUtils.setTitle(appBarView, getString(R.string.connect_phone_title_alternate));
+        ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
+            Navigation.findNavController(appBarView).popBackStack();
+        });
+    }
+
     public void updateButtonEnabled() {
         String phone = PhoneNumberHelper.buildPhoneNumber(binding.countryCode.getText().toString(),
                 binding.connectPrimaryPhoneInput.getText().toString());
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIDSignupFragment.java b/app/src/org/commcare/fragments/connectId/ConnectIDSignupFragment.java
index b10904b4c4..ba7a1befc7 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIDSignupFragment.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIDSignupFragment.java
@@ -32,6 +32,7 @@
 import org.commcare.connect.network.IApiCallback;
 import org.commcare.dalvik.R;
 import org.commcare.dalvik.databinding.FragmentSignupBinding;
+import org.commcare.utils.ConnectIdAppBarUtils;
 import org.commcare.utils.PhoneNumberHelper;
 import org.javarosa.core.io.StreamsUtil;
 import org.javarosa.core.services.Logger;
@@ -148,10 +149,18 @@ public void afterTextChanged(Editable s) {
             displayNumber(existingPhone);
         }
 
-        getActivity().setTitle(getString(R.string.connect_registration_title));
+        handleAppBar(view);
         return view;
     }
 
+    private void handleAppBar(View view) {
+        View appBarView = view.findViewById(R.id.commonAppBar);
+        ConnectIdAppBarUtils.setTitle(appBarView, getString(R.string.connect_registration_title));
+        ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
+            getActivity().finish();
+        });
+    }
+
     void setupUi() {
         if (callingClass == ConnectConstants.CONNECT_RECOVERY_PRIMARY_PHONE) {
             binding.nameLayout.setVisibility(View.GONE);
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIdBiometricConfigFragment.java b/app/src/org/commcare/fragments/connectId/ConnectIdBiometricConfigFragment.java
index 541c77e366..7dc971ea7a 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIdBiometricConfigFragment.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIdBiometricConfigFragment.java
@@ -28,6 +28,7 @@
 import org.commcare.google.services.analytics.AnalyticsParamValue;
 import org.commcare.google.services.analytics.FirebaseAnalyticsUtil;
 import org.commcare.utils.BiometricsHelper;
+import org.commcare.utils.ConnectIdAppBarUtils;
 import org.javarosa.core.services.Logger;
 
 import java.util.Locale;
@@ -88,10 +89,18 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container,
 
         binding.connectVerifyFingerprintButton.setOnClickListener(v -> handleFingerprintButton());
         binding.connectVerifyPinButton.setOnClickListener(v -> handlePinButton());
-
+        handleAppBar(view);
         return view;
     }
 
+    private void handleAppBar(View view) {
+        View appBarView = view.findViewById(R.id.commonAppBar);
+        ConnectIdAppBarUtils.setTitle(appBarView, "App Lock");
+        ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
+            Navigation.findNavController(appBarView).popBackStack();
+        });
+    }
+
     private BiometricPrompt.AuthenticationCallback preparePromptCallbacks() {
         final Context context = requireActivity();
         return new BiometricPrompt.AuthenticationCallback() {
@@ -274,14 +283,14 @@ public void finish(boolean success, boolean failedEnrollment) {
                 if (success) {
                     directions = failedEnrollment || !configured ? ConnectIdBiometricConfigFragmentDirections.actionConnectidBiometricConfigToConnectidMessage(getResources().getString(R.string.connect_biometric_enroll_fail_title), getResources().getString(R.string.connect_biometric_enroll_fail_message), ConnectConstants.CONNECT_BIOMETRIC_ENROLL_FAIL, getResources().getString(R.string.connect_biometric_enroll_fail_button), null, null, null) :
                             ConnectIdBiometricConfigFragmentDirections.actionConnectidBiometricConfigToConnectidPhoneVerify(ConnectConstants.CONNECT_REGISTRATION_VERIFY_PRIMARY_PHONE, String.format(Locale.getDefault(), "%d",
-                                    ConnectManager.MethodRegistrationPrimary), user.getPrimaryPhone(), user.getUserId(), user.getPassword(), user.getAlternatePhone(),false).setAllowChange(true);
+                                    ConnectManager.MethodRegistrationPrimary), user.getPrimaryPhone(), user.getUserId(), user.getPassword(), user.getAlternatePhone(), false).setAllowChange(true);
                 }
             }
             case ConnectConstants.CONNECT_RECOVERY_CONFIGURE_BIOMETRICS -> {
                 if (success) {
                     directions =
                             ConnectIdBiometricConfigFragmentDirections.actionConnectidBiometricConfigToConnectidPhoneVerify(ConnectConstants.CONNECT_RECOVERY_VERIFY_PRIMARY_PHONE, String.format(Locale.getDefault(), "%d",
-                                    ConnectManager.MethodRecoveryPrimary), ConnectIdActivity.recoverPhone, ConnectIdActivity.recoverPhone, "", null,false).setAllowChange(false);
+                                    ConnectManager.MethodRecoveryPrimary), ConnectIdActivity.recoverPhone, ConnectIdActivity.recoverPhone, "", null, false).setAllowChange(false);
                 }
             }
             case ConnectConstants.CONNECT_UNLOCK_BIOMETRIC -> {
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIdPasswordVerificationFragment.java b/app/src/org/commcare/fragments/connectId/ConnectIdPasswordVerificationFragment.java
index 3c736eab8f..cc9dd2bd7d 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIdPasswordVerificationFragment.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIdPasswordVerificationFragment.java
@@ -25,6 +25,7 @@
 import org.commcare.dalvik.databinding.ScreenConnectPasswordVerifyBinding;
 import org.commcare.google.services.analytics.AnalyticsParamValue;
 import org.commcare.google.services.analytics.FirebaseAnalyticsUtil;
+import org.commcare.utils.ConnectIdAppBarUtils;
 import org.commcare.utils.KeyboardHelper;
 import org.javarosa.core.io.StreamsUtil;
 import org.javarosa.core.services.Logger;
@@ -76,10 +77,18 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container,
         failureCount = 0;
         binding.connectPasswordVerifyForgot.setOnClickListener(arg0 -> handleForgotPress());
         binding.connectPasswordVerifyButton.setOnClickListener(arg0 -> handleButtonPress());
-
+        handleAppBar(view);
         return view;
     }
 
+    private void handleAppBar(View view) {
+        View appBarView = view.findViewById(R.id.commonAppBar);
+        ConnectIdAppBarUtils.setTitle(appBarView, "Password Verification");
+        ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
+            Navigation.findNavController(appBarView).popBackStack();
+        });
+    }
+
     @Override
     public void onResume() {
         super.onResume();
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIdPhoneFragment.java b/app/src/org/commcare/fragments/connectId/ConnectIdPhoneFragment.java
index b251f6f239..4185f3965d 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIdPhoneFragment.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIdPhoneFragment.java
@@ -30,6 +30,7 @@
 import org.commcare.connect.network.IApiCallback;
 import org.commcare.dalvik.R;
 import org.commcare.dalvik.databinding.ScreenConnectPrimaryPhoneBinding;
+import org.commcare.utils.ConnectIdAppBarUtils;
 import org.commcare.utils.KeyboardHelper;
 import org.commcare.utils.PhoneNumberHelper;
 import org.javarosa.core.services.Logger;
@@ -132,10 +133,18 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container,
         binding.connectPrimaryPhoneTitle.setText(title);
         binding.connectPrimaryPhoneMessage.setText(message);
         displayNumber(existing);
-
+        handleAppBar(binding.getRoot());
         return binding.getRoot();
     }
 
+    private void handleAppBar(View view) {
+        View appBarView = view.findViewById(R.id.commonAppBar);
+        ConnectIdAppBarUtils.setTitle(appBarView, getString(R.string.connect_phone_title_primary));
+        ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
+            Navigation.findNavController(appBarView).popBackStack();
+        });
+    }
+
     @Override
     public void onResume() {
         super.onResume();
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIdPhoneVerificationFragmnet.java b/app/src/org/commcare/fragments/connectId/ConnectIdPhoneVerificationFragmnet.java
index 7e6a6ba5e0..8c315e7375 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIdPhoneVerificationFragmnet.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIdPhoneVerificationFragmnet.java
@@ -40,6 +40,7 @@
 import org.commcare.dalvik.databinding.ScreenConnectPhoneVerifyBinding;
 import org.commcare.google.services.analytics.AnalyticsParamValue;
 import org.commcare.google.services.analytics.FirebaseAnalyticsUtil;
+import org.commcare.utils.ConnectIdAppBarUtils;
 import org.commcare.utils.KeyboardHelper;
 import org.javarosa.core.io.StreamsUtil;
 import org.javarosa.core.services.Logger;
@@ -129,7 +130,6 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container,
         binding = ScreenConnectPhoneVerifyBinding.inflate(inflater, container, false);
         View view = binding.getRoot();
         binding.connectPhoneVerifyButton.setEnabled(false);
-        getActivity().setTitle(getString(R.string.connect_verify_phone_title));
         buttonEnabled("");
         SmsRetrieverClient client = SmsRetriever.getClient(getActivity());// starting the SmsRetriever API
         client.startSmsUserConsent(null);
@@ -176,9 +176,18 @@ public void afterTextChanged(Editable s) {
 
             }
         });
+        handleAppBar(view);
         return view;
     }
 
+    private void handleAppBar(View view) {
+        View appBarView = view.findViewById(R.id.commonAppBar);
+        ConnectIdAppBarUtils.setTitle(appBarView, getString(R.string.connect_verify_phone_title));
+        ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
+            Navigation.findNavController(appBarView).popBackStack();
+        });
+    }
+
     private void handleDeactivateButton() {
         binding.connectDeactivateButton.setVisibility(!deactivateButton ? View.GONE : View.VISIBLE);
     }
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIdPinFragment.java b/app/src/org/commcare/fragments/connectId/ConnectIdPinFragment.java
index e7343cca61..32850d4d12 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIdPinFragment.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIdPinFragment.java
@@ -28,6 +28,7 @@
 import org.commcare.dalvik.databinding.FragmentRecoveryCodeBinding;
 import org.commcare.google.services.analytics.AnalyticsParamValue;
 import org.commcare.google.services.analytics.FirebaseAnalyticsUtil;
+import org.commcare.utils.ConnectIdAppBarUtils;
 import org.commcare.utils.KeyboardHelper;
 import org.javarosa.core.io.StreamsUtil;
 import org.javarosa.core.services.Logger;
@@ -59,6 +60,7 @@ public class ConnectIdPinFragment extends Fragment {
     private int callingClass;
 
     private FragmentRecoveryCodeBinding binding;
+    int titleId;
 
     TextWatcher watcher = new TextWatcher() {
         @Override
@@ -118,9 +120,8 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container,
             isRecovery = ConnectIdPinFragmentArgs.fromBundle(getArguments()).getRecover();
             isChanging = ConnectIdPinFragmentArgs.fromBundle(getArguments()).getChange();
         }
-        int titleId = isChanging ? R.string.connect_pin_title_set :
+        titleId = isChanging ? R.string.connect_pin_title_set :
                 R.string.connect_pin_title_confirm;
-        requireActivity().setTitle(getString(titleId));
         setPinLength(pinLength);
         if (callingClass == ConnectConstants.CONNECT_UNLOCK_PIN ||
                 callingClass == ConnectConstants.CONNECT_REGISTRATION_CONFIRM_PIN ||
@@ -154,11 +155,18 @@ public void afterTextChanged(Editable s) {
 
         binding.connectPinInput.addTextChangedListener(watcher);
         binding.connectPinRepeatInput.addTextChangedListener(watcher);
-
-
+        handleAppBar(view);
         return view;
     }
 
+    private void handleAppBar(View view) {
+        View appBarView = view.findViewById(R.id.commonAppBar);
+        ConnectIdAppBarUtils.setTitle(appBarView, getString(titleId));
+        ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
+            Navigation.findNavController(appBarView).popBackStack();
+        });
+    }
+
     public void setPinLength(int length) {
         InputFilter[] filter = new InputFilter[]{new InputFilter.LengthFilter(length)};
         binding.connectPinInput.setFilters(filter);
@@ -382,7 +390,7 @@ public void finish(boolean success, boolean forgot, String pin) {
                     }
                 } else {
                     directions = ConnectIdPinFragmentDirections.actionConnectidPinToConnectidPhoneVerify(ConnectConstants.CONNECT_RECOVERY_VERIFY_PRIMARY_PHONE, String.format(Locale.getDefault(), "%d",
-                            ConnectIdPhoneVerificationFragmnet.MethodRecoveryPrimary), ConnectIdActivity.recoverPhone, ConnectIdActivity.recoverPhone, "", null,false);
+                            ConnectIdPhoneVerificationFragmnet.MethodRecoveryPrimary), ConnectIdActivity.recoverPhone, ConnectIdActivity.recoverPhone, "", null, false);
                 }
             }
             case ConnectConstants.CONNECT_REGISTRATION_CONFIGURE_PIN -> {
@@ -397,7 +405,7 @@ public void finish(boolean success, boolean forgot, String pin) {
                     }
                 } else {
                     directions = ConnectIdPinFragmentDirections.actionConnectidPinToConnectidPhoneVerify(ConnectConstants.CONNECT_REGISTRATION_VERIFY_PRIMARY_PHONE, String.format(Locale.getDefault(), "%d",
-                            ConnectManager.MethodRegistrationPrimary), user.getPrimaryPhone(), user.getUserId(), user.getPassword(), user.getAlternatePhone(),false).setAllowChange(true);
+                            ConnectManager.MethodRegistrationPrimary), user.getPrimaryPhone(), user.getUserId(), user.getPassword(), user.getAlternatePhone(), false).setAllowChange(true);
                 }
             }
             case ConnectConstants.CONNECT_REGISTRATION_CONFIRM_PIN -> {
@@ -447,7 +455,7 @@ public void finish(boolean success, boolean forgot, String pin) {
 
                 } else {
                     directions = ConnectIdPinFragmentDirections.actionConnectidPinToConnectidPhoneVerify(ConnectConstants.CONNECT_RECOVERY_VERIFY_ALT_PHONE, String.format(Locale.getDefault(), "%d",
-                            ConnectIdPhoneVerificationFragmnet.MethodRecoveryAlternate), null, ConnectIdActivity.recoverPhone, ConnectIdActivity.recoverSecret, ConnectIdActivity.recoveryAltPhone,false).setAllowChange(false);
+                            ConnectIdPhoneVerificationFragmnet.MethodRecoveryAlternate), null, ConnectIdActivity.recoverPhone, ConnectIdActivity.recoverSecret, ConnectIdActivity.recoveryAltPhone, false).setAllowChange(false);
                 }
             }
             case ConnectConstants.CONNECT_REGISTRATION_CHANGE_PIN -> {
diff --git a/app/src/org/commcare/utils/ConnectIdAppBarUtils.java b/app/src/org/commcare/utils/ConnectIdAppBarUtils.java
new file mode 100644
index 0000000000..778349c7b5
--- /dev/null
+++ b/app/src/org/commcare/utils/ConnectIdAppBarUtils.java
@@ -0,0 +1,84 @@
+package org.commcare.utils;
+
+import android.view.View;
+import android.widget.ImageButton;
+
+import org.commcare.dalvik.R;
+import org.commcare.views.connect.connecttextview.ConnectMediumTextView;
+
+public class ConnectIdAppBarUtils {
+    /**
+     * Sets the title for the AppBar.
+     *
+     * @param view   The root view where the AppBar is located.
+     * @param title  The title text to set.
+     */
+    public static void setTitle(View view, String title) {
+        ConnectMediumTextView titleView = view.findViewById(R.id.title);
+        titleView.setText(title);
+    }
+
+    /**
+     * Sets the menu icon properties including visibility, icon resource, and click listener.
+     *
+     * @param view           The root view where the menu icon is located.
+     * @param iconResId      The drawable resource ID for the menu icon (use 0 to keep the existing icon).
+     * @param isVisible      If true, the menu icon will be visible; otherwise, it will be hidden.
+     * @param clickListener  The click listener for the menu icon (can be null).
+     */
+    public static void setBackButtonWithCallBack(View view, int iconResId, boolean isVisible, View.OnClickListener clickListener) {
+        ImageButton menu_button = view.findViewById(R.id.menu_button);
+
+        if (menu_button != null) {
+            menu_button.setVisibility(isVisible ? View.VISIBLE : View.GONE);
+
+            // Set the icon resource if provided
+            if (iconResId != 0) {
+                menu_button.setImageResource(iconResId);
+            }
+
+            // Set the click listener if provided
+            if (clickListener != null) {
+                menu_button.setOnClickListener(clickListener);
+            }
+        }
+    }
+
+    /**
+     * Sets the notification icon properties including visibility and click listener.
+     *
+     * @param view          The root view where the notification icon is located.
+     * @param isVisible     If true, the notification icon will be visible; otherwise, it will be hidden.
+     * @param clickListener The click listener for the notification icon (can be null).
+     */
+    public static void setNotificationIconWithCallback(View view, boolean isVisible, View.OnClickListener clickListener) {
+        ImageButton notificationIcon = view.findViewById(R.id.notification_icon);
+
+        if (notificationIcon != null) {
+            notificationIcon.setVisibility(isVisible ? View.VISIBLE : View.GONE);
+
+            if (clickListener != null) {
+                notificationIcon.setOnClickListener(clickListener);
+            }
+        }
+    }
+
+    /**
+     * Sets the back button properties including visibility and click listener.
+     *
+     * @param view          The root view where the back button is located.
+     * @param isVisible     If true, the back button will be visible; otherwise, it will be hidden.
+     * @param clickListener The click listener for the back button (can be null).
+     */
+    public static void setMenuIconWithCallback(View view, boolean isVisible, View.OnClickListener clickListener) {
+        ImageButton menu_icon = view.findViewById(R.id.menu_icon);
+
+        if (menu_icon != null) {
+            menu_icon.setVisibility(isVisible ? View.VISIBLE : View.GONE);
+
+            if (clickListener != null) {
+                menu_icon.setOnClickListener(clickListener);
+            }
+        }
+    }
+}
diff --git a/app/src/org/commcare/views/connect/CustomOtpView.java b/app/src/org/commcare/views/connect/CustomOtpView.java
new file mode 100644
index 0000000000..2d5ceacc2a
--- /dev/null
+++ b/app/src/org/commcare/views/connect/CustomOtpView.java
@@ -0,0 +1,159 @@
+package org.commcare.views.connect;
+
+import android.content.Context;
+import android.graphics.Color;
+import android.graphics.drawable.GradientDrawable;
+import android.text.Editable;
+import android.text.InputFilter;
+import android.text.InputType;
+import android.text.TextWatcher;
+import android.util.AttributeSet;
+import android.view.Gravity;
+import android.view.View;
+import android.view.inputmethod.InputMethodManager;
+import android.widget.EditText;
+import android.widget.LinearLayout;
+import androidx.annotation.Nullable;
+
+public class CustomOtpView extends LinearLayout {
+
+    private int digitCount = 4;
+    private int borderColor = Color.BLACK;
+    private int borderRadius = 5;
+    private int borderWidth = 2;
+    private int textColor = Color.BLACK;
+    private int textSize = 18;
+    private OtpCompleteListener otpCompleteListener;
+
+    public CustomOtpView(Context context) {
+        super(context);
+        init();
+    }
+
+    public CustomOtpView(Context context, @Nullable AttributeSet attrs) {
+        super(context, attrs);
+        init();
+    }
+
+    private void init() {
+        setOrientation(HORIZONTAL);
+        setGravity(Gravity.CENTER);
+        createOtpFields();
+    }
+
+    private void createOtpFields() {
+        removeAllViews();
+        for (int i = 0; i < digitCount; i++) {
+            EditText otpEditText = createOtpEditText(i);
+            addView(otpEditText);
+        }
+    }
+
+    private EditText createOtpEditText(int index) {
+        EditText editText = new EditText(getContext());
+        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
+                0, LayoutParams.WRAP_CONTENT, 1.0f
+        );
+        params.setMargins(8, 8, 8, 8);
+        editText.setLayoutParams(params);
+        editText.setGravity(Gravity.CENTER);
+        editText.setTextColor(textColor);
+        editText.setTextSize(textSize);
+        editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(1)});
+        editText.setInputType(InputType.TYPE_CLASS_NUMBER);
+        editText.setBackground(createBackgroundDrawable());
+        editText.setId(index);
+
+        editText.addTextChangedListener(new TextWatcher() {
+            @Override
+            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
+            }
+
+            @Override
+            public void onTextChanged(CharSequence s, int start, int before, int count) {
+                if (s.length() == 1) {
+                    if (index < digitCount - 1) {
+                        getChildAt(index + 1).requestFocus();
+                    } else {
+                        checkOtpCompletion();
+                    }
+                }
+            }
+
+            @Override
+            public void afterTextChanged(Editable s) {
+                if (s.length() == 0 && index > 0) {
+                    getChildAt(index - 1).requestFocus();
+                }
+            }
+        });
+
+        return editText;
+    }
+
+    private GradientDrawable createBackgroundDrawable() {
+        GradientDrawable drawable = new GradientDrawable();
+        drawable.setCornerRadius(borderRadius);
+        drawable.setStroke(borderWidth, borderColor);
+        return drawable;
+    }
+
+    private void checkOtpCompletion() {
+        StringBuilder otp = new StringBuilder();
+        for (int i = 0; i < digitCount; i++) {
+            EditText editText = (EditText) getChildAt(i);
+            otp.append(editText.getText().toString());
+        }
+        if (otp.length() == digitCount && otpCompleteListener != null) {
+            otpCompleteListener.onOtpComplete(otp.toString());
+        }
+    }
+
+    // Public methods for customization
+    public void setDigitCount(int count) {
+        this.digitCount = count;
+        createOtpFields();
+    }
+
+    public void setBorderColor(int color) {
+        this.borderColor = color;
+        updateUi();
+    }
+
+    public void setBorderRadius(int radius) {
+        this.borderRadius = radius;
+        updateUi();
+    }
+
+    public void setBorderWidth(int width) {
+        this.borderWidth = width;
+        updateUi();
+    }
+
+    public void setTextColor(int color) {
+        this.textColor = color;
+        updateUi();
+    }
+
+    public void setTextSize(int size) {
+        this.textSize = size;
+        updateUi();
+    }
+
+    public void setOtpCompleteListener(OtpCompleteListener listener) {
+        this.otpCompleteListener = listener;
+    }
+
+    private void updateUi() {
+        for (int i = 0; i < getChildCount(); i++) {
+            EditText editText = (EditText) getChildAt(i);
+            editText.setTextColor(textColor);
+            editText.setTextSize(textSize);
+            editText.setBackground(createBackgroundDrawable());
+        }
+    }
+
+    public interface OtpCompleteListener {
+        void onOtpComplete(String otp);
+    }
+}

From 0127ecb6f90769a883645bc3d8a84a51e9b2db40 Mon Sep 17 00:00:00 2001
From: Jay Panchal <jay@logicrays.com>
Date: Tue, 12 Nov 2024 17:48:04 +0530
Subject: [PATCH 2/2] Add translation

Add translation
---
 app/res/values-fr/strings.xml                 |   2 +
 app/res/values-pt/strings.xml                 |   2 +
 app/res/values/strings.xml                    |   3 +-
 .../ConnectIdBiometricConfigFragment.java     |   2 +-
 ...ConnectIdPasswordVerificationFragment.java |   2 +-
 .../commcare/views/connect/CustomOtpView.java | 159 ------------------
 6 files changed, 8 insertions(+), 162 deletions(-)
 delete mode 100644 app/src/org/commcare/views/connect/CustomOtpView.java

diff --git a/app/res/values-fr/strings.xml b/app/res/values-fr/strings.xml
index 6d9e5a72ce..d6c9a0a5bb 100644
--- a/app/res/values-fr/strings.xml
+++ b/app/res/values-fr/strings.xml
@@ -307,4 +307,6 @@ License.
     <string name="connect_learn">Apprendre</string>
     <string name="connect_delivery">Livraison</string>
     <string name="connect_commcare_app">Application CommCare</string>
+    <string name="connect_appbar_title_app_lock">Verrouillage d\'application</string>
+    <string name="connect_appbar_title_password_verification">Vérification du mot de passe</string>
 </resources>
diff --git a/app/res/values-pt/strings.xml b/app/res/values-pt/strings.xml
index a25b2c7009..8650c97d4d 100644
--- a/app/res/values-pt/strings.xml
+++ b/app/res/values-pt/strings.xml
@@ -566,5 +566,7 @@
     <string name="connect_job_tile_price">₹ %s</string>
     <string name="connect_job_tile_daily_limit_description">Limite diário atingido. Nenhum pagamento pelo envio de formulários</string>
     <string name="connect_job_tile_daily_limit">Acima do limite</string>
+    <string name="connect_appbar_title_app_lock">Bloqueio de aplicação</string>
+    <string name="connect_appbar_title_password_verification">Verificação de palavra-passe</string>
 
 </resources>
\ No newline at end of file
diff --git a/app/res/values/strings.xml b/app/res/values/strings.xml
index 9947841d10..934f9c5af0 100644
--- a/app/res/values/strings.xml
+++ b/app/res/values/strings.xml
@@ -868,5 +868,6 @@
     <string name="connect_job_tile_price">₹ %s</string>
     <string name="connect_job_tile_daily_limit_description">Daily Limit reached. No Payment for submitting forms</string>
     <string name="connect_job_tile_daily_limit">Over Limit</string>
-
+    <string name="connect_appbar_title_app_lock">App Lock</string>
+    <string name="connect_appbar_title_password_verification">Password Verification</string>
 </resources>
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIdBiometricConfigFragment.java b/app/src/org/commcare/fragments/connectId/ConnectIdBiometricConfigFragment.java
index 7dc971ea7a..62d5118f0f 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIdBiometricConfigFragment.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIdBiometricConfigFragment.java
@@ -95,7 +95,7 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container,
 
     private void handleAppBar(View view) {
         View appBarView = view.findViewById(R.id.commonAppBar);
-        ConnectIdAppBarUtils.setTitle(appBarView, "App Lock");
+        ConnectIdAppBarUtils.setTitle(appBarView, getString(R.string.connect_appbar_title_app_lock));
         ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
             Navigation.findNavController(appBarView).popBackStack();
         });
diff --git a/app/src/org/commcare/fragments/connectId/ConnectIdPasswordVerificationFragment.java b/app/src/org/commcare/fragments/connectId/ConnectIdPasswordVerificationFragment.java
index cc9dd2bd7d..46bc91407c 100644
--- a/app/src/org/commcare/fragments/connectId/ConnectIdPasswordVerificationFragment.java
+++ b/app/src/org/commcare/fragments/connectId/ConnectIdPasswordVerificationFragment.java
@@ -83,7 +83,7 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container,
 
     private void handleAppBar(View view) {
         View appBarView = view.findViewById(R.id.commonAppBar);
-        ConnectIdAppBarUtils.setTitle(appBarView, "Password Verification");
+        ConnectIdAppBarUtils.setTitle(appBarView, getString(R.string.connect_appbar_title_password_verification));
         ConnectIdAppBarUtils.setBackButtonWithCallBack(appBarView, R.drawable.ic_connect_arrow_back, true, click -> {
             Navigation.findNavController(appBarView).popBackStack();
         });
diff --git a/app/src/org/commcare/views/connect/CustomOtpView.java b/app/src/org/commcare/views/connect/CustomOtpView.java
deleted file mode 100644
index 2d5ceacc2a..0000000000
--- a/app/src/org/commcare/views/connect/CustomOtpView.java
+++ /dev/null
@@ -1,159 +0,0 @@
-package org.commcare.views.connect;
-
-import android.content.Context;
-import android.graphics.Color;
-import android.graphics.drawable.GradientDrawable;
-import android.text.Editable;
-import android.text.InputFilter;
-import android.text.InputType;
-import android.text.TextWatcher;
-import android.util.AttributeSet;
-import android.view.Gravity;
-import android.view.View;
-import android.view.inputmethod.InputMethodManager;
-import android.widget.EditText;
-import android.widget.LinearLayout;
-import androidx.annotation.Nullable;
-
-public class CustomOtpView extends LinearLayout {
-
-    private int digitCount = 4;
-    private int borderColor = Color.BLACK;
-    private int borderRadius = 5;
-    private int borderWidth = 2;
-    private int textColor = Color.BLACK;
-    private int textSize = 18;
-    private OtpCompleteListener otpCompleteListener;
-
-    public CustomOtpView(Context context) {
-        super(context);
-        init();
-    }
-
-    public CustomOtpView(Context context, @Nullable AttributeSet attrs) {
-        super(context, attrs);
-        init();
-    }
-
-    private void init() {
-        setOrientation(HORIZONTAL);
-        setGravity(Gravity.CENTER);
-        createOtpFields();
-    }
-
-    private void createOtpFields() {
-        removeAllViews();
-        for (int i = 0; i < digitCount; i++) {
-            EditText otpEditText = createOtpEditText(i);
-            addView(otpEditText);
-        }
-    }
-
-    private EditText createOtpEditText(int index) {
-        EditText editText = new EditText(getContext());
-        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
-                0, LayoutParams.WRAP_CONTENT, 1.0f
-        );
-        params.setMargins(8, 8, 8, 8);
-        editText.setLayoutParams(params);
-        editText.setGravity(Gravity.CENTER);
-        editText.setTextColor(textColor);
-        editText.setTextSize(textSize);
-        editText.setFilters(new InputFilter[]{new InputFilter.LengthFilter(1)});
-        editText.setInputType(InputType.TYPE_CLASS_NUMBER);
-        editText.setBackground(createBackgroundDrawable());
-        editText.setId(index);
-
-        editText.addTextChangedListener(new TextWatcher() {
-            @Override
-            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
-            }
-
-            @Override
-            public void onTextChanged(CharSequence s, int start, int before, int count) {
-                if (s.length() == 1) {
-                    if (index < digitCount - 1) {
-                        getChildAt(index + 1).requestFocus();
-                    } else {
-                        checkOtpCompletion();
-                    }
-                }
-            }
-
-            @Override
-            public void afterTextChanged(Editable s) {
-                if (s.length() == 0 && index > 0) {
-                    getChildAt(index - 1).requestFocus();
-                }
-            }
-        });
-
-        return editText;
-    }
-
-    private GradientDrawable createBackgroundDrawable() {
-        GradientDrawable drawable = new GradientDrawable();
-        drawable.setCornerRadius(borderRadius);
-        drawable.setStroke(borderWidth, borderColor);
-        return drawable;
-    }
-
-    private void checkOtpCompletion() {
-        StringBuilder otp = new StringBuilder();
-        for (int i = 0; i < digitCount; i++) {
-            EditText editText = (EditText) getChildAt(i);
-            otp.append(editText.getText().toString());
-        }
-        if (otp.length() == digitCount && otpCompleteListener != null) {
-            otpCompleteListener.onOtpComplete(otp.toString());
-        }
-    }
-
-    // Public methods for customization
-    public void setDigitCount(int count) {
-        this.digitCount = count;
-        createOtpFields();
-    }
-
-    public void setBorderColor(int color) {
-        this.borderColor = color;
-        updateUi();
-    }
-
-    public void setBorderRadius(int radius) {
-        this.borderRadius = radius;
-        updateUi();
-    }
-
-    public void setBorderWidth(int width) {
-        this.borderWidth = width;
-        updateUi();
-    }
-
-    public void setTextColor(int color) {
-        this.textColor = color;
-        updateUi();
-    }
-
-    public void setTextSize(int size) {
-        this.textSize = size;
-        updateUi();
-    }
-
-    public void setOtpCompleteListener(OtpCompleteListener listener) {
-        this.otpCompleteListener = listener;
-    }
-
-    private void updateUi() {
-        for (int i = 0; i < getChildCount(); i++) {
-            EditText editText = (EditText) getChildAt(i);
-            editText.setTextColor(textColor);
-            editText.setTextSize(textSize);
-            editText.setBackground(createBackgroundDrawable());
-        }
-    }
-
-    public interface OtpCompleteListener {
-        void onOtpComplete(String otp);
-    }
-}