Firebase – AdMob , ad item in Recycler View hides some items and creates spaces after the ad

All right buckle up because this is a long one! It’s actually the "adding ads" part that’s complicating things here, not the extra ViewHolder type.

You’re missing items because you’re replacing some of them with ads. The total number of items (itemCount) in your Adapter should be the number of cards plus the number of ads you want to display.

Because you’re not handling that, you’re effectively skipping over items in cards with this code:

override fun getItemViewType(position: Int): Int {
    //logic to display Native Ad between content
    if(position != 0) {
        return if (position % 2 == 0) {
            //after 2 items, show native ad
            VIEW_TYPE_AD
        } else {
            VIEW_TYPE_CONTENT
        }
    }
    return VIEW_TYPE_CONTENT
}

You have cards.size number of items, and instead of showing cards[2] you show an ad instead, and cards[2] never gets shown. (Also that code shows an ad every two items btw, position % 2 either produces a 0 or 1, so it loops every second number – you want position % 3 so it’s every multiple of three. But there’s more to it than that, we’ll get to it!)

So you need logic to handle the fact that your data (cards) and your contents (cards + ads) are different:

• itemCount needs to include the appropriate number of ads
• getItemViewType needs to know if position holds an ad or a card
• onBindViewHolder needs to be able to translate position to the appropriate index in cards when displaying a card

Let’s lay down the rules first – let’s say that you want an ad displayed as every third item, that starts after the first two items, and you’re happy to end with an ad, to make things simple.

So the number of ads is just how many groups of 2 there are – integer division will do that:

val adCount = cards.size / 2

The total number of items is that plus the number of cards:

override fun getItemCount() = cards.size + (cards.size / 2)

Working out whether position is a card or an ad is simple enough, it’s basically what you already did! Except we need to handle every third item as an ad. We also need to account for the zero-based indexing:

    |     |     |
0 1 2 3 4 5 6 7 8 9

We get ads on 2, 5 and 8. We care about finding multiples of 3 (where the modulo operation returns zero) so we can add 1 to each position. This also eliminates the need to check if position == 0 (that special edge case was a sign your logic wasn’t consistent – don’t worry I only realised that while writing this!)

fun isCard(position: Int) = (position + 1) % 3 != 0

Note that we’re using 3 here because we’re dealing with the position in the list which has been padded out with an ad every 2 places. Every 2 items in cards has become 2+1 items in the adapter’s content.

Really we should be using a constant, val ITEMS_PER_AD = 2 and deriving another value from that, val AD_FREQUENCY = ITEMS_PER_AD + 1. Avoids magic numbers that are hard to read and work with, and easy to mess up. This is clearer (maybe with better names!) and you can just change ITEMS_PER_AD to change how many there are, and everything else will adjust along with it

Translating from a position to a card is the last bit. You have to account for when a position isn’t a valid card, i.e. isCard is false. It’s easiest to return null here in that case.

It might help to look at how the translations should work out:

position:   0 1 2 3 4 5 6 7 8 9
card index: 0 1 x 2 3 x 4 5 x 6

Yep it’s one of them logic puzzles – what’s the pattern in this progression?

The offset is happening every multiple of 3 items, so what if we divide position by 3 and subtract it, removing those offsets?

position:   0 1 2 3 4 5 6 7 8 9
pos / 3:    0 0 0 1 1 1 2 2 2 3
card index: 0 1 x 2 3 x 4 5 x 6

Nice, that looks good! So now, we need to either return null if it’s not a card, otherwise fetch the appropriate card from the data set:

fun getCardForPosition(position: Int): Card? {
    val offset = position / 3
    return if (isCard(position)) cards[position - offset] else null
}

Those are the pieces required to size your list properly, work out if a particular position is a card or an ad, and fetch the appropriate card from your data. Hopefully you can see how to work that into the Adapter methods to work out which itemViewType you need, etc.

You could actually just try to getCardForPosition in onBindViewHolder and if the result is null, display an ad (and cast the ViewHolder you’ve been passed to the ad one, since that’s what you should be getting as they’re all using the same functions to determine what’s what). Lots of options, the logic around the list is the hard part!

As for the spaces, see if it works when you have everything displaying correctly. It might resolve itself, or it might be a layout issue with your ad items. Make sure their width isn’t match_parent or anything. You can always use the Layout Inspector with a running app to see exactly what’s happening in the layout on the screen, might give you some clues

I wanted to check I hadn’t missed anything so I wrote a basic implementation if it helps:

data class Card(val info: String)

class Adapter(private val cards: List<Card>) : RecyclerView.Adapter<Adapter.MyViewHolder>() {

    private fun isCard(position: Int) = (position + 1) % AD_FREQUENCY != 0

    private fun getCardForPosition(position: Int): Card? {
        val offset = position / AD_FREQUENCY
        return if (isCard(position)) cards[position - offset] else null
    }

    override fun getItemViewType(position: Int) =
        if (isCard(position)) CARD_VIEWTYPE else AD_VIEWTYPE
    

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        val binding = ItemViewBinding.inflate(inflater, parent, false)
        return if (viewType == AD_VIEWTYPE) MyViewHolder.AdViewHolder(binding)
        else MyViewHolder.CardViewHolder(binding)
    }

    override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
        val card = getCardForPosition(position)
        if (card == null) (holder as MyViewHolder.AdViewHolder).binding.textView.text = "AD"
        else (holder as MyViewHolder.CardViewHolder).binding.textView.text = card.info
    }

    override fun getItemCount() = cards.size + (cards.size / ITEMS_PER_AD)

    sealed class MyViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        class AdViewHolder(val binding: ItemViewBinding) : MyViewHolder(binding.root)
        class CardViewHolder(val binding: ItemViewBinding) : MyViewHolder(binding.root)
    }

    companion object {
        const val ITEMS_PER_AD = 3
        const val AD_FREQUENCY = ITEMS_PER_AD + 1
        const val AD_VIEWTYPE = 0
        const val CARD_VIEWTYPE = 1
    }
}

// set up with
recycler.layoutManager =
    LinearLayoutManager(requireContext(), LinearLayoutManager.HORIZONTAL, false)
recycler.adapter = Adapter(List(32) { Card("Content $it") })

Really simple, just uses the same layout for both ViewHolders with a TextView in it. Fixed size for the layout, no spaces popping up:

Hope it helps!