[MBL-18765][All] Update QR login screen explanation (#2956)

Test plan: See ticket.

refs: MBL-18765
affects: Student, Teacher, Parent
release note: Add further explanation to the QR login screen.

Author: hermannakos

libs/login-api-2/src/main/res/layout/activity_login_with_qr.xml

@@ -20,8 +20,8 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:orientation="vertical"
-    android:background="@color/backgroundLightest">
+    android:background="@color/backgroundLightest"
+    android:orientation="vertical">
 
     <androidx.appcompat.widget.Toolbar
         android:id="@+id/toolbar"
@@ -41,7 +41,6 @@
             android:layout_height="wrap_content">
 
             <TextView
-                app:layout_constraintTop_toTopOf="parent"
                 android:id="@+id/qrCodeExplanation"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
@@ -52,15 +51,28 @@
                 android:importantForAccessibility="yes"
                 android:text="@string/qrCodeExplanation"
                 android:textColor="@color/textDarkest"
-                android:textSize="16sp" />
+                android:textSize="16sp"
+                app:layout_constraintTop_toTopOf="parent" />
+
+            <TextView
+                android:id="@+id/qrCodeInstruction"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginHorizontal="16dp"
+                android:layout_marginTop="8dp"
+                android:text="@string/qrCodeDisabledExplanation"
+                android:textColor="@color/textDark"
+                android:textSize="14sp"
+                app:layout_constraintTop_toBottomOf="@id/qrCodeExplanation" />
 
             <androidx.constraintlayout.widget.Guideline
                 android:id="@+id/imageStart"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:orientation="vertical"
+                app:layout_constraintGuide_percent=".125"
                 app:layout_constraintStart_toStartOf="parent"
-                app:layout_constraintGuide_percent=".125" />
+                app:layout_constraintTop_toBottomOf="@id/qrCodeInstruction" />
 
             <androidx.constraintlayout.widget.Guideline
                 android:id="@+id/imageEnd"
@@ -71,17 +83,18 @@
                 app:layout_constraintGuide_percent=".875" />
 
             <ImageView
-                app:layout_constraintStart_toEndOf="@id/imageStart"
-                app:layout_constraintEnd_toStartOf="@id/imageEnd"
-                app:layout_constraintTop_toBottomOf="@id/qrCodeExplanation"
+                android:id="@+id/image"
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center"
-                android:adjustViewBounds="true"
                 android:layout_marginTop="24dp"
+                android:adjustViewBounds="true"
                 android:contentDescription="@string/qrCodeScreenshotContentDescription"
                 android:scaleType="fitCenter"
-                android:src="@drawable/locate_qr_code_screenshot" />
+                android:src="@drawable/locate_qr_code_screenshot"
+                app:layout_constraintEnd_toStartOf="@id/imageEnd"
+                app:layout_constraintStart_toEndOf="@id/imageStart"
+                app:layout_constraintTop_toBottomOf="@id/qrCodeInstruction" />
 
         </androidx.constraintlayout.widget.ConstraintLayout>
 

libs/login-api-2/src/main/res/values/strings.xml

@@ -102,7 +102,7 @@ F
     <string name="findMySchool">Find my school</string>
     <string name="loginWithQRCode">QR Code</string>
     <string name="locateQRCode">Locate QR Code</string>
-    <string name="qrCodeExplanation">You\'ll find the QR code on the web in your account profile. Click \'QR for Mobile Login\' in the list.</string>
+    <string name="qrCodeExplanation">Find the QR code in your account profile on the web under \'QR for Mobile Login\'.</string>
     <string name="qrCodeScanningPrompt">Scan a QR code from Canvas to login</string>
     <string name="loginWithQRCodeError">There was an error logging in. Please generate another QR Code and try again.</string>
     <string name="invalidQRCodeError">Please scan a QR code generated by Canvas</string>
@@ -130,4 +130,5 @@ F
     <string name="weMadeChanges">We\'ve made a few changes.</string>
     <string name="whatsNewText">See what\'s new</string>
     <string name="findAnotherSchool">Find another school</string>
+    <string name="qrCodeDisabledExplanation">If it\'s not there, your institution has disabled this option.</string>
 </resources>