Fix clock view out of bound in the carousel

Test: Manully tested. See bug.
Bug: 376852370
Flag: EXEMPT bugfix
Change-Id: I6c5f6f8d46d9aad66f162a655c2b09aea86980ba
diff --git a/res/values-w800dp/dimens.xml b/res/values-w800dp/dimens.xml
index d5032b6..5673be4 100644
--- a/res/values-w800dp/dimens.xml
+++ b/res/values-w800dp/dimens.xml
@@ -23,4 +23,5 @@
     <dimen name="clock_carousel_item_card_width">114dp</dimen>
     <dimen name="clock_carousel_item_card_height">124dp</dimen>
     <dimen name="clock_carousel_guideline_margin">320dp</dimen>
+    <item name="clock_carousel_scale" format="float" type="dimen">0.35</item>
 </resources>
\ No newline at end of file
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 229815e..bd7bc54 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -166,6 +166,7 @@
     <dimen name="clock_carousel_item_card_width">100dp</dimen>
     <dimen name="clock_carousel_item_card_height">108dp</dimen>
     <dimen name="clock_carousel_guideline_margin_for_2_pane_small_width">122dp</dimen>
+    <item name="clock_carousel_scale" format="float" type="dimen">0.5</item>
 
     <!-- Clock color and size button -->
     <dimen name="clock_color_size_button_min_height">32dp</dimen>
diff --git a/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt b/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
index 1fbdede..0ed0362 100644
--- a/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
+++ b/src/com/android/customization/picker/clock/ui/view/ClockCarouselView.kt
@@ -19,6 +19,7 @@
 import android.content.res.ColorStateList
 import android.content.res.Resources
 import android.util.AttributeSet
+import android.util.TypedValue
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
@@ -40,6 +41,7 @@
 
     val carousel: Carousel
     private val motionLayout: MotionLayout
+    private val clockViewScale: Float
     private lateinit var adapter: ClockCarouselAdapter
     private lateinit var clockViewFactory: ClockViewFactory
     private var toCenterClockController: ClockController? = null
@@ -56,6 +58,11 @@
         carousel = clockCarousel.requireViewById(R.id.carousel)
         motionLayout = clockCarousel.requireViewById(R.id.motion_container)
         motionLayout.contentDescription = context.getString(R.string.custom_clocks_label)
+        clockViewScale =
+            TypedValue().let {
+                resources.getValue(R.dimen.clock_carousel_scale, it, true)
+                it.float
+            }
     }
 
     /**
@@ -130,7 +137,14 @@
             overrideScreenPreviewWidth()
         }
 
-        adapter = ClockCarouselAdapter(clockSize, clocks, clockViewFactory, onClockSelected)
+        adapter =
+            ClockCarouselAdapter(
+                clockViewScale,
+                clockSize,
+                clocks,
+                clockViewFactory,
+                onClockSelected,
+            )
         carousel.isInfinite = clocks.size >= MIN_CLOCKS_TO_ENABLE_INFINITE_CAROUSEL
         carousel.setAdapter(adapter)
         val indexOfSelectedClock =
@@ -222,8 +236,8 @@
                         ?.largeClock
                         ?.animations
                         ?.onPickerCarouselSwiping(progress)
-                    val scalingDownScale = getScalingDownScale(progress)
-                    val scalingUpScale = getScalingUpScale(progress)
+                    val scalingDownScale = getScalingDownScale(progress, clockViewScale)
+                    val scalingUpScale = getScalingUpScale(progress, clockViewScale)
                     offCenterClockScaleView?.scaleX = scalingDownScale
                     offCenterClockScaleView?.scaleY = scalingDownScale
                     toCenterClockScaleView?.scaleX = scalingUpScale
@@ -369,6 +383,7 @@
     }
 
     private class ClockCarouselAdapter(
+        val clockViewScale: Float,
         val clockSize: ClockSize,
         val clocks: List<ClockCarouselItemViewModel>,
         private val clockViewFactory: ClockViewFactory,
@@ -450,8 +465,8 @@
                 clockScaleView.scaleY = 1f
                 controller.largeClock.animations.onPickerCarouselSwiping(1F)
             } else {
-                clockScaleView.scaleX = CLOCK_CAROUSEL_VIEW_SCALE
-                clockScaleView.scaleY = CLOCK_CAROUSEL_VIEW_SCALE
+                clockScaleView.scaleX = clockViewScale
+                clockScaleView.scaleY = clockViewScale
                 controller.largeClock.animations.onPickerCarouselSwiping(0F)
             }
         }
@@ -501,7 +516,6 @@
     companion object {
         // The carousel needs to have at least 5 different clock faces to be infinite
         const val MIN_CLOCKS_TO_ENABLE_INFINITE_CAROUSEL = 5
-        const val CLOCK_CAROUSEL_VIEW_SCALE = 0.5f
         const val TRANSITION_DURATION = 250
 
         val itemViewIds =
@@ -513,10 +527,11 @@
                 R.id.item_view_4,
             )
 
-        fun getScalingUpScale(progress: Float) =
-            CLOCK_CAROUSEL_VIEW_SCALE + progress * (1f - CLOCK_CAROUSEL_VIEW_SCALE)
+        fun getScalingUpScale(progress: Float, clockViewScale: Float) =
+            clockViewScale + progress * (1f - clockViewScale)
 
-        fun getScalingDownScale(progress: Float) = 1f - progress * (1f - CLOCK_CAROUSEL_VIEW_SCALE)
+        fun getScalingDownScale(progress: Float, clockViewScale: Float) =
+            1f - progress * (1f - clockViewScale)
 
         // This makes the card only starts to reveal in the last quarter of the trip so
         // the card won't overlap the preview.