Match height for ColorSectionView and WallpaperQuickSwitchView

Modify ColorSectionView to have the same padding and height of
WallpaperQuickSwitchView. The padding is added programmatically
because in freeform window mode, it's possible for the view to
transition from vertically to horizontally.

This CL doesn't address the issue where the color options may
appear smaller than expected based on the window size in freeform
mode.

Bug: 300679192
Flag: EXEMPT bugfix
Test: Manually. See screenshots.
freeform landscape: http://screen/6cSUkexrJCYNhJS
freeform portrait: http://screen/3NRjoPnzvhZiiMG
phone original: http://screen/7kEWQsD5CA2Sjau
phone updated: http://screen/4FpjJHAb9RQPehq
tablet landscape original: http://screen/7fNAba2KfapvVp3
tablet landscape updated: http://screen/8XUb3hRm9PP9vZ2
tablet portrait original: http://screen/7JNmuCEoqpG5Zsa
tablet portrait updated: http://screen/9fS4ZZEJaDmntHz

Change-Id: Id00278ee473dacfca9d9dd746614f368d321e861
diff --git a/res/drawable/color_overflow.xml b/res/drawable/color_overflow.xml
index 1ad29fc..62050fb 100644
--- a/res/drawable/color_overflow.xml
+++ b/res/drawable/color_overflow.xml
@@ -23,7 +23,7 @@
         <shape
             android:shape="ring"
             android:innerRadius="@dimen/component_color_overflow_small_radius_default"
-            android:thickness="-1dp"
+            android:thickness="-2dp"
             android:useLevel="false">
             <solid android:color="@color/system_outline"/>
         </shape>
diff --git a/res/layout/color_section_view.xml b/res/layout/color_section_view.xml
index cfa9be3..e50a351 100644
--- a/res/layout/color_section_view.xml
+++ b/res/layout/color_section_view.xml
@@ -37,7 +37,6 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:orientation="horizontal"
-        android:paddingVertical="20dp"
         android:paddingHorizontal="24dp"
         android:weightSum="@integer/color_section_num_columns">
         <include
@@ -53,8 +52,8 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center_horizontal"
-        android:layout_marginTop="10dp"
-        android:minHeight="48dp"
+        android:minHeight="24dp"
+        android:paddingVertical="16dp"
         android:gravity="center"
         android:drawablePadding="12dp"
         android:drawableStart="@drawable/ic_nav_color"
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 99519ae..6a923d9 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -53,6 +53,9 @@
     <dimen name="theme_option_font_sample_width">52dp</dimen>
     <dimen name="theme_option_sample_margin">10dp</dimen>
 
+    <!-- Dimensions for the color options -->
+    <dimen name="color_options_selected_option_height">102dp</dimen>
+
     <!-- Note, using dp instead of sp as this text is more like a "snapshot" of the font -->
     <dimen name="theme_option_font_text_size">20dp</dimen>
     <dimen name="theme_option_font_min_text_size">15dp</dimen>
diff --git a/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt b/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
index c2dc381..3adc913 100644
--- a/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
+++ b/src/com/android/customization/picker/color/ui/binder/ColorSectionViewBinder.kt
@@ -20,6 +20,7 @@
 import android.content.res.Configuration
 import android.view.LayoutInflater
 import android.view.View
+import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.LinearLayout
 import androidx.core.view.isVisible
@@ -50,12 +51,34 @@
     ) {
         val optionContainer: LinearLayout =
             view.requireViewById(R.id.color_section_option_container)
+        val optionContainerLayoutParams = optionContainer.layoutParams
         val moreColorsButton: View = view.requireViewById(R.id.more_colors)
         if (isConnectedHorizontallyToOtherSections) {
             moreColorsButton.isVisible = true
             moreColorsButton.setOnClickListener(navigationOnClick)
+
+            // Match the height of option container and the other sections when connected
+            // horizontally.
+            optionContainerLayoutParams.height =
+                view.resources.getDimensionPixelSize(R.dimen.color_options_selected_option_height)
+            optionContainer.layoutParams = optionContainerLayoutParams
+            optionContainer.setPadding(
+                optionContainer.paddingLeft,
+                16,
+                optionContainer.paddingRight,
+                16
+            )
         } else {
             moreColorsButton.isVisible = false
+
+            optionContainerLayoutParams.height = ViewGroup.LayoutParams.WRAP_CONTENT
+            optionContainer.layoutParams = optionContainerLayoutParams
+            optionContainer.setPadding(
+                optionContainer.paddingLeft,
+                20,
+                optionContainer.paddingRight,
+                20
+            )
         }
         lifecycleOwner.lifecycleScope.launch {
             lifecycleOwner.repeatOnLifecycle(Lifecycle.State.STARTED) {