Review screen ux changes like font style, error icon, not answered text color etc.

catalog/src/main/java/com/google/android/fhir/catalog/DemoQuestionnaireFragment.kt

@@ -40,6 +40,7 @@ import androidx.navigation.fragment.navArgs
 import com.google.android.fhir.catalog.ModalBottomSheetFragment.Companion.BUNDLE_ERROR_KEY
 import com.google.android.fhir.catalog.ModalBottomSheetFragment.Companion.REQUEST_ERROR_KEY
 import com.google.android.fhir.datacapture.QuestionnaireFragment
+import com.google.android.fhir.datacapture.QuestionnaireFragment.Companion.EXTRA_ENABLE_REVIEW_PAGE
 import com.google.android.fhir.datacapture.QuestionnaireFragment.Companion.SUBMIT_REQUEST_KEY
 import com.google.android.material.card.MaterialCardView
 import kotlinx.coroutines.launch
@@ -152,7 +153,8 @@ class DemoQuestionnaireFragment : Fragment() {
             args =
               bundleOf(
                 QuestionnaireFragment.EXTRA_QUESTIONNAIRE_JSON_STRING to
-                  viewModel.getQuestionnaireJson()
+                  viewModel.getQuestionnaireJson(),
+                EXTRA_ENABLE_REVIEW_PAGE to true
               )
           )
         }

datacapture/src/main/java/com/google/android/fhir/datacapture/views/QuestionnaireItemHeaderView.kt

@@ -156,8 +156,12 @@ private fun SpannableStringBuilder.appendWithSpan(value: String, @ColorInt color
   setSpan(ForegroundColorSpan(color), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE)
 }
 
+/**
+ * Reads @ColorInt value from android resource attribute. e.g [attrColor] value is
+ * [R.attr.colorError] to get the colorInt.
+ */
 @ColorInt
-private fun Context.getColorFromAttr(@AttrRes attrColor: Int): Int {
+internal fun Context.getColorFromAttr(@AttrRes attrColor: Int): Int {
   val typedValue = TypedValue()
   theme.resolveAttribute(attrColor, typedValue, true)
   return typedValue.data

datacapture/src/main/java/com/google/android/fhir/datacapture/views/QuestionnaireItemHeaderViewInReviewMode.kt

@@ -0,0 +1,46 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.google.android.fhir.datacapture.views
+
+import android.content.Context
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import android.widget.LinearLayout
+import android.widget.TextView
+import com.google.android.fhir.datacapture.R
+import com.google.android.fhir.datacapture.localizedInstructionsSpanned
+import com.google.android.fhir.datacapture.localizedPrefixSpanned
+import org.hl7.fhir.r4.model.Questionnaire
+
+internal class QuestionnaireItemHeaderViewInReviewMode(context: Context, attrs: AttributeSet?) :
+  LinearLayout(context, attrs) {
+
+  init {
+    LayoutInflater.from(context)
+      .inflate(R.layout.questionnaire_item_header_in_review_mode, this, true)
+  }
+
+  fun bind(questionnaireItem: Questionnaire.QuestionnaireItemComponent) {
+    val prefix = findViewById<TextView>(R.id.prefix)
+    val question = findViewById<TextView>(R.id.question)
+    val hint = findViewById<TextView>(R.id.hint)
+    prefix.updateTextAndVisibility(questionnaireItem.localizedPrefixSpanned)
+    updateQuestionText(question, questionnaireItem)
+    hint.updateTextAndVisibility(questionnaireItem.localizedInstructionsSpanned)
+    visibility = getViewGroupVisibility(prefix, question, hint)
+  }
+}

datacapture/src/main/java/com/google/android/fhir/datacapture/views/QuestionnaireItemSimpleQuestionAnswerDisplayViewHolderFactory.kt

@@ -20,6 +20,7 @@ import android.view.View
 import android.view.View.GONE
 import android.view.View.VISIBLE
 import android.widget.TextView
+import androidx.core.graphics.ColorUtils
 import com.google.android.fhir.datacapture.R
 import com.google.android.fhir.datacapture.localizedFlyoverSpanned
 import com.google.android.fhir.datacapture.validation.ValidationResult
@@ -34,9 +35,10 @@ internal object QuestionnaireItemSimpleQuestionAnswerDisplayViewHolderFactory :
   QuestionnaireItemViewHolderFactory(R.layout.questionnaire_item_simple_question_answer_view) {
   override fun getQuestionnaireItemViewHolderDelegate() =
     object : QuestionnaireItemViewHolderDelegate {
-      private lateinit var header: QuestionnaireItemHeaderView
+      private lateinit var header: QuestionnaireItemHeaderViewInReviewMode
       private lateinit var flyOverTextView: TextView
       private lateinit var answerTextView: TextView
+      private lateinit var errorIcon: View
       private lateinit var divider: MaterialDivider
       override lateinit var questionnaireItemViewItem: QuestionnaireItemViewItem
 
@@ -45,6 +47,7 @@ internal object QuestionnaireItemSimpleQuestionAnswerDisplayViewHolderFactory :
         flyOverTextView = itemView.findViewById(R.id.flyover_text_view)
         answerTextView = itemView.findViewById(R.id.answer_text_view)
         divider = itemView.findViewById(R.id.text_divider)
+        errorIcon = itemView.findViewById(R.id.error_icon_in_review_mode)
       }
 
       override fun bind(questionnaireItemViewItem: QuestionnaireItemViewItem) {
@@ -69,8 +72,24 @@ internal object QuestionnaireItemSimpleQuestionAnswerDisplayViewHolderFactory :
               else -> VISIBLE
             }
           text = questionnaireItemViewItem.answerString(context)
+          setTextColorAsPerAnswer()
         }
 
+        errorIcon.visibility =
+          when (questionnaireItemViewItem.questionnaireItem.type) {
+            Questionnaire.QuestionnaireItemType.GROUP,
+            Questionnaire.QuestionnaireItemType.DISPLAY -> {
+              GONE
+            }
+            else -> {
+              if (questionnaireItemViewItem.hasAnswerString) {
+                GONE
+              } else {
+                VISIBLE
+              }
+            }
+          }
+
         divider.visibility =
           if (header.visibility == VISIBLE ||
               flyOverTextView.visibility == VISIBLE ||
@@ -85,5 +104,16 @@ internal object QuestionnaireItemSimpleQuestionAnswerDisplayViewHolderFactory :
       override fun displayValidationResult(validationResult: ValidationResult) {}
 
       override fun setReadOnly(isReadOnly: Boolean) {}
+
+      private fun TextView.setTextColorAsPerAnswer() =
+        if (questionnaireItemViewItem.hasAnswerString) {
+          val color = context.getColorFromAttr(android.R.attr.textColor)
+          setTextColor(ColorUtils.setAlphaComponent(color, TEXT_COLOR_ALPHA))
+        } else {
+          val color = context.getColorFromAttr(R.attr.colorError)
+          setTextColor(color)
+        }
     }
 }
+
+private const val TEXT_COLOR_ALPHA = 0x80 // 50%

datacapture/src/main/java/com/google/android/fhir/datacapture/views/QuestionnaireItemViewItem.kt

@@ -150,6 +150,9 @@ data class QuestionnaireItemViewItem(
     return questionnaireResponseItem.answer.joinToString { it.displayString(context) }
   }
 
+  internal val hasAnswerString: Boolean
+    get() = questionnaireResponseItem.hasAnswer()
+
   fun isAnswerOptionSelected(
     answerOption: Questionnaire.QuestionnaireItemAnswerOptionComponent
   ): Boolean {

datacapture/src/main/res/drawable/ic_error_48px.xml

@@ -0,0 +1,14 @@
+<vector
+    android:autoMirrored="true"
+    android:height="48dp"
+    android:tint="?attr/colorControlNormal"
+    android:viewportHeight="48"
+    android:viewportWidth="48"
+    android:width="48dp"
+    xmlns:android="http://schemas.android.com/apk/res/android"
+>
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M24,34Q24.7,34 25.175,33.525Q25.65,33.05 25.65,32.35Q25.65,31.65 25.175,31.175Q24.7,30.7 24,30.7Q23.3,30.7 22.825,31.175Q22.35,31.65 22.35,32.35Q22.35,33.05 22.825,33.525Q23.3,34 24,34ZM22.65,26.35H25.65V13.7H22.65ZM24,44Q19.9,44 16.25,42.425Q12.6,40.85 9.875,38.125Q7.15,35.4 5.575,31.75Q4,28.1 4,23.95Q4,19.85 5.575,16.2Q7.15,12.55 9.875,9.85Q12.6,7.15 16.25,5.575Q19.9,4 24.05,4Q28.15,4 31.8,5.575Q35.45,7.15 38.15,9.85Q40.85,12.55 42.425,16.2Q44,19.85 44,24Q44,28.1 42.425,31.75Q40.85,35.4 38.15,38.125Q35.45,40.85 31.8,42.425Q28.15,44 24,44Z"
+    />
+</vector>

datacapture/src/main/res/layout/questionnaire_item_header_in_review_mode.xml

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<androidx.constraintlayout.widget.ConstraintLayout
+    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="wrap_content"
+>
+  <TextView
+        android:id="@+id/prefix"
+        style="?attr/questionnaireReviewModeQuestionTextStyle"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:paddingEnd="@dimen/prefix_padding_end"
+        app:layout_constraintEnd_toStartOf="@+id/question"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+    />
+  <TextView
+        android:id="@+id/question"
+        style="?attr/questionnaireReviewModeQuestionTextStyle"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toEndOf="@id/prefix"
+        app:layout_constraintTop_toTopOf="parent"
+    />
+  <TextView
+        android:id="@+id/hint"
+        style="?attr/questionnaireSubtitleTextStyle"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/instructions_top_margin"
+        android:layout_gravity="center_vertical"
+        tools:text="Sample helper text"
+        app:layout_constraintTop_toBottomOf="@id/question"
+        app:layout_constraintStart_toStartOf="parent"
+    />
+</androidx.constraintlayout.widget.ConstraintLayout>

datacapture/src/main/res/layout/questionnaire_item_simple_question_answer_view.xml

@@ -22,7 +22,7 @@
     android:layout_marginTop="@dimen/item_margin_vertical"
     android:orientation="vertical"
 >
-    <com.google.android.fhir.datacapture.views.QuestionnaireItemHeaderView
+    <com.google.android.fhir.datacapture.views.QuestionnaireItemHeaderViewInReviewMode
         android:id="@+id/header"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
@@ -34,14 +34,31 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
     />
-
-    <TextView
-        android:id="@+id/answer_text_view"
-        style="?attr/questionnaireAnswerTextStyle"
-        android:layout_width="match_parent"
+    <LinearLayout
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginTop="@dimen/item_margin_vertical"
-    />
+        android:orientation="horizontal"
+        android:gravity="center_vertical"
+    >
+    <TextView
+            android:id="@+id/error_icon_in_review_mode"
+            android:layout_width="20dp"
+            android:layout_height="20dp"
+            android:layout_marginEnd="@dimen/error_icon_margin_end"
+            android:background="@drawable/ic_error_48px"
+            android:backgroundTint="?attr/colorError"
+            android:visibility="gone"
+        />
+
+    <TextView
+            android:id="@+id/answer_text_view"
+            style="?attr/questionnaireAnswerTextStyle"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+        />
+    </LinearLayout>
 
     <com.google.android.material.divider.MaterialDivider
         android:id="@+id/text_divider"

datacapture/src/main/res/values/attrs.xml

@@ -33,6 +33,9 @@
     <!--   Style for answer text. -->
     <attr name="questionnaireAnswerTextStyle" format="reference" />
 
+    <!--   Style for question text in review mode -->
+    <attr name="questionnaireReviewModeQuestionTextStyle" format="reference" />
+
     <!--   Style for radio buttons. -->
     <attr name="questionnaireRadioButtonStyle" format="reference" />
     <!--   Style for checkbox buttons. -->

datacapture/src/main/res/values/dimens.xml

@@ -40,4 +40,5 @@
     <dimen name="help_header_margin_bottom">4dp</dimen>
     <dimen name="help_margin_bottom">16dp</dimen>
     <dimen name="icon_inset">16dp</dimen>
+    <dimen name="error_icon_margin_end">4dp</dimen>
 </resources>

datacapture/src/main/res/values/styles.xml

@@ -43,7 +43,11 @@
       <item
             name="questionnaireQuestionTextStyle"
         >@style/TextAppearance.Material3.TitleMedium</item>
-        <item
+
+      <item
+            name="questionnaireReviewModeQuestionTextStyle"
+        >@style/TextAppearance.Material3.TitleMedium</item>
+      <item
             name="questionnaireSubtitleTextStyle"
         >@style/TextAppearance.Material3.BodyMedium</item>
       <item
@@ -132,9 +136,7 @@
     <style
         name="Questionnaire.AnswerStyle"
         parent="TextAppearance.Material3.BodyMedium"
-    >
-        <item name="android:alpha">0.5</item>
-    </style>
+    />
 
     <style
         name="Questionnaire.ErrorStyle"