Spacing between 1st right & 1st left item in Carousel

[saisasanksunkavalli]

Im using layoutManager.setPostLayoutListener(new CarouselZoomPostLayoutListener());

But it is giving me a spacing like this between the center item & 1st right, 1st left like this

How to reduce the gap ?

Regards,
Sasank

[mig35]

Hi @saisasanksunkavalli.
This gap is done by CarouselZoomPostLayoutListener. You can check its algorithm.
Zoom is controlled by "scale" parameter.
Spacing is controlled by translate parameters.

I suggest you to write custom ZoomPostLayoutListener. And change scale parameter not so fast. This will resolve your issue.

[Kisty]

A nice API wouldn't go amiss though. Perhaps a setter which takes a value and applies that to the scale given?

[mig35]

Yep, @Kisty. I was thinking about it, but haven't started this yet :)

[Kisty]

Perhaps it might be worth offering a few effects, such as on using a slow drop off, like

f(x) = x^2

And perhaps using cos(x) for medium dropoff.

[RomiValladares]

Hi! I'm having the same problem.
In my implementation of the PostLayoutListener, I'm returning values like:

itemPositionToCenterDiff=3.0 scale=0.7
itemPositionToCenterDiff=2.0 scale=0.8
itemPositionToCenterDiff=1.0 scale=0.9
itemPositionToCenterDiff=0.0 scale=1.0

I thought this would make the difference between views the same, but I'm getting the same result as OP (with a vertical orientation).

    @Override
    public ItemTransformation transformChild(@NonNull final View child, final float itemPositionToCenterDiff, final int orientation) {
        //final float scale = (float) (2 * (2 * -StrictMath.atan(Math.abs(itemPositionToCenterDiff) + 0.5) / Math.PI + 1));
        float auxPos = Math.abs(itemPositionToCenterDiff);
        final float scale = auxPos > 0 ? 1 - (auxPos / 10) : 1;

//other stuff

        return new ItemTransformation(scale, scale, translateX, translateY);
    }

Am I missing something?

[avalenzuelac]

same problem :(

[NirmalyaSin]

Can someone tell how to increase the height of the views which are immediate left and right of the center element ?

[mig35]

@NirmalyaSin
you can play around with custom realization of this class https://github.com/Azoft/CarouselLayoutManager/blob/master/CarouselLayoutManager/carousel/src/main/java/com/azoft/carousellayoutmanager/CarouselZoomPostLayoutListener.java

[NirmalyaSin]

Yes I am doing so but the gap between the views are changing, height of the immediate left and right views are not getting changed. Can you please tell which variables can be altered to get the result ?

[mig35]

As I remember you should change scale @NirmalyaSin

[NirmalyaSin]

final float scale = (float) (2 * (2 * -StrictMath.atan(Math.abs(itemPositionToCenterDiff) + 1.0) / Math.PI + 1));

@mig35 can you explain how you are setting the scale here ?

[mig35]

this is a kind of magic to convert item position (from 0 to maxVisibleItems) to scale factor that is needed to be for this item.

you can play around with this function @NirmalyaSin

[NirmalyaSin]

@mig35 Yes but I need to change the height of the visible items apart from the center one. But the height is not getting changed. Can you tell me how to increase or decrease the height ?

[mig35]

@NirmalyaSin
as I can see if you pass scaleY then the view will be scaled and its visible height will be changed.
The code can be found here: https://github.com/Azoft/CarouselLayoutManager/blob/master/CarouselLayoutManager/carousel/src/main/java/com/azoft/carousellayoutmanager/CarouselLayoutManager.java#L469

You can debug the library and if you find any issue you are welcome to write a PR.

[NirmalyaSin]

Thanks a lot @mig35 I was able to attain the desired view.