cardview shadow elevation animation in recyclerview

Question

I want cardview elevation animation just like Google is doing in "PlayGames" animation. Here is a sample gif of animation. Can anyone guide me how to do it or refer any library.

sample gif animation

Thanks

Answer 1

How to do it? Using Viewpager and Shadow Transform

1- create a PagerAdapter for cardview

2- inside the adapter in instantiateItem method set elevation for the card like this

 CardView cardView = (CardView) view.findViewById(R.id.cardView);

        if (mBaseElevation == 0) {
            mBaseElevation = cardView.getCardElevation();
        }

        cardView.setMaxCardElevation(mBaseElevation * MAX_ELEVATION_FACTOR);
        mViews.set(position, cardView);
        return view;

after that implement ViewPager.OnPageChangeListener inside the onPageScrolled

        if (currentCard != null) {
            if (mScalingEnabled) {
                currentCard.setScaleX((float) (1 + 0.1 * (1 - realOffset)));
                currentCard.setScaleY((float) (1 + 0.1 * (1 - realOffset)));
            }
            currentCard.setCardElevation((baseElevation + baseElevation
                    * (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (1 - realOffset)));
        }

        CardView nextCard = mAdapter.getCardViewAt(nextPosition);

        // We might be scrolling fast enough so that the next (or previous) card
        // was already destroyed or a fragment might not have been created yet
        if (nextCard != null) {
            if (mScalingEnabled) {
                nextCard.setScaleX((float) (1 + 0.1 * (realOffset)));
                nextCard.setScaleY((float) (1 + 0.1 * (realOffset)));
            }
            nextCard.setCardElevation((baseElevation + baseElevation
                    * (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (realOffset)));
        }

full code ViewPagerCards

if you want to do that using RecyclerView
you can get the middle item and check onBindViewHolder if that item is middle item then do the scale animation to know to get the middle check this answer : Get center visible item of RecycleView when scrolling