CODEWITHSUNDEEP
androidandroid-animationandroid-recyclerviewandroid-cardview
rnrneverdies
rnrneverdies

Reputation: 15647

Animated population of RecyclerView

I have a RecyclerView stuffed with a collection of CardView. My code is essentially the code on this official article, and works fine, so there is no need to post my code here. Is on there.

It's looks like the following:

+------------------------------+
| +------------+ +------------+ |
| |   card 1   | |            | |
| +------------+ +------------+ |
| +------------+ +------------+ |
| |            | |            | |
| +------------+ +------------+ |
| +------------+ +------------+ |
| |            | |            | |
| +------------+ +------------+ |
| +------------+ +------------+ |
| |            | |   card N   | |
| +------------+ +------------+ |
+-------------------------------+

All CardViews are shown at the same time, as expected.

But what I want is that the views are displayed one by one from outside the view up to it's normal position.

+-------------------------------+         +-------------------------------+
| +------------+                |         | +------------+ +------------+ |
| |   card 1   |                |         | |   card 1   | |   card 2   | |
| +------------+                |         | +------------+ +------------+ |
|                      ^        |         |                               |
|                      |        |         |                               |
|                      |        |         |                               |
|                      |        |         |                               |
|                      |        |         |       ^                       |
|                      |        |         |       |                       |
|                      |        |         |       |                       |
|                      |        |         |       |                       |
|                      |        |         |       |                       |
+----------------------|--------+         +-------|-----------------------+
                  ------------+             +------------+ 
                 |   card 2   |             |   card 3   |   
                 +------------+             +------------+

Does anyone know how to do this?

Upvotes: 6

Views: 6376

Answers (2)

yigit
yigit

Reputation: 38263

Create a custom item animator (or extend default one) and override animateAdd such that the card will animate from below the screen. See the documentation for details. Failing to implement it properly may cause losing ViewHolders so you should be careful.

The best way to run the animation is to create an animator that will animate translationY from recyclerView.getHeight() to 0. You can check DefaultItemAnimator for references.

Btw, in the first layout pass, RecyclerView will not animate Views because it looks weird to fade in everything. To overcome it, initially keep your adapter empty and after the first layout pass, add your items (you can use a handler and defer adding items to your adapter).

Btw, RecyclerView does not 'yet' support animating views while scrolling so animateAdd will not be called when new items are added while list is scrolled by the user.

Upvotes: 4

MohK
MohK

Reputation: 1933

You can try creating custom ItemAnimators as in below project.

https://github.com/gabrielemariotti/RecyclerViewItemAnimators

Upvotes: 1

Related Questions