Enable bottom container style and behavior customization (#1859)

* Add onScrollListener that can be overridden

* Add divider above bottom container

Gone by default.

* Add styling to bottom container and the divider above it

* Add padding top and bottom for bottom container

- paddingVertical requires API level 26 (current min is 24).
- Added 4dp instead 8dp padding. 4dp results much similar to the design.

* Show bottom container divider by default

* Remove bottom container parent style

* spotlessApply

* Rename bottom container padding

* spotlessApply

* Address review

* spotlessApply

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

@@ -51,7 +51,7 @@
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:scrollbars="vertical"
- app:layout_constraintBottom_toTopOf="@+id/bottom_buttons"
+ app:layout_constraintBottom_toTopOf="@+id/bottom_nav_container_divider"
  app:layout_constraintTop_toBottomOf="@+id/questionnaire_progress_indicator"
  />
 
@@ -60,12 +60,21 @@
  android:layout_width="match_parent"
  android:layout_height="0dp"
  android:scrollbars="vertical"
- app:layout_constraintBottom_toTopOf="@+id/bottom_buttons"
+ app:layout_constraintBottom_toTopOf="@+id/bottom_nav_container_divider"
  app:layout_constraintTop_toBottomOf="@+id/review_mode_edit_button"
  />
 
+ <com.google.android.material.divider.MaterialDivider
+ style="?attr/questionnaireBottomNavContainerDividerStyle"
+ android:id="@+id/bottom_nav_container_divider"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ app:layout_constraintBottom_toTopOf="@id/bottom_nav_container"
+ />
+
  <androidx.constraintlayout.widget.ConstraintLayout
- android:id="@+id/bottom_buttons"
+ style="?attr/questionnaireBottomNavContainerStyle"
+ android:id="@+id/bottom_nav_container"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_alignParentTop="true"
@@ -79,7 +88,6 @@
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/item_margin_horizontal"
- android:layout_marginVertical="@dimen/item_margin_vertical"
  android:text="@string/button_pagination_previous"
  android:textAllCaps="false"
  app:layout_constraintBottom_toBottomOf="parent"
@@ -93,7 +101,6 @@
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/item_margin_horizontal"
- android:layout_marginVertical="@dimen/item_margin_vertical"
  android:text="@string/button_pagination_next"
  android:textAllCaps="false"
  app:layout_constraintBottom_toBottomOf="parent"
@@ -107,7 +114,6 @@
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/item_margin_horizontal"
- android:layout_marginVertical="@dimen/item_margin_vertical"
  android:text="@string/button_review"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
@@ -121,7 +127,6 @@
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginHorizontal="@dimen/item_margin_horizontal"
- android:layout_marginVertical="@dimen/item_margin_vertical"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  />

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

@@ -22,36 +22,58 @@
 
  <!-- Style for question text. -->
  <attr name="questionnaireQuestionTextStyle" format="reference" />
+
  <!-- Style for subtitle text. -->
  <attr name="questionnaireSubtitleTextStyle" format="reference" />
+
  <!-- Style for help header. -->
  <attr name="questionnaireHelpHeaderStyle" format="reference" />
+
  <!-- Style for help text. -->
  <attr name="questionnaireHelpTextStyle" format="reference" />
+
  <!-- Style for help button -->
  <attr name="questionnaireHelpButtonStyle" format="reference" />
+
  <!-- Style for question text in review mode -->
  <attr name="questionnaireReviewModeQuestionTextStyle" format="reference" />
 
  <!-- Style for answer text in review mode -->
  <attr name="questionnaireReviewModeAnswerTextStyle" format="reference" />
+
  <!-- Style for not answered text in review mode -->
  <attr
  name="questionnaireReviewModeNotAnsweredTextStyle"
  format="reference"
  />
+
  <!-- Style for item divider in review mode -->
  <attr name="questionnaireReviewModeItemDividerStyle" format="reference" />
 
+ <!-- Style for answer text. -->
+ <attr name="questionnaireAnswerTextStyle" format="reference" />
+
+ <!-- Style for bottom navigation container. -->
+ <attr name="questionnaireBottomNavContainerStyle" format="reference" />
+
+ <!-- Style for bottom navigation container divider. -->
+ <attr
+ name="questionnaireBottomNavContainerDividerStyle"
+ format="reference"
+ />
+
  <!-- Style for radio buttons. -->
  <attr name="questionnaireRadioButtonStyle" format="reference" />
+
  <!-- Style for checkbox buttons. -->
  <attr name="questionnaireCheckBoxStyle" format="reference" />
 
  <!-- Style for item text appears in dropDown view list. -->
  <attr name="questionnaireDropDownTextStyle" format="reference" />
+
  <!-- Style for text appears in dropDown autocomplete textView. -->
  <attr name="questionnaireDropDownSelectedTextStyle" format="reference" />
+
  <!-- Style for dropDown view layout. -->
  <attr name="questionnaireDropdownLayoutStyle" format="reference" />
 
@@ -66,8 +88,10 @@
 
  <!-- Style for dialog title text in modal view. -->
  <attr name="questionnaireDialogTitleStyle" format="reference" />
+
  <!-- Style for positive and negative dialog buttons in modal view. -->
  <attr name="questionnaireDialogButtonStyle" format="reference" />
+
  <!-- Style for add another answer button in modal view. -->
  <attr name="questionnaireAddAnotherAnswerButtonStyle" format="reference" />
 
@@ -78,14 +102,19 @@
 
  <!-- Style for previous and next buttons in paginated layout. -->
  <attr name="questionnaireButtonStyle" format="reference" />
+
  <!-- Style for submit button. -->
  <attr name="questionnaireSubmitButtonStyle" format="reference" />
+
  <!-- Style for edit button. -->
  <attr name="questionnaireEditButtonStyle" format="reference" />
+
  <!-- Style for validation error dialog title text in modal view. -->
  <attr name="questionnaireValidationDialogTitleStyle" format="reference" />
+
  <!-- Style for validation error dialog body text in modal view. -->
  <attr name="questionnaireValidationDialogBodyStyle" format="reference" />
+
  <!-- Style for validation error positive and negative dialog buttons in modal view. -->
  <attr name="questionnaireValidationDialogButtonStyle" format="reference" />
 
@@ -97,26 +126,34 @@
  name="questionnaireAttachmentTakePhotoButtonStyle"
  format="reference"
  />
+
  <!-- Style for attachment divider. -->
  <attr name="questionnaireAttachmentDividerStyle" format="reference" />
+
  <!-- Style for attachment uploaded label. -->
  <attr name="questionnaireAttachmentUploadedLabelStyle" format="reference" />
+
  <!-- Style for attachment upload button. -->
  <attr name="questionnaireAttachmentUploadButtonStyle" format="reference" />
+
  <!-- Style for attachment delete button. -->
  <attr name="questionnaireAttachmentDeleteButtonStyle" format="reference" />
+
  <!-- Style for attachment preview photo shape appearance. -->
  <attr
  name="questionnaireShapeAppearanceAttachmentPreviewPhotoStyle"
  format="reference"
  />
+
  <!-- Style for attachment preview icon. -->
  <attr name="questionnaireAttachmentPreviewIconStyle" format="reference" />
+
  <!-- Style for attachment preview icon background. -->
  <attr
  name="questionnaireAttachmentPreviewIconBackgroundStyle"
  format="reference"
  />
+
  <!-- Style for attachment preview title. -->
  <attr name="questionnaireAttachmentPreviewTitleStyle" format="reference" />
 

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

@@ -53,6 +53,7 @@
  <dimen name="attachment_divider_height">1dp</dimen>
  <dimen name="item_media_image_preview_max_width">200dp</dimen>
  <dimen name="item_media_image_preview_max_height">200dp</dimen>
+ <dimen name="bottom_container_padding_vertical">8dp</dimen>
  <!-- dimens for padding between text and icon in the radio button -->
  <dimen name="padding_between_text_and_icon">16dp</dimen>
  <dimen name="padding_after_text">24dp</dimen>

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

@@ -60,6 +60,12 @@
  <item name="questionnaireHelpButtonStyle">
  @style/Widget.MaterialComponents.Button.TextButton.Icon
  </item>
+ <item
+ name="questionnaireBottomNavContainerStyle"
+ >@style/Questionnaire.BottomNavContainerStyle</item>
+ <item
+ name="questionnaireBottomNavContainerDividerStyle"
+ >@style/Questionnaire.BottomNavContainerDividerStyle</item>
  <item
  name="questionnaireReviewModeAnswerTextStyle"
  >@style/Questionnaire.ReviewModeAnswerStyle</item>
@@ -176,6 +182,24 @@
  <item name="android:textColor">?attr/colorOnSurfaceVariant</item>
  </style>
 
+ <style name="Questionnaire.BottomNavContainerStyle" parent="">
+ <item name="android:background">?attr/colorSurface</item>
+ <item
+ name="android:paddingTop"
+ >@dimen/bottom_container_padding_vertical</item>
+ <item
+ name="android:paddingBottom"
+ >@dimen/bottom_container_padding_vertical</item>
+ </style>
+
+ <style
+ name="Questionnaire.BottomNavContainerDividerStyle"
+ parent="Widget.Material3.MaterialDivider"
+ >
+ <item name="android:visibility">visible</item>
+ <item name="dividerColor">@color/item_border_color</item>
+ </style>
+
  <style
  name="Questionnaire.ReviewModeAnswerStyle"
  parent="TextAppearance.Material3.BodyMedium"