Skip to content

Commit

Permalink
[Catalog][Carousel] Add uncontained carousel demo to catalog
Browse files Browse the repository at this point in the history 
PiperOrigin-RevId: 559221323
  • Loading branch information
@imhappi
imhappi committed Aug 23, 2023
1 parent b6f6eb5 commit ef9f918
Show file tree
Hide file tree
Showing 4 changed files with 274 additions and 0 deletions.
6 changes: 6 additions & 0 deletions catalog/java/io/material/catalog/carousel/CarouselFragment.java
View file
Expand Up @@ -78,6 +78,12 @@ public Fragment createFragment() {
public Fragment createFragment() {
return new FullScreenStrategyDemoFragment();
}
},
new Demo(R.string.cat_carousel_uncontained_demo_title) {
@Override
public Fragment createFragment() {
return new UncontainedCarouselDemoFragment();
}
});
}

Expand Down
143 changes: 143 additions & 0 deletions catalog/java/io/material/catalog/carousel/UncontainedCarouselDemoFragment.java
View file
@@ -0,0 +1,143 @@
/*
* 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 android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AutoCompleteTextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.google.android.material.carousel.CarouselLayoutManager;
import com.google.android.material.carousel.CarouselSnapHelper;
import com.google.android.material.carousel.UncontainedCarouselStrategy;
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 uncontained variant of the Carousel. */
public class UncontainedCarouselDemoFragment extends DemoFragment {

private MaterialDividerItemDecoration horizontalDivider;

@NonNull
@Override
public View onCreateDemoView(
@NonNull LayoutInflater layoutInflater,
@Nullable ViewGroup viewGroup,
@Nullable Bundle bundle) {
return layoutInflater.inflate(
R.layout.cat_carousel_uncontained_fragment, viewGroup, false /* attachToRoot */);
}

@Override
@SuppressWarnings("RestrictTo")
public void onViewCreated(@NonNull View view, @Nullable Bundle bundle) {
super.onViewCreated(view, bundle);

horizontalDivider =
new MaterialDividerItemDecoration(
requireContext(), MaterialDividerItemDecoration.HORIZONTAL);

MaterialSwitch debugSwitch = view.findViewById(R.id.debug_switch);
MaterialSwitch drawDividers = view.findViewById(R.id.draw_dividers_switch);
MaterialSwitch snapSwitch = view.findViewById(R.id.snap_switch);
AutoCompleteTextView itemCountDropdown = view.findViewById(R.id.item_count_dropdown);
Slider positionSlider = view.findViewById(R.id.position_slider);

RecyclerView uncontainedRecyclerView =
view.findViewById(R.id.uncontained_carousel_recycler_view);
CarouselLayoutManager uncontainedCarouselLayoutManager =
new CarouselLayoutManager(new UncontainedCarouselStrategy());
uncontainedCarouselLayoutManager.setDebuggingEnabled(
uncontainedRecyclerView, debugSwitch.isChecked());
uncontainedRecyclerView.setLayoutManager(uncontainedCarouselLayoutManager);
uncontainedRecyclerView.setNestedScrollingEnabled(false);

debugSwitch.setOnCheckedChangeListener(
(buttonView, isChecked) -> {
uncontainedRecyclerView.setBackgroundResource(
isChecked ? R.drawable.dashed_outline_rectangle : 0);
uncontainedCarouselLayoutManager.setDebuggingEnabled(
uncontainedRecyclerView, isChecked);
});

drawDividers.setOnCheckedChangeListener(
(buttonView, isChecked) -> {
if (isChecked) {
uncontainedRecyclerView.addItemDecoration(horizontalDivider);
} else {
uncontainedRecyclerView.removeItemDecoration(horizontalDivider);
}
});

CarouselSnapHelper snapHelper = new CarouselSnapHelper();
snapSwitch.setOnCheckedChangeListener(
(buttonView, isChecked) -> {
if (isChecked) {
snapHelper.attachToRecyclerView(uncontainedRecyclerView);
} else {
snapHelper.attachToRecyclerView(null);
}
});

CarouselAdapter adapter =
new CarouselAdapter(
(item, position) -> uncontainedRecyclerView.scrollToPosition(position),
R.layout.cat_carousel_item_narrow);

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) {
uncontainedRecyclerView.smoothScrollToPosition(((int) slider.getValue()) - 1);
}
});

uncontainedRecyclerView.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);
};
}
}
121 changes: 121 additions & 0 deletions catalog/java/io/material/catalog/carousel/res/layout/cat_carousel_uncontained_fragment.xml
View file
@@ -0,0 +1,121 @@
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">

<TextView
android:id="@+id/uncontained_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_uncontained_title"
android:textAppearance="?attr/textAppearanceTitleMedium" />

<TextView
android:id="@+id/uncontained_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_uncontained_desc"
android:textAppearance="?attr/textAppearanceBodyMedium" />

<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/snap_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:contentDescription="@string/cat_carousel_snap_switch_description"
android:text="@string/cat_carousel_enable_snap_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"/>

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/uncontained_carousel_recycler_view"
android:layout_width="match_parent"
android:layout_height="196dp"
android:layout_marginHorizontal="16dp"
android:layout_marginVertical="16dp"
android:clipChildren="false"
android:clipToPadding="false" />

</LinearLayout>
</androidx.core.widget.NestedScrollView>
4 changes: 4 additions & 0 deletions catalog/java/io/material/catalog/carousel/res/values/strings.xml
View file
Expand Up @@ -52,6 +52,7 @@
<string name="cat_carousel_multi_browse_demo_title" translatable="false">Multi-browse Carousel</string>
<string name="cat_carousel_hero_demo_title" description="Name of the hero variant demo. [CHAR_LIMIT=NONE]">Hero Carousel</string>
<string name="cat_carousel_fullscreen_demo_title" translatable="false">Fullscreen Carousel</string>
<string name="cat_carousel_uncontained_demo_title" description="Name of the uncontained variant demo. [CHAR_LIMIT=NONE]">Uncontained Carousel</string>

<string name="cat_carousel_multi_browse_title" translatable="false">Multi-browse</string>
<string name="cat_carousel_multi_browse_desc" translatable="false">Multi-browse carousels allow quick browsing of many small items, like a photo thumbnail gallery.</string>
Expand All @@ -62,6 +63,9 @@
<string name="cat_carousel_fullscreen_title" description="Title of the fullscreen variant demo. [CHAR_LIMIT=NONE]">Fullscreen</string>
<string name="cat_carousel_fullscreen_desc" description="Title of the fullscreen variant demo. [CHAR_LIMIT=NONE]">Fullscreen carousels allow browsing with a focus on one item at a time.</string>

<string name="cat_carousel_uncontained_title" description="Title of the uncontained variant demo. [CHAR_LIMIT=NONE]">Uncontained</string>
<string name="cat_carousel_uncontained_desc" description="Title of the uncontained variant demo. [CHAR_LIMIT=NONE]">Uncontained carousels show items at their original sizes, with items getting smaller as they reach the edges of the screen and are cut off in the direction they scroll.</string>

<string name="cat_carousel_image_1_content_desc" translatable="false">A daisy at sunset</string>
<string name="cat_carousel_image_2_content_desc" translatable="false">Portrait of a person with hair covering their face</string>
<string name="cat_carousel_image_3_content_desc" translatable="false">Fungus on a tree</string>
Expand Down

0 comments on commit ef9f918

Please sign in to comment.