Android Paging Library Doesn't Scroll Up Correctly

Question

I'm using the JetPack paging library with a network call (no database).

I am able to scroll down smoothly and load new pages of data, BUT, when scrolling up it stutters and quickly jumps to the top of the list. I am unable to scroll up smoothly.

Here is a video showing the problem: https://i.stack.imgur.com/hEpwA.jpg

What I've Tried:

Enabling retrofit caching
Using a LinearLayoutManager instead of GridLayoutManager
Following old and newer tutorials with versions 1.0.1 and 2.1.2 of the library

Here is my code:

MovieDataSource.kt:

    private val movieDbApi: TheMovieDbApi
) : PageKeyedDataSource<Int, Movie>() {

    override fun loadBefore(params: LoadParams<Int>, callback: LoadCallback<Int, Movie>) {}


    override fun loadInitial(params: LoadInitialParams<Int>, callback: LoadInitialCallback<Int, Movie>) {

        movieDbApi.getTopRatedMovies(BuildConfig.MOVIE_DATA_BASE_API, FIRST_PAGE).subscribe(
            {
                it?.let { callback.onResult(it.results, null, FIRST_PAGE + 1) }
            }, {}
        )
    }

    override fun loadAfter(params: LoadParams<Int>, callback: LoadCallback<Int, Movie>) {

        movieDbApi.getTopRatedMovies(BuildConfig.MOVIE_DATA_BASE_API, params.key).subscribe(
            {
                val key = params.key + 1
                it?.let {callback.onResult(it.results, key)
                }
            },{}
        )

    }

MovieDataSourceFactory.kt:

class MovieDataSourceFactory(private val movieDbApi: TheMovieDbApi) :
    DataSource.Factory<Int, Movie>() {

    // Is this where the MovieDataSource callBacks are sent?
    val movieLiveDataSource = MutableLiveData<MovieDataSource>()

    override fun create(): DataSource<Int, Movie> {
        val movieDataSource = MovieDataSource(movieDbApi)
        movieLiveDataSource.postValue(movieDataSource)
        return movieDataSource
    }

}

HomeViewModel.kt:

class HomeViewModel @Inject constructor(
    theMovieDbApi: TheMovieDbApi
) : DisposingViewModel() {

    var moviePagedList: LiveData<PagedList<Movie>>
    private var liveDataSource: LiveData<MovieDataSource>

    init {
        val movieDataSourceFactory = MovieDataSourceFactory(theMovieDbApi)
        liveDataSource = movieDataSourceFactory.movieLiveDataSource

        val config = PagedList.Config.Builder()
            .setEnablePlaceholders(true)
            .setPageSize(MovieDataSource.PAGE_SIZE)
            .build()

        moviePagedList = LivePagedListBuilder(movieDataSourceFactory, config)
            .build()
    }
}

HomeViewModel.kt:

class HomeActivity : AppCompatActivity() {

    @Inject
    internal lateinit var viewModelFactory: ViewModelFactory<HomeViewModel>
    private lateinit var viewModel: HomeViewModel

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
        AndroidInjection.inject(this)

        val adapter = HomeAdapter()

        movie_recycler_view.setHasFixedSize(false)
        movie_recycler_view.layoutManager = LinearLayoutManager(this)

        val viewModel = ViewModelProvider(this, viewModelFactory).get(HomeViewModel::class.java)

        viewModel.moviePagedList.observe(this, Observer {
            adapter.submitList(it)
        })

        movie_recycler_view.adapter = adapter
}
}

HomeAdapter.kt:

class HomeAdapter : PagedListAdapter<Movie, HomeAdapter.MovieViewHolder>(USER_COMPARATOR) {

    override fun getItemCount(): Int {
        return super.getItemCount()
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MovieViewHolder {
        val view = LayoutInflater.from(parent.context)
            .inflate(R.layout.item_movie, parent, false)
        return MovieViewHolder(view)
    }

    override fun onBindViewHolder(holder: MovieViewHolder, position: Int) {
        val movie = getItem(position)
        movie?.let { holder.bind(it) }
    }


    class MovieViewHolder(view: View) : RecyclerView.ViewHolder(view) {

        fun bind(movie: Movie) {

            Picasso.get().load(BASE_IMAGE_URL + movie.poster_path).into(itemView.movie_image)

        }
    }

    companion object {
        private val USER_COMPARATOR = object : DiffUtil.ItemCallback<Movie>() {
            override fun areItemsTheSame(oldItem: Movie, newItem: Movie): Boolean =
                oldItem.id == newItem.id

            override fun areContentsTheSame(oldItem: Movie, newItem: Movie): Boolean =
                oldItem == newItem
        }
    }
}

If anyone has a solution or spots a problem I'd love to hear it!

score 0 · Accepted Answer · answered Apr 15 '20 at 09:17

I solved the problem.

It's because I didn't add a placeholder image to Picasso in the adapter.

Before:

Picasso.get()
    .load(BASE_IMAGE_URL + movie.poster_path)
    .into(itemView.movie_image)

After:

Picasso.get()
    .load(BASE_IMAGE_URL + movie.poster_path)
    .placeholder(R.drawable.placeholder)
    .into(itemView.movie_image)

Now it loads well.

Another consideration is the size of the image, it takes a while to load a larger image especially if you are loading many of them within an infinite scroll.

Android Paging Library Doesn't Scroll Up Correctly

1 Answers1