Set span size in Paging Library with GridLayoutManager

Question

set span size to 1 in GridLayoutManager when LoadState is Loading in Paging Library. I have tried this solution but it's not working.

For replicate issue: clone this official repo and set GridLayoutManager in SearchRepositoriesActivity

My code is here

MovieListFragment

....
private val adapter = MoviesAdapter()
....
private fun initAdapter() {
    val decoration = DividerItemDecoration(requireContext(), DividerItemDecoration.VERTICAL)
    binding.rvMovies.addItemDecoration(decoration)
    binding.rvMovies.layoutManager = GridLayoutManager(requireContext(), 2)
    binding.rvMovies.isNestedScrollingEnabled = true
    binding.rvMovies.adapter = adapter.withLoadStateFooter(
        footer = MoviesLoadStateAdapter { adapter.retry() }
    )
}

MoviesAdapter

class MoviesAdapter(
) : PagingDataAdapter<Movie, MoviesAdapter.ViewHolder>(MOVIE_COMPARATOR) {

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val view = ItemMovieListBinding.inflate(LayoutInflater.from(parent.context))
    return ViewHolder(view)
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val movie = getItem(position)
    if (movie != null) {
        val viewModel = MovieListItemViewModel(movie)
        holder.bind(viewModel)
    }
}

inner class ViewHolder(var viewBinding: ItemMovieListBinding) :
    RecyclerView.ViewHolder(viewBinding.root) {
    fun bind(viewModel: MovieListItemViewModel) {
        viewBinding.viewModel = viewModel

    }
}

companion object {
    private val MOVIE_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
    }
}
}

MoviesLoadStateAdapter

class MoviesLoadStateAdapter(private val retry : () -> Unit) :
  LoadStateAdapter<MoviesLoadStateAdapter.MoviesLoadStateViewHolder>() 
{

override fun onBindViewHolder(holder: MoviesLoadStateViewHolder, loadState: LoadState) {
    holder.bind(loadState)
}

override fun onCreateViewHolder(
    parent: ViewGroup,
    loadState: LoadState
): MoviesLoadStateViewHolder {
    val view = LayoutInflater.from(parent.context)
        .inflate(R.layout.item_movie_load_state_footer_view, parent, false)
    val binding = ItemMovieLoadStateFooterViewBinding.bind(view)
    return MoviesLoadStateViewHolder(binding, retry)

}

inner class MoviesLoadStateViewHolder(private val binding: ItemMovieLoadStateFooterViewBinding,
retry : ()-> Unit) :
    RecyclerView.ViewHolder(binding.root) {
    init {
        binding.retryButton.setOnClickListener {
            retry.invoke()
        }
    }
    fun bind(loadState : LoadState){
        if(loadState is LoadState.Error){
            binding.errorMsg.text = loadState.error.localizedMessage
        }
        binding.progressBar.visibility  = toVisibility(loadState is LoadState.Loading)
    }
}
}

Here goal is ProgressBar should show in centre of screen.

Post your code pls – Gabriele Mariotti Jun 13 '20 at 10:32 — Gabriele Mariotti, Jun 13 '20 at 10:32
@GabrieleMariotti please check updated question. – Kishore Jethava Jun 13 '20 at 11:25 — Kishore Jethava, Jun 13 '20 at 11:25

score 10 · Accepted Answer · answered Jun 21 '20 at 09:44

I solved it. this is my code

In your Activity

val gridLayoutManager = GridLayoutManager(activity, 2)
    gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
        override fun getSpanSize(position: Int): Int {
            val viewType = wallpaperAdapter.getItemViewType(position)
            return if(viewType == WALLPAPER_VIEW_TYPE) 1
            else 2
        }
    }

    binding.recyclerView.apply {
        this.layoutManager = gridLayoutManager
        this.setHasFixedSize(true)
        this.adapter = wallpaperAdapter
    }

In your PagingDataAdapter

override fun getItemViewType(position: Int): Int {
    if (position == itemCount){
        return NETWORK_VIEW_TYPE
    }else {
        return WALLPAPER_VIEW_TYPE
    }
}

Hope it will work for you.

If we reach the end of our paginated list, won't it make the last element span as 2? — Dilpreet Singh, Aug 31 '20 at 15:30

score 1 · Answer 2 · edited May 16 '21 at 09:04

1

don't forget

val concatAdapter = ConcatAdapter(**ConcatAdapter.Config.Builder().setIsolateViewTypes(false).build()**,adapter, empty, footer)

edited May 16 '21 at 09:04

Simas Joneliunas

2,890
20
28
35

answered May 15 '21 at 18:32

liyuzheng

11
2

score 0 · Answer 3 · answered Aug 16 '21 at 07:34

Just wanted to share that in order to make the above solution work, you have to construct your concat adapter this way:

ConcatAdapter(ConcatAdapter.Config.Builder().setIsolateViewTypes(false).build())

It's explained in the docs:

 public static final class Config {
        /**
         * If {@code false}, {@link ConcatAdapter} assumes all assigned adapters share a global
         * view type pool such that they use the same view types to refer to the same
         * {@link ViewHolder}s.
         * <p>
         * Setting this to {@code false} will allow nested adapters to share {@link ViewHolder}s but
         * it also means these adapters should not have conflicting view types
         * ({@link Adapter#getItemViewType(int)}) such that two different adapters return the same
         * view type for different {@link ViewHolder}s.
         *
         * By default, it is set to {@code true} which means {@link ConcatAdapter} will isolate
         * view types across adapters, preventing them from using the same {@link ViewHolder}s.
         */
        public final boolean isolateViewTypes;

Set span size in Paging Library with GridLayoutManager

3 Answers3