[Catalog][Carousel] Add alignment option to hero carousel

PiperOrigin-RevId: 548725196
material-components · Jul 18, 2023 · 7cfd30f · 7cfd30f
1 parent 547156e
commit 7cfd30f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/catalog/java/io/material/catalog/carousel/HeroCarouselDemoFragment.java b/catalog/java/io/material/catalog/carousel/HeroCarouselDemoFragment.java
@@ -18,13 +18,17 @@
 
 import io.material.catalog.R;
 
+import static com.google.android.material.carousel.CarouselLayoutManager.ALIGNMENT_CENTER;
+import static com.google.android.material.carousel.CarouselLayoutManager.ALIGNMENT_START;
+
 import android.os.Bundle;
 import androidx.recyclerview.widget.RecyclerView;
 import androidx.recyclerview.widget.SnapHelper;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.AutoCompleteTextView;
+import android.widget.RadioButton;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import com.google.android.material.carousel.CarouselLayoutManager;
@@ -65,8 +69,10 @@ public void onViewCreated(@NonNull View view, @Nullable Bundle bundle) {
     MaterialSwitch enableFlingSwitch = view.findViewById(R.id.enable_fling_switch);
     AutoCompleteTextView itemCountDropdown = view.findViewById(R.id.item_count_dropdown);
     Slider positionSlider = view.findViewById(R.id.position_slider);
+    RadioButton startAlignButton = view.findViewById(R.id.start_align);
+    RadioButton centerAlignButton = view.findViewById(R.id.center_align);
 
-    // A start-aligned hero carousel
+    // A hero carousel
     RecyclerView heroStartRecyclerView =
         view.findViewById(R.id.hero_start_carousel_recycler_view);
     CarouselLayoutManager heroStartCarouselLayoutManager =
@@ -135,6 +141,11 @@ public void onStopTrackingTouch(@NonNull Slider slider) {
           }
         });
 
+    startAlignButton.setOnClickListener(
+        v -> heroStartCarouselLayoutManager.setCarouselAlignment(ALIGNMENT_START));
+    centerAlignButton.setOnClickListener(
+        v -> heroStartCarouselLayoutManager.setCarouselAlignment(ALIGNMENT_CENTER));
+
     heroStartRecyclerView.setAdapter(adapter);
     adapter.submitList(CarouselData.createItems(), updateSliderRange(positionSlider, adapter));
   }

diff --git a/catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_hero_fragment.xml b/catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_hero_fragment.xml
@@ -68,6 +68,27 @@
       android:textAppearance="?attr/textAppearanceBodyLarge"
       android:text="@string/cat_carousel_enable_fling_label"/>
 
+    <RadioGroup
+      android:checkedButton="@+id/start_align"
+      android:orientation="horizontal"
+      android:layout_width="match_parent"
+      android:layout_marginHorizontal="16dp"
+      android:layout_height="wrap_content">
+      <RadioButton
+        android:id="@+id/start_align"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:enabled="true"
+        android:text="@string/cat_carousel_start_align_label"/>
+      <RadioButton
+        android:id="@+id/center_align"
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:checked="false"
+        android:enabled="true"
+        android:text="@string/cat_carousel_center_align_label"/>
+    </RadioGroup>
+
     <com.google.android.material.textfield.TextInputLayout
       style="?attr/textInputFilledExposedDropdownMenuStyle"
       android:layout_width="match_parent"

diff --git a/catalog/java/io/material/catalog/carousel/res/values/strings.xml b/catalog/java/io/material/catalog/carousel/res/values/strings.xml
@@ -21,6 +21,8 @@
   <string name="cat_carousel_draw_dividers_label" translatable="false">Draw dividers</string>
   <string name="cat_carousel_enable_snap_label" description="The title of a switch to enable snapping to carousel items.[CHAR_LIMIT=NONE]">Enable Snap</string>
   <string name="cat_carousel_enable_fling_label" description="The title of a switch to enable the flinging gesture.[CHAR_LIMIT=NONE]">Enable fling</string>
+  <string name="cat_carousel_start_align_label" description="The title of a button to make the carousel start-aligned.[CHAR_LIMIT=NONE]">Start align</string>
+  <string name="cat_carousel_center_align_label" description="The title of a button to make the carousel center-aligned.[CHAR_LIMIT=NONE]">Center align</string>
 
   <string name="cat_carousel_show_debug_options" description="The title of the button that shows carousel debug options.[CHAR_LIMIT=NONE]">Show debug options</string>