How to add a header to a PagedList using Android Paging Library

Question

I have tried adding a header the normal way (different view type, incrementing the data count by 1 etc.), but the paged list scroll bar jumps to the bottom of the list.

I have since come across the AsyncPagedListDiffer and tried to implement it, but now all my items except the header have disappeared. Can anyone see what I am doing wrong?

    class MerchantHistoryAdapter : PagedListAdapter<MerchantHistoryResponse.Transaction, BaseViewHolder>(MerchantHistoryDiffUtilCallback()) {

    lateinit var listener: HistoryItemListAdapterListener
    lateinit var headerListener: HistoryItemHeaderListAdapterListener

    lateinit var networkStateListener: NetworkStateListAdapterListener
    private var networkState: NetworkState = NetworkState.LOADING

    val adapterCallback = AdapterListUpdateCallback(this)

    val listUpdateCallback = object : ListUpdateCallback {
        override fun onInserted(position: Int, count: Int) {
            adapterCallback.onInserted(position + 1, count)
        }

        override fun onRemoved(position: Int, count: Int) {
            adapterCallback.onRemoved(position + 1, count)
        }

        override fun onMoved(fromPosition: Int, toPosition: Int) {
            adapterCallback.onMoved(fromPosition + 1, toPosition + 1)
        }

        override fun onChanged(position: Int, count: Int, payload: Any?) {
            adapterCallback.onChanged(position + 1, count, payload)
        }
    }

    val differ = AsyncPagedListDiffer<MerchantHistoryResponse.Transaction>(listUpdateCallback,
        AsyncDifferConfig.Builder<MerchantHistoryResponse.Transaction>(MerchantHistoryDiffUtilCallback()).build())

    override fun getItem(position: Int): MerchantHistoryResponse.Transaction? {
        return differ.getItem(position - 1)
    }

    override fun submitList(pagedList: PagedList<MerchantHistoryResponse.Transaction>?) {
        differ.submitList(pagedList)
    }

    override fun getCurrentList(): PagedList<MerchantHistoryResponse.Transaction>? {
        return differ.currentList
    }

    override fun onBindViewHolder(holder: BaseViewHolder, position: Int) {
        holder.onBind(position)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): BaseViewHolder {
        return when (viewType) {
            R.layout.item_merchant_history_header -> {
                val view = ItemMerchantHistoryHeaderBinding.inflate(LayoutInflater.from(parent.context))
                MerchantHistoryHeaderViewHolder(view)
            }
            R.layout.item_merchant_history -> {
                val view = ItemMerchantHistoryBinding.inflate(LayoutInflater.from(parent.context))
                MerchantHistoryViewHolder(view)
            }
            R.layout.item_network_state -> {
                val view = ItemNetworkStateBinding.inflate(LayoutInflater.from(parent.context))
                NetworkStateViewHolder(view)
            }
            else -> throw IllegalArgumentException("unknown view type $viewType")
        }
    }

    override fun getItemViewType(position: Int): Int {
        return if(position == 0){
            R.layout.item_merchant_history_header
        }
        else if (hasExtraRow() && position == itemCount - 1) {
            R.layout.item_network_state
        } else {
            R.layout.item_merchant_history
        }
    }

    private fun hasExtraRow() = networkState != null && networkState != NetworkState.LOADED

    override fun getItemCount(): Int {
        //Header item, plus the extra row
        return super.getItemCount() + if (hasExtraRow()) 2 else 1
    }

    fun setNetworkState(newNetworkState: NetworkState) {
        Timber.d("Setting network state....." + newNetworkState.status)
        val previousState = this.networkState
        val hadExtraRow = hasExtraRow()
        this.networkState = newNetworkState
        val hasExtraRow = hasExtraRow()
        if (hadExtraRow != hasExtraRow) {
            if (hadExtraRow) {
                notifyItemRemoved(differ.itemCount + 1)
            } else {
                notifyItemInserted(differ.itemCount + 1)
            }
        } else if (hasExtraRow && previousState != newNetworkState) {
            notifyItemChanged(itemCount - 1)
        }
    }

    inner class MerchantHistoryViewHolder(private val binding: ItemMerchantHistoryBinding)
        : BaseViewHolder(binding.root), MerchantHistoryItemViewModel.ListItemViewModelListener {

        private var itemViewModel: MerchantHistoryItemViewModel? = null

        override fun onBind(position: Int) {
            val transaction = getItem(position)

            transaction?.let {
                itemViewModel = MerchantHistoryItemViewModel(binding.root.context, it, this)
                binding.viewModel = itemViewModel
                binding.executePendingBindings()
            }
        }

        override fun onItemClick(item: MerchantHistoryResponse.Transaction) {
            listener.onItemClick(item)
        }
    }

    interface HistoryItemListAdapterListener {
        fun onItemClick(item: MerchantHistoryResponse.Transaction)
    }

    inner class NetworkStateViewHolder(private val binding: ItemNetworkStateBinding)
        : BaseViewHolder(binding.root), NetworkStateItemViewModel.ListItemViewModelListener {

        private var itemViewModel: NetworkStateItemViewModel? = null

        override fun onBind(position: Int) {
            Timber.d("binding position " + position + " with network state of " + networkState.status)
            itemViewModel = NetworkStateItemViewModel(binding.root.context, networkState,this)
            binding.viewModel = itemViewModel
            binding.executePendingBindings()
        }

        override fun onRetryClick() {
            networkStateListener.onRetryClick()
        }
    }

    interface NetworkStateListAdapterListener {
        fun onRetryClick()
    }

    inner class MerchantHistoryHeaderViewHolder(private val binding: ItemMerchantHistoryHeaderBinding)
        : BaseViewHolder(binding.root), MerchantHistoryHeaderItemViewModel.ListItemViewModelListener {

        private var itemViewModel: MerchantHistoryHeaderItemViewModel? = null

        override fun onBind(position: Int) {
            itemViewModel = MerchantHistoryHeaderItemViewModel(binding.root.context, this)
            binding.viewModel = itemViewModel
            binding.executePendingBindings()
        }

        override fun onItemClick() {
            headerListener.onItemClick()
        }
    }

    interface HistoryItemHeaderListAdapterListener {
        fun onItemClick()
    }

    class MerchantHistoryDiffUtilCallback : DiffUtil.ItemCallback<MerchantHistoryResponse.Transaction>() {

        override fun areItemsTheSame(oldItem: MerchantHistoryResponse.Transaction, newItem: MerchantHistoryResponse.Transaction): Boolean {
            return oldItem.uid == newItem.uid
        }

        override fun areContentsTheSame(oldItem: MerchantHistoryResponse.Transaction, newItem: MerchantHistoryResponse.Transaction): Boolean {
            return oldItem.uid == newItem.uid
        }
    }
}

Illative

Thank you, I also want to display the header but I forgot the part return differ.getItem(position - 1). Your question helped me then. – Whoop

Answer 1

lol okay I figured it out quite soon after posting:

This:

override fun getItemCount(): Int {
    //Header item, plus the extra row
    return super.getItemCount() + if (hasExtraRow()) 2 else 1
}

Should have been:

override fun getItemCount(): Int {
    //Header item, plus the extra row
    return differ.itemCount + if (hasExtraRow()) 2 else 1
}

Hopefully this helps future googlers.

Illative

Won't that mess with the "loadAfter" and "loadBefore" offset values? – Imray