[Carousel][Catalog] Add fullscreen demo to catalog

PiperOrigin-RevId: 544700979
material-components · Jul 5, 2023 · ad6afbf · ad6afbf
1 parent bc54f2e
commit ad6afbf
Show file tree

Hide file tree

Showing 6 changed files with 364 additions and 2 deletions.
diff --git a/catalog/java/io/material/catalog/carousel/CarouselFragment.java b/catalog/java/io/material/catalog/carousel/CarouselFragment.java
@@ -73,13 +73,18 @@ public Fragment createFragment() {
             return new HeroCarouselDemoFragment();
           }
         },
+        new Demo(R.string.cat_carousel_fullscreen_demo_title) {
+          @Override
+          public Fragment createFragment() {
+            return new FullScreenStrategyDemoFragment();
+          }
+        },
         new Demo(R.string.cat_carousel_default_list_demo_title) {
           @Override
           public Fragment createFragment() {
             return new DefaultListDemoFragment();
           }
-        }
-    );
+        });
   }
 
   /** The Dagger module for {@link CarouselFragment} dependencies. */

diff --git a/catalog/java/io/material/catalog/carousel/FullScreenStrategyDemoFragment.java b/catalog/java/io/material/catalog/carousel/FullScreenStrategyDemoFragment.java
@@ -0,0 +1,171 @@
+/*
+ * Copyright 2023 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.material.catalog.carousel;
+
+import io.material.catalog.R;
+
+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.View.OnClickListener;
+import android.view.ViewGroup;
+import android.widget.AutoCompleteTextView;
+import android.widget.Button;
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+import com.google.android.material.bottomsheet.BottomSheetDialog;
+import com.google.android.material.carousel.CarouselLayoutManager;
+import com.google.android.material.carousel.CarouselSnapHelper;
+import com.google.android.material.carousel.FullScreenCarouselStrategy;
+import com.google.android.material.divider.MaterialDividerItemDecoration;
+import com.google.android.material.materialswitch.MaterialSwitch;
+import com.google.android.material.slider.Slider;
+import com.google.android.material.slider.Slider.OnSliderTouchListener;
+import io.material.catalog.feature.DemoFragment;
+
+/** A fragment that displays the fullscreen variant of the Carousel. */
+public class FullScreenStrategyDemoFragment extends DemoFragment {
+
+  private MaterialDividerItemDecoration horizontalDivider;
+  private BottomSheetDialog bottomSheetDialog;
+
+  @NonNull
+  @Override
+  public View onCreateDemoView(
+      @NonNull LayoutInflater layoutInflater,
+      @Nullable ViewGroup viewGroup,
+      @Nullable Bundle bundle) {
+    return layoutInflater.inflate(
+        R.layout.cat_carousel_full_screen_fragment, viewGroup, false /* attachToRoot */);
+  }
+
+  @Override
+  @SuppressWarnings("RestrictTo")
+  public void onViewCreated(@NonNull View view, @Nullable Bundle bundle) {
+    super.onViewCreated(view, bundle);
+
+    bottomSheetDialog = new BottomSheetDialog(view.getContext());
+    bottomSheetDialog.setContentView(R.layout.cat_carousel_bottom_sheet_contents);
+    // Opt in to perform swipe to dismiss animation when dismissing bottom sheet dialog.
+    bottomSheetDialog.setDismissWithAnimation(true);
+
+    horizontalDivider =
+        new MaterialDividerItemDecoration(
+            requireContext(), MaterialDividerItemDecoration.HORIZONTAL);
+
+    Button showBottomSheetButton = view.findViewById(R.id.show_bottomsheet_button);
+    showBottomSheetButton.setOnClickListener(new OnClickListener() {
+      @Override
+      public void onClick(View v) {
+        bottomSheetDialog.show();
+      }
+    });
+
+    MaterialSwitch debugSwitch = bottomSheetDialog.findViewById(R.id.debug_switch);
+    MaterialSwitch drawDividers = bottomSheetDialog.findViewById(R.id.draw_dividers_switch);
+    MaterialSwitch enableFlingSwitch = bottomSheetDialog.findViewById(R.id.enable_fling_switch);
+    AutoCompleteTextView itemCountDropdown =
+        bottomSheetDialog.findViewById(R.id.item_count_dropdown);
+    Slider positionSlider = bottomSheetDialog.findViewById(R.id.position_slider);
+
+    // A vertical fullscreen carousel
+    RecyclerView fullscreenRecyclerView =
+        view.findViewById(R.id.fullscreen_carousel_recycler_view);
+    CarouselLayoutManager carouselLayoutManager =
+        new CarouselLayoutManager(new FullScreenCarouselStrategy(),
+            RecyclerView.VERTICAL);
+    carouselLayoutManager.setDebuggingEnabled(
+        fullscreenRecyclerView, debugSwitch.isChecked());
+    fullscreenRecyclerView.setLayoutManager(carouselLayoutManager);
+    fullscreenRecyclerView.setNestedScrollingEnabled(false);
+
+    debugSwitch.setOnCheckedChangeListener(
+        (buttonView, isChecked) -> {
+          carouselLayoutManager.setOrientation(CarouselLayoutManager.VERTICAL);
+          fullscreenRecyclerView.setBackgroundResource(
+              isChecked ? R.drawable.dashed_outline_rectangle : 0);
+          carouselLayoutManager.setDebuggingEnabled(
+              fullscreenRecyclerView, isChecked);
+        });
+
+    drawDividers.setOnCheckedChangeListener(
+        (buttonView, isChecked) -> {
+          if (isChecked) {
+            fullscreenRecyclerView.addItemDecoration(horizontalDivider);
+          } else {
+            fullscreenRecyclerView.removeItemDecoration(horizontalDivider);
+          }
+        });
+
+    CarouselAdapter adapter =
+        new CarouselAdapter(
+            (item, position) -> fullscreenRecyclerView.scrollToPosition(position),
+            R.layout.cat_carousel_item_vertical);
+
+    SnapHelper flingDisabledSnapHelper = new CarouselSnapHelper();
+    SnapHelper flingEnabledSnapHelper = new CarouselSnapHelper(false);
+
+    flingDisabledSnapHelper.attachToRecyclerView(fullscreenRecyclerView);
+
+    enableFlingSwitch.setOnCheckedChangeListener(
+        (buttonView, isChecked) -> {
+          if (isChecked) {
+            flingDisabledSnapHelper.attachToRecyclerView(null);
+            flingEnabledSnapHelper.attachToRecyclerView(fullscreenRecyclerView);
+          } else {
+            flingEnabledSnapHelper.attachToRecyclerView(null);
+            flingDisabledSnapHelper.attachToRecyclerView(fullscreenRecyclerView);
+          }
+        });
+
+    itemCountDropdown.setOnItemClickListener(
+        (parent, view1, position, id) ->
+            adapter.submitList(
+                CarouselData.createItems().subList(0, position),
+                updateSliderRange(positionSlider, adapter)));
+
+    positionSlider.addOnSliderTouchListener(
+        new OnSliderTouchListener() {
+          @Override
+          public void onStartTrackingTouch(@NonNull Slider slider) {}
+
+          @Override
+          public void onStopTrackingTouch(@NonNull Slider slider) {
+            fullscreenRecyclerView.smoothScrollToPosition((int) slider.getValue() - 1);
+          }
+        });
+
+    fullscreenRecyclerView.setAdapter(adapter);
+    adapter.submitList(CarouselData.createItems(), updateSliderRange(positionSlider, adapter));
+  }
+
+  private static Runnable updateSliderRange(Slider slider, CarouselAdapter adapter) {
+    return () -> {
+      if (adapter.getItemCount() <= 1) {
+        slider.setEnabled(false);
+        return;
+      }
+
+      slider.setValueFrom(1);
+      slider.setValue(1);
+      slider.setValueTo(adapter.getItemCount());
+      slider.setEnabled(true);
+    };
+  }
+}
diff --git a/catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_bottom_sheet_contents.xml b/catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_bottom_sheet_contents.xml
@@ -0,0 +1,93 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2023 The Android Open Source Project
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      https://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  -->
+<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+  android:layout_width="match_parent"
+  android:layout_height="wrap_content"
+  xmlns:app="http://schemas.android.com/apk/res-auto">
+    <LinearLayout
+      android:id="@+id/container"
+      android:layout_height="wrap_content"
+      android:layout_width="match_parent"
+      android:orientation="vertical">
+
+      <com.google.android.material.materialswitch.MaterialSwitch
+        android:id="@+id/debug_switch"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:checked="false"
+        android:layout_marginHorizontal="16dp"
+        android:layout_marginVertical="8dp"
+        android:textAppearance="?attr/textAppearanceBodyLarge"
+        android:text="@string/cat_carousel_debug_mode_label"/>
+
+      <com.google.android.material.materialswitch.MaterialSwitch
+        android:id="@+id/draw_dividers_switch"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:checked="false"
+        android:layout_marginHorizontal="16dp"
+        android:layout_marginVertical="8dp"
+        android:textAppearance="?attr/textAppearanceBodyLarge"
+        android:text="@string/cat_carousel_draw_dividers_label"/>
+
+      <com.google.android.material.materialswitch.MaterialSwitch
+        android:id="@+id/enable_fling_switch"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:checked="false"
+        android:layout_marginHorizontal="16dp"
+        android:layout_marginVertical="8dp"
+        android:textAppearance="?attr/textAppearanceBodyLarge"
+        android:text="@string/cat_carousel_enable_fling_label"/>
+
+      <com.google.android.material.textfield.TextInputLayout
+        style="?attr/textInputFilledExposedDropdownMenuStyle"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center_vertical"
+        android:layout_marginHorizontal="16dp"
+        android:layout_marginVertical="8dp"
+        app:helperTextEnabled="false">
+
+        <AutoCompleteTextView
+          android:id="@+id/item_count_dropdown"
+          android:layout_width="match_parent"
+          android:layout_height="wrap_content"
+          android:inputType="none"
+          android:hint="@string/cat_carousel_adapter_item_count_hint_label"
+          app:simpleItems="@array/cat_carousel_adapter_count_content"/>
+
+      </com.google.android.material.textfield.TextInputLayout>
+
+      <TextView
+        android:id="@+id/position_slider_label"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="16dp"
+        android:layout_marginTop="16dp"
+        android:labelFor="@id/position_slider"
+        android:text="@string/cat_carousel_position_slider_label"
+        android:textAppearance="?attr/textAppearanceBodyLarge"/>
+
+      <com.google.android.material.slider.Slider
+        android:id="@+id/position_slider"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_marginHorizontal="16dp"
+        android:layout_marginBottom="8dp"
+        android:contentDescription="@string/cat_carousel_position_slider_content_description"
+        android:stepSize="1.0"/>
+
+    </LinearLayout>
+  </androidx.core.widget.NestedScrollView>
diff --git a/catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_full_screen_fragment.xml b/catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_full_screen_fragment.xml
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2023 The Android Open Source Project
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+      https://www.apache.org/licenses/LICENSE-2.0
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  -->
+<LinearLayout 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="match_parent"
+  android:orientation="vertical">
+
+  <TextView
+    android:id="@+id/fullscreen_title_text_view"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginHorizontal="16dp"
+    android:layout_marginVertical="4dp"
+    android:text="@string/cat_carousel_fullscreen_title"
+    android:textAppearance="?attr/textAppearanceTitleMedium" />
+
+  <TextView
+    android:id="@+id/fullscreen_desc_text_view"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_marginHorizontal="16dp"
+    android:layout_marginVertical="4dp"
+    android:text="@string/cat_carousel_fullscreen_desc"
+    android:textAppearance="?attr/textAppearanceBodyMedium" />
+  <Button
+    android:id="@+id/show_bottomsheet_button"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+    android:layout_margin="16dp"
+    android:text="@string/cat_carousel_show_debug_options"/>
+
+  <androidx.recyclerview.widget.RecyclerView
+    android:id="@+id/fullscreen_carousel_recycler_view"
+    android:layout_width="match_parent"
+    android:layout_height="0dp"
+    android:layout_weight="1"
+    android:layout_marginHorizontal="16dp"
+    android:layout_marginVertical="16dp"
+    android:clipChildren="false"
+    android:clipToPadding="false" />
+</LinearLayout>
+
diff --git a/catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_item_vertical.xml b/catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_item_vertical.xml
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright 2022 The Android Open Source Project
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  -->
+
+<com.google.android.material.carousel.MaskableFrameLayout
+  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:app="http://schemas.android.com/apk/res-auto"
+  xmlns:tools="http://schemas.android.com/tools"
+  android:id="@+id/carousel_item_container"
+  android:layout_width="match_parent"
+  android:layout_height="match_parent"
+  android:foreground="?attr/selectableItemBackground"
+  app:shapeAppearance="?attr/shapeAppearanceCornerExtraLarge">
+  <ImageView
+    android:id="@+id/carousel_image_view"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:scaleType="centerCrop"
+    tools:ignore="ContentDescription" />
+</com.google.android.material.carousel.MaskableFrameLayout>