[Site design revamp] Add helper text to the bottom of the theme picker

WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutCategoryAdapter.kt

@@ -5,11 +5,13 @@ import android.view.ViewGroup
 import androidx.recyclerview.widget.DiffUtil
 import androidx.recyclerview.widget.RecyclerView.Adapter
 import org.wordpress.android.ui.layoutpicker.LayoutCategoryViewType.DEFAULT
+import org.wordpress.android.ui.layoutpicker.LayoutCategoryViewType.FOOTER
 import org.wordpress.android.ui.layoutpicker.LayoutCategoryViewType.RECOMMENDED
 
 enum class LayoutCategoryViewType {
     DEFAULT,
     RECOMMENDED,
+    FOOTER,
 }
 
 /**
@@ -19,9 +21,11 @@ class LayoutCategoryAdapter(
     private var nestedScrollStates: Bundle,
     private val thumbDimensionProvider: ThumbDimensionProvider,
     private val recommendedDimensionProvider: ThumbDimensionProvider? = null,
-    private val showRowDividers: Boolean = true
-) : Adapter<LayoutsItemViewHolder>() {
+    private val showRowDividers: Boolean = true,
+    private val footerLayoutResId: Int? = null
+) : Adapter<LayoutsRowViewHolder>() {
     private var items: List<LayoutCategoryUiState> = listOf()
+    private val shouldShowFooter get() = footerLayoutResId != null && items.isNotEmpty()
 
     fun update(newItems: List<LayoutCategoryUiState>) {
         val diffResult = DiffUtil.calculateDiff(
@@ -34,29 +38,37 @@ class LayoutCategoryAdapter(
         diffResult.dispatchUpdatesTo(this)
     }
 
-    override fun getItemCount(): Int = items.size
+    override fun getItemCount(): Int = items.size + if (shouldShowFooter) 1 else 0
 
-    override fun onBindViewHolder(holder: LayoutsItemViewHolder, position: Int) {
-        holder.bind(items[position])
+    override fun onBindViewHolder(holder: LayoutsRowViewHolder, position: Int) {
+        (holder as? LayoutsItemViewHolder)?.bind(items[position])
     }
 
     override fun getItemViewType(position: Int): Int {
-        return if (items[position].isRecommended) RECOMMENDED.ordinal else DEFAULT.ordinal
+        return when {
+            items.size <= position -> FOOTER.ordinal
+            items[position].isRecommended -> RECOMMENDED.ordinal
+            else -> DEFAULT.ordinal
+        }
     }
 
-    override fun onViewRecycled(holder: LayoutsItemViewHolder) {
+    override fun onViewRecycled(holder: LayoutsRowViewHolder) {
         super.onViewRecycled(holder)
-        holder.onRecycled()
+        (holder as? LayoutsItemViewHolder)?.onRecycled()
     }
 
     override fun onCreateViewHolder(parent: ViewGroup, viewType: Int) =
-            LayoutsItemViewHolder(
-                    parent = parent,
-                    nestedScrollStates = nestedScrollStates,
-                    thumbDimensionProvider = thumbDimensionProvider,
-                    recommendedDimensionProvider = recommendedDimensionProvider,
-                    showRowDividers = showRowDividers
-            )
+            when (viewType) {
+                FOOTER.ordinal -> LayoutsFooterViewHolder(parent, footerLayoutResId!!)
+                else ->
+                    LayoutsItemViewHolder(
+                            parent = parent,
+                            nestedScrollStates = nestedScrollStates,
+                            thumbDimensionProvider = thumbDimensionProvider,
+                            recommendedDimensionProvider = recommendedDimensionProvider,
+                            showRowDividers = showRowDividers
+                    )
+            }
 
     fun onRestoreInstanceState(savedInstanceState: Bundle) {
         nestedScrollStates = savedInstanceState

WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsItemViewHolder.kt → WordPress/src/main/java/org/wordpress/android/ui/layoutpicker/LayoutsRowViewHolder.kt

@@ -14,6 +14,13 @@ import androidx.recyclerview.widget.RecyclerView.OnScrollListener
 import org.wordpress.android.R
 import org.wordpress.android.util.extensions.setVisible
 
+sealed class LayoutsRowViewHolder(view: View) : RecyclerView.ViewHolder(view)
+
+class LayoutsFooterViewHolder(parent: ViewGroup, footerLayoutResId: Int) :
+        LayoutsRowViewHolder(
+                LayoutInflater.from(parent.context).inflate(footerLayoutResId, parent, false)
+        )
+
 /**
  * Modal Layout Picker layouts view holder
  */
@@ -24,7 +31,7 @@ class LayoutsItemViewHolder(
     private var nestedScrollStates: Bundle,
     private val thumbDimensionProvider: ThumbDimensionProvider,
     private val recommendedDimensionProvider: ThumbDimensionProvider?
-) : RecyclerView.ViewHolder(
+) : LayoutsRowViewHolder(
         LayoutInflater.from(
                 parent.context
         ).inflate(R.layout.modal_layout_picker_layouts_row, parent, false)

WordPress/src/main/java/org/wordpress/android/ui/sitecreation/theme/HomePagePickerFragment.kt

@@ -75,7 +75,8 @@ class HomePagePickerFragment : Fragment() {
                         viewModel.nestedScrollStates,
                         thumbDimensionProvider,
                         recommendedDimensionProvider,
-                        showRowDividers = false
+                        showRowDividers = false,
+                        footerLayoutResId = R.layout.home_page_picker_footer
                 )
             }
 

WordPress/src/main/res/drawable/ic_info_outline_grey_dark_24dp.xml

@@ -0,0 +1,13 @@
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="24dp"
+    android:width="24dp"
+    android:viewportHeight="18.0"
+    android:viewportWidth="18.0" >
+
+    <path
+        android:fillColor="@color/neutral_70"
+        android:pathData="M9.8,6.8H8.2V5.2h1.5V6.8zM9.8,8.2H8.2v4.5h1.5V8.2zM9,3C5.7,3 3,5.7 3,9s2.7,6 6,6s6,-2.7 6,-6S12.3,3 9,3M9,1.5c4.1,0 7.5,3.4 7.5,7.5s-3.4,7.5 -7.5,7.5S1.5,13.1 1.5,9S4.9,1.5 9,1.5z" >
+    </path>
+
+</vector>

WordPress/src/main/res/layout/home_page_picker_footer.xml

@@ -0,0 +1,22 @@
+<?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"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content">
+
+    <TextView
+        android:id="@+id/bottom_helper_text"
+        style="@style/SiteCreationHeaderV2Subtitle"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:padding="@dimen/margin_large"
+        android:text="@string/hpp_bottom_helper_text"
+        android:drawablePadding="@dimen/margin_large"
+        app:drawableStartCompat="@drawable/ic_info_outline_grey_dark_24dp"
+        app:drawableTint="?attr/colorOnSurface"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintEnd_toEndOf="parent" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

WordPress/src/main/res/values/strings.xml

@@ -3396,6 +3396,7 @@
     <string name="hpp_recommended_title">Best for %s</string>
     <string name="hpp_recommended_subtitle">Picked for you</string>
     <string name="hpp_recommended_default_vertical">Blogging</string>
+    <string name="hpp_bottom_helper_text">Can\'t decide? You can change the theme at any time.</string>
 
     <!-- Stories -->
     <string name="dialog_edit_story_limited_title">Limited Story Editing</string>