FirebaseRecyclerAdapter with 2 different database references - negative impact on scrolling

Question

Simple thing I would like to do (see in the picture)

Display a view with info coming from 2 different places in Firebase so that it behaves in a professional way scrolling UP and DOWN

I have a list of movies and on each of them I would like the user to specify a rating and see it

In DB I created 2 structures to have the list of movies on one side and the ratings per user on the other

Problem using FirebaseRecyclerAdapter

My problem is that scrolling fast up and down the list, the visualization of the information coming from the second reference (the rating) is loaded on a different time (asynchronous call) and this is not acceptable to see this (little) delay building the view. Is this a limitation of FirebaseRecyclerView?

Because viewHolders are reused in the recycleView I reset and reload each time in populateView() the rating values and this doesn't help. Once retrieved I'm oblidged to get them again if the user scroll the view (see the setOnlistener in populateView()

Setting a listener in populateView cause also to have as many listener as the number of times populateView() is executed (if you scroll UP and DOWN it's many times).

Solutions / Workaround ?

Is there a correct way to do it preventing the problem? Or is it a limitation? What about performance with my implementation where the listener is inside populateView() and there are MANY listener created?

Below some things I'm thinking on:

• Prevent viewHolders to be recycled and just load once?
• Override some other methods of RecyclerView? I tried with parseSnapshot() but it's the same problem...
• Change the DB structure to have all the info in one list (I don't think it's the good one because it means adding rating information of each user to movie list)
• Add a loading spinner on the rating part so that the rating is displayed only when the asyncrhonous call to firebase is completed (don't like it) without the today effect of: "changing star color in front of the user".

My Implementation

From FirebaseRecyclerAdapter

 @Override
protected void populateViewHolder(final MovieViewHolder viewHolder, final     Movie movie, final int position) {

    String movieId = this.getRef(position).getKey();

    // Oblidged to show no rating at the beginning because otherwise
    // if a viewHolder is reused it has the values from another movie
    viewHolder.showNoRating();

    //---------------------------------------------
    // Set values in the viewHolder from the model 
    //---------------------------------------------
    viewHolder.movieTitle.setText(movie.getTitle());
    viewHolder.movieDescription.setText(movie.getDescription());

    //-----------------------------------------------------
    // Ratings info are in another DB location... get them
    // but call is asynchronous so PROBLEM when SCROLLING!
    //-----------------------------------------------------
    DatabaseReference ratingMovieRef = mDbRef.child(Constants.FIREBASE_LOCATION_RATINGS).child(currentUserId).child(movieId);
 ratingQuoteRef.addListenerForSingleValueEvent(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {


            RatingMovie ratingMovie = dataSnapshot.getValue(RatingMovie.class);
            Rating rating = Rating.NO_RATING;
            if (ratingMovie != null) {
                rating = Rating.valueOf(ratingMovie.getRating());
            }

            // Set the rating in the viewholder (through anhelper method)
            viewHolder.showActiveRating(rating);
        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }
    });

}

from MovieViewHolder

public class QuoteViewHolder extends RecyclerView.ViewHolder {

public CardView cardView;
public TextView movieTitle;
public TextView movieDescription;
public ImageView ratingOneStar;
public ImageView ratingTwoStar;
public ImageView ratingThreeStar;

public QuoteViewHolder(View itemView) {

    super(itemView);
    movieTitle = (TextView)itemView.findViewById(R.id.movie_title);
    movieDescription = (TextView)itemView.findViewById(R.id.movie_descr);

    // rating
    ratingOneStar = (ImageView)itemView.findViewById(R.id.rating_one);
    ratingTwoStar = (ImageView)itemView.findViewById(R.id.rating_two);
    ratingThreeStar = (ImageView)itemView.findViewById(R.id.rating_three);
}

/**
* Helper to show the color on stars depending on rating value 
*/
public void showActiveRating(Rating rating){

    if (rating.equals(Rating.ONE)) {
        // just set the good color on ratingOneStar and the others
        ...
    }
    else if (rating.equals(Rating.TWO)) {
        // just set the good color
        ...
    } else if (rating.equals(Rating.THREE)) {
       // just set the good color
       ...
   }


/**
 * Initialize the rating icons to unselected.
 * Important because the view holder can be reused and if not initalised values from other moviecan be seen
 */
public void initialiseNoRating(){
 ratingOneStar.setColorFilter(ContextCompat.getColor(itemView.getContext(), R.color.light_grey)); 
    ratingTwoStar.setColorFilter(....
    ratingThreeStar.SetColorFilter(...
}

Answer 1

You can sort of cache the ratings using a ChildEventListener. Basically just create a separat one just for the Ratings node, and have it store the ratings in a Map. Then using the RecyclerAdapter you will retrieve from the Map if the rating is available, if it is not, have the rating listener update the recyclerview as soon as is has downloaded the rating. This is one strategy you could go about, doing it, you will have to manually copy/paste some classes from the FirebaseUI library and set some fields public for this to work.

Usage would be something like this

private MovieRatingConnection ratingConnection;

   // inside onCreate

    ratingConnection = new MovieRatingConnection(userId, new MovieRatingConnection.RatingChangeListener() {
        @Override
        public void onRatingChanged(DataSnapshot dataSnapshot) {
            if (recyclerAdapter != null) {
                if (dataSnapshot != null) {
                    int index = recyclerAdapter.snapshots.getIndexForKey(dataSnapshot.getKey());
                    recyclerAdapter.notifyItemChanged(index);
                }
            }
        }
    });

    Query movieQuery = FirebaseDatabase.getInstance().getReference().child("Movies");
    recyclerAdapter = new FirebaseRecyclerAdapter(movieQuery...) {
        @Override
        public void populateViewHolder(RecyclerView.ViewHolder viewHolder, Object model, int position) {
            //...
            final String key = getRef(position).getKey();
            viewHolder.showActiveRating(ratingConnection.getRating(key));
        }
    };

and MovieRatingConnection would be a class like this

public class MovieRatingConnection {

    private MovieRatingListener listener;

    public MovieRatingConnection(String userId, RatingChangeListener changeListener) {
        Query query = FirebaseDatabase.getInstance().getReference().child("MovieRatings").child(userId);
        listener = new MovieRatingListener(query, changeListener);
    }

    public Rating getRating(String key) {
        return listener.getRating(key);
    }

    public void cleanup() {
        if (listener != null) {
            listener.unregister();
        }
    }



    public static class MovieRatingListener implements ChildEventListener {

        public interface RatingChangeListener {
            public void onRatingChanged(DataSnapshot snapshot);

        }

        private Query query;
        private HashMap<String, Rating> ratingMap = new HashMap<>();
        private RatingChangeListener changeListener;


        public MovieRatingListener(Query query, RatingChangeListener changeListener) {
            this.query = query;
            this.changeListener = changeListener;
            query.addChildEventListener(this);

        }

        @Override
        public void onChildAdded(DataSnapshot dataSnapshot, String s) {
            if (dataSnapshot != null) {
                ratingMap.put(dataSnapshot.getKey(), dataSnapshot.getValue(Rating.class));
                changeListener.onRatingChanged(dataSnapshot);
            }
        }

        @Override
        public void onChildChanged(DataSnapshot dataSnapshot, String s) {
            if (dataSnapshot != null) {
                ratingMap.put(dataSnapshot.getKey(), dataSnapshot.getValue(Rating.class));
                changeListener.onRatingChanged(dataSnapshot);
            }
        }

        @Override
        public void onChildRemoved(DataSnapshot dataSnapshot) {
            ratingMap.remove(dataSnapshot.getKey());
            changeListener.onRatingChanged(null);
        }

        @Override
        public void onChildMoved(DataSnapshot dataSnapshot, String s) {

        }

        @Override
        public void onCancelled(DatabaseError databaseError) {

        }

        public Rating getRating(String key) {
            if (ratingMap.get(key) != null) {
                return ratingMap.get(key);
            } else {
                return new Rating(); // default value/null object
            }
        }

        public void unregister() {
            query.removeEventListener(this);
        }
    }
}