0

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

AskNilesh
  • 67,701
  • 16
  • 123
  • 163
Hitesh Bisht
  • 486
  • 1
  • 6
  • 11

1 Answers1

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

tamtom
  • 2,474
  • 1
  • 20
  • 33
  • this solution works well but I can scroll only one position at a time with viewpager. I can't handle fling that's why I wanted to do it with recyclerview – Hitesh Bisht Dec 11 '17 at 11:07
  • @HiteshBisht I've updated the answer to make it work with RececlerView, let me know if it helped you! – tamtom Dec 11 '17 at 12:36
  • I am already doing this using SnapHelper class in android but now I also want the scaling and elevation to work while the user is scrolling like I have shown in the sample GIF. Thank you – Hitesh Bisht Dec 12 '17 at 04:02
  • You can do the scaling and the elevation on bindview with the cardview code above whats is missing? – tamtom Dec 12 '17 at 04:03