[Carousel] Some item show blank in vertical Carousel when scroll

[balasaheb143]

Description: Some item show blank in vertical Carousel when scroll

Device orientation: landscape

Expected behavior: Item should not show blank

Source code:
// A hero carousel
RecyclerView heroStartRecyclerView = view.findViewById(R.id.hero_start_carousel_recycler_view);
CarouselLayoutManager heroStartCarouselLayoutManager =
new CarouselLayoutManager(new HeroCarouselStrategy(),CarouselLayoutManager.VERTICAL);

I have modify below values
m3_carousel_small_item_size_min 220dp
m3_carousel_small_item_size_max 230dp

Minimal sample app repro: Please consider attaching a minimal sample app that reproduces the issue. This will help narrow down the conditions required for reproducing the issue, and it will speed up the bug fix process. You may attach a zip file of the sample app or link to a GitHub repo that contains the sample app.

Android API version: Android 12

Material Library version: Material Android Library version you are using here (e.g., 1.14.0-alpha02)

Device: Device on which the bug was encountered here

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

Note: For horizontal scroll its working properly

[hunterstich]

Hi @balasaheb143

Thanks for filing a bug. Is this happening in the catalog app? Do you have a sample that reproduces this?

[balasaheb143]

Yes its happening in catalog app. PFA of sample code for reference.

catalog.zip

As i mention above i have changed below values from libs

m3_carousel_small_item_size_min 220dp
m3_carousel_small_item_size_max 230dp

[hunterstich]

Thanks for the info.

I tried to repro this after looking at your sample by doing:

1. Update min/max small item dimensions to 220 and 230dp
2. Update cat_carousel_hero_fragment.xml to remove the NestedScrollView, set the LinearLayout's height to match_parent, and the RecyclerView to a height of match_parent and a width of 450dp
3. Set the CarouselLayoutManager to VERTICAL in HeroCarouselDemoFragment.java

I don't see the blank items like in your demo. Could it be something else to do with the com.android.car.ui.FocusArea? If you remove that wrapper ViewGroup, does the issue persist?

What devices and API levels are you running this on?

I also see some changes in CarouselItemViewHolder with Glide transitions and placeholders. Does this still happen if you revert the changes you've made in CarouselItemViewHolder? Could items be scrolling out of bounds and recycled before the transition completes and then not trying to re-set the image once the item is scrolled back into view?

[balasaheb143]

@hunterstich

I reverted my all changes still facing same issue.I have verified on multiple devices Android 12 Moto G60. Samsung Galaxy , Android 12L Automative OS in all facing same isssue.

I have attached updated catalog.zip without my changes.

com.android.car.ui.FocusArea i am using this for joystick key event its official google AAOS car_ui lib. I have reverted FocusArea also.

Does this still happen if you revert the changes you've made in CarouselItemViewHolder : ->Yes

catalog.zip

[hunterstich]

@balasaheb143

I'm still not able to repro on my end. I couldn't get the .zip you attached to run so I copied over HeroCarouselDemoFragment, cat_carousel_hero_fragment, cat_carousel_item, button_focus_backgroundIs, and updated the min/max small item dimens to 220 and 230. there maybe a specific emulator I could try with?

This is what I'm seeing:

carousel_hero_vertical_bug.mp4

[balasaheb143]

@hunterstich
As per your video it's showing single item at a time.in my video you can see 2 items at a time.
Can you modify min max value in such way which will show first item 70 percentage and second 30 percentage of recyle view.
My device resolution is 1280*780.

[hunterstich]

Okay I'll try that.

In the meantime, what's the goal of setting such a large min/max small item size? If you're trying to have the first item to be 70% of the screen, could you try setting your item layout to use android:layout_height="match_parent" which HeroCarouselStrategy will probably adjust to result in something close to 70%? Just curious if we can help you achieve what your hoping for as a 220/230dp small item isn't a range I would expect to see used for small items.

[balasaheb143]

@hunterstich

updated.transition.mp4

I want to implement widget feature like above attached video

[balasaheb143]

@hunterstich
Could you please check above attached video . Is this feasible using material 3 Carousel. parallax effect on widget as well as on component inside widget. I want to implement in VERTICALCarousel,

[hunterstich]

You should be able to do this.

I'm not sure why you're seeing the issue with the images not loading. I can't seem to repro that problem.

For your design, you should be able to do:

    HeroCarouselStrategy strategy = new HeroCarouselStrategy();
    strategy.setSmallItemSizeMin(getContext().getResources().getDimensionPixelSize(R.dimen.custom_small_item_size_min));
    strategy.setSmallItemSizeMax(getContext().getResources().getDimensionPixelSize(R.dimen.custom_small_item_size_max));
    CarouselLayoutManager heroStartCarouselLayoutManager =
        new CarouselLayoutManager(strategy, CarouselLayoutManager.VERTICAL);

and then in your ViewHolder you can add an OnMaskChangedListener when an item is attached/detached that lets you manipulate your item's views according to their mask:

class CarouselItemViewHolder extends RecyclerView.ViewHolder {

          View childrenToParallax;

          // bind and other functions here

          
          // Pass through calls from the Adapter for onViewAttachedToWindow and 
          // onViewDetachedFromWindow to add and remove a mask changed listener.

          void onViewAttachedToWindow(View view, CarouselItem item, int position) {
            ((MaskableFrameLayout) itemView).setOnMaskChangedListener(maskRect -> {
              // Translate child views according to the maskRect MaskableFrameLayout is being clipped
              // to. Setting translationY=maskRect.top will "stick" a view in place. Multiplying maskRect.top
              // by a percentage from 0-1 will make the children look like they are parallaxing.
              childrenToParallax.setTranslationY(maskRect.top * .5f);
            });
          }

          void onViewDetachedFromWindow(View view, CarouselItem item, int position) {
            ((MaskableFrameLayout) itemView).setOnMaskChangedListener(null);
          }
}

Here's what parallaxing a child TextView with the above code looks like:

carousel_parallax_vert.mp4

There's some more info on reacting to item masks in the documentation.

[balasaheb143]

@hunterstich
Some item show blank in vertical Carousel when scroll fixed using below changes but not able to achieve above mention effect. Can i use motion layout inside MaskableFrameLayout and on swap transition.

heroStartRecyclerView.getViewTreeObserver().addOnGlobalLayoutListener(() -> {
/heroStartRecyclerView.invalidateItemDecorations();/
heroStartRecyclerView.requestLayout();
});