CODEWITHSUNDEEP
androidanimationandroid-cardviewandroid-elevation
Hitesh Bisht
Hitesh Bisht

Reputation: 536

cardview shadow elevation animation in recyclerview

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

Upvotes: 0

Views: 1401

Answers (1)

tamtom
tamtom

Reputation: 2594

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

Upvotes: 1

Related Questions