Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 717
rnrneverdies Avatar asked Nov 29 '14 02:11

rnrneverdies


People also ask

What is onCreateViewHolder?

createViewHolder(@NonNull ViewGroup parent, int viewType) This method calls onCreateViewHolder to create a new ViewHolder and initializes some private fields to be used by RecyclerView.

What is adapter in RecyclerView?

The RecyclerView is a ViewGroup that renders any adapter-based view in a similar way. It is supposed to be the successor of ListView and GridView. One of the reasons is that RecyclerView has a more extensible framework, especially since it provides the ability to implement both horizontal and vertical layouts.

How do you use the recycler view?

RecyclerView makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the RecyclerView library dynamically creates the elements when they're needed. As the name implies, RecyclerView recycles those individual elements.


1 Answers

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.

like image 149
yigit Avatar answered Sep 30 '22 22:09

yigit