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.

Answer 1

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.