How to add Admob Ad between Recyclerview GridLayout

Question

I'm trying to implement Admob ad in a RecyclerView. I tried a lot of examples but failed. I want to insert one ad between 3 items of my RecyclerView, I am using GridLayout with Admob banner . I want my app view like below. Any help would be appreciated.

My RecyclerView adapter

  class ProductAdapter(private val userList: ArrayList<Model.ProductList>, private val context: Context, private val which: String) : androidx.recyclerview.widget.RecyclerView.Adapter<RecyclerView.ViewHolder>() {

override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
    if (holder.itemViewType == 0) {
        holder as MyViewHolder2
        val adRequest = AdRequest.Builder().build()
        holder.adView.loadAd(adRequest)
        holder.adView.adListener = object : AdListener() {
            override fun onAdFailedToLoad(errorCode: Int) {
                Log.d("errorCode", errorCode.toString())
            }
        }
    } else {
        holder as MyViewHolder

        val magazineList: Model.ProductList = userList[position]
        Glide.with(context).load(magazineList.featured_image)
            .thumbnail(0.5f)
            .into(holder.image)

        holder.title.text = magazineList.post_title
        holder.views.text = magazineList.count
        holder.date.text = magazineList.offer_valid

        }
    }
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
    if (viewType == 0) {
        return MyViewHolder2(LayoutInflater.from(parent.context).inflate(R.layout.ad_list_row, parent, false))
    } else {
        return MyViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.product_list_row, parent, false))

    }
}

override fun getItemCount(): Int {
    return userList.size
}

override fun getItemViewType(position: Int): Int {
    return if (position>0 && position % 3== 0) {
        0
    } else {
        1
    }
  }

class MyViewHolder(itemView: View) : androidx.recyclerview.widget.RecyclerView.ViewHolder(itemView) {
    var image: ImageView = itemView.findViewById(R.id.productImage)
    var title: TextView = itemView.findViewById(R.id.title)
    var views: TextView = itemView.findViewById(R.id.views)
    var date: TextView = itemView.findViewById(R.id.date)
    var next: androidx.cardview.widget.CardView = itemView.findViewById(R.id.next)
}

class MyViewHolder2(itemView: View) : androidx.recyclerview.widget.RecyclerView.ViewHolder(itemView) {
    var adView: AdView = itemView.findViewById(R.id.adView)
}
}

I'm trying to add an Admob banner in a recyclerview.

My xml files

ad_list_row.xml

  <RelativeLayout xmlns:ads="http://schemas.android.com/apk/res-auto"
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
<com.google.android.gms.ads.AdView

        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@color/colorAccent"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_ad_unit_id_TEST"/>
       </RelativeLayout>

product_list_row.xml

 <androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/next"
    android:layout_width="match_parent"
    android:layout_height="205dp"
    android:layout_gravity="center"
    android:layout_marginStart="3dp"
    android:layout_marginTop="6dp"
    android:layout_marginEnd="4dp"
    android:layout_marginBottom="7dp"
    card_view:cardCornerRadius="4dp">
<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
>
    <ImageView android:layout_width="match_parent"
               android:layout_height="150dp"
               android:scaleType="matrix"
               android:padding="4dp"
               android:contentDescription="@string/app_name"
               android:id="@+id/productImage"
    />

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="@string/title"
              android:textSize="14sp"
              android:id="@+id/title"
              android:textStyle="bold"
              android:textColor="@color/colorText2"
              android:padding="5dp"
              android:layout_marginStart="5dp"
              android:layout_below="@+id/productImage"
              android:lines="1"
              android:ellipsize="end"
    />
    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:layout_below="@+id/title"
                  android:weightSum="1"
    >
        <TextView android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:textSize="10sp"
                  android:textStyle="italic"
                  android:id="@+id/date"
                  android:layout_marginStart="10dp"
                  android:layout_weight="0.3"
                  android:textColor="@color/colorPrimary"
                  tools:ignore="SmallSp"/>
        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0.7"
                android:layout_gravity="center_horizontal"
                android:gravity="center_horizontal"
                android:orientation="horizontal">

            <ImageView
                    android:layout_width="15dp"
                    android:layout_height="15dp"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical"
                    android:src="@drawable/ic_dark_eye"
                    android:scaleType="fitXY"
                    android:background="@color/colorAccent"
                    android:layout_marginStart="3dp"
                    android:contentDescription="@string/app_name"/>

            <TextView
                    android:id="@+id/views"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:gravity="center_vertical"
                    android:lines="1"
                    android:layout_marginStart="5dp"
                    android:textSize="10sp"
                    tools:ignore="SmallSp"/>
        </LinearLayout>
    </LinearLayout>

</RelativeLayout>
 </androidx.cardview.widget.CardView>

You need to use multiple view types with recyclerview for hint check this answer https://stackoverflow.com/a/53779566/7666442 — AskNilesh, Feb 07 '19 at 06:28
You can check the google sample code for adding banner ads in recycler view: https://github.com/googlesamples/android-ads/tree/master/advanced/BannerRecyclerViewExample — Iffat Fatima, Feb 07 '19 at 06:51
Also. please state the exact issue you are facing, is the ad not appearing in list? — Iffat Fatima, Feb 07 '19 at 06:55
Ad is appearing but its overlapping my content and iam using banner ad — Developer, Feb 07 '19 at 06:57
Please edit the question to include code of your xml layout files as well. — Iffat Fatima, Feb 07 '19 at 06:58

score 1 · Answer 1 · answered Feb 07 '19 at 08:44

1

Try to display Ad after 5 or 10 values in RecyclerView. Like:

@Override
public int getItemViewType(int position) 
{     
    if (position % 5 == 0)
    return AD_TYPE; 
   return CONTENT_TYPE;
}

And Don't Forget to change getItemCount() Method.

answered Feb 07 '19 at 08:44

Parth Lotia

753
1
7
25

In Your Adapter there is method getItemCount() return with items_count + (items_count % 5); – Parth Lotia Feb 07 '19 at 09:51

score 1 · Answer 2 · answered Aug 03 '23 at 06:10

I you are Kotlin lover, try below code to display Ad (In Adapter) in Grid Layout.

In your activity/fragment:

 binding.apply {
        val gridLayoutManager = GridLayoutManager(mContext, 3)
        gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() {
            override fun getSpanSize(position: Int): Int {
                if (::itemsAdapter.isInitialized) {
                    return if (itemsAdapter.currentList[position].itemName == "NativeAd") {
                        3
                    } else {
                        1
                    }
                }
                return 1
            }
        }
        itemsRecyclerView.layoutManager = gridLayoutManager
        if (::itemsAdapter.isInitialized) {
            itemsRecyclerView.adapter = itemsAdapter
            itemsAdapter.submitList(itemsList)
        }

    }

In Your Adapter Override below method

override fun getItemViewType(position: Int): Int {
    return when (getItem(position).itemName) {
        "NativeAd" -> {
            0
        }

        else -> 1
    }

}

Your onCreateViewHolder will coded like below

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    when (viewType) {
        0 -> {
            return AdHolder(
                RecyclerviewadsBinding.inflate(
                    LayoutInflater.from(parent.context),
                    parent,
                    false
                )
            )
        }

        else -> {
            return MainItemsAdapterViewHolder(
                MainItemsSmapleBinding.inflate(
                    LayoutInflater.from(parent.context),
                    parent,
                    false
                )
            )
        }
    }
}

And onBindViewHolder code is:

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    when (holder.itemViewType) {
        0 -> {
            (holder as AdHolder).loadNative()
        }

        else -> {
            (holder as MainItemsAdapterViewHolder).bindData(getItem(position))
        }
    }


}

Note: Make sure you have adjust Ad position in list(after how many items you want to show Ad, For any confusion you can ask for full code or any help

score 0 · Answer 3 · answered Feb 07 '19 at 07:42

0

You can set the Visibility of your AdView in onBindViewHolder() on the basis of position

answered Feb 07 '19 at 07:42

Kartika Vij

203
3
17

score 0 · Answer 4 · answered Jan 09 '23 at 09:34

I found my solution in this code.

final GridLayoutManager.SpanSizeLookup spl = gridLayoutManager.getSpanSizeLookup();
        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (!isAdPosition(position)) {
                    return spl.getSpanSize(position);
                }
                return mParam.gridLayoutManager.getSpanCount();
            }
        });

private boolean isAdPosition(int position) {
    return (position + 1) % (adItemInterval + 1) == 0;
}

Here, adItemInterval is position whare you put your ad.

How to add Admob Ad between Recyclerview GridLayout

4 Answers4