I have a ViewPager
that is using a PageTransformer
. I'm using the PageTransformer
to animate the elevation of the cards inside my ViewPager
whenever I scroll. Here is the code:
mViewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
@Override
public void transformPage(View page, float position) {
View card = ((ViewGroup)page).getChildAt(0);
CardView cardView = (CardView) card;
float absoluteValue = Math.abs(position);
if (absoluteValue < 1.3f) {
float scale = 1.3f - absoluteValue;
float scaleElevation = scale * 10f;
cardView.setCardElevation(scaleElevation);
//cardView.setElevation(scaleElevation);
Log.d(TAG, "scaleElevation: " + scaleElevation + ", position: " + position);
}
}
});
Fairly straightforward. Now, what happens is, when you scroll, the elevation "animates" using the defined scale factor and the position in the scroll. But what happens, is when you finish scrolling to a new page, there's a sort of "snapping" effect with the shadows.
Here is a video that clearly shows the issue: https://gfycat.com/FlakyWarlikeEgg
So what's happening here, and what would the fix be?