Android
Admob Native Express Ads in RecyclerView

Admob Native Express Ads in RecyclerView

Adding Ads to a mobile application is the main source of income for free mobile applications. And Admob is one of the most popular mobile advertising platforms. In this tutorial, we are going to implement Admob’s Native Ads Express (one of the Ad formats provided by Admob) to the RecyclerView in Android. We are using Native Ad format because it gives you the freedom to customize the way assets like headlines and calls to action are presented in your app. By choosing fonts, colors, and other details for yourself, you can create natural, unobtrusive Ad presentations that can add to a rich user experience and it will easily blend with the other items in your RecyclerView.




 

Pre-Requisites:

1. You should have an Admob Account. If you have not already, create an Admob Account.

2. You must have registered your App in your Admob Account. If you have not, then register your App.

 

STEP 1:Integrate the Mobile Ads SDK

If you are not using Firebase in your project, then follow point 1-(a) otherwise, follow point 1-(b).

1-(a).

Add the Google’s Maven Repository to app’s project-level build.gradle file under allprojects section, if you have not already. The excerpt is given below.

allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

Now, add the below-given dependency to app-level build.gradle file.

compile 'com.google.android.gms:play-services-ads:11.2.0'

1-(b).

If you are using Firebase in your project, then just add the below-given dependency to app-level build.gradle file.

compile 'com.google.firebase:firebase-ads:11.4.0'

2. Now you need to initialize the Mobile Ads SDK by calling MobileAds.initialize() with your AdMob App ID. This only needs to be done once, ideally at app launch. You can find your app’s App ID in the AdMob UI. If you have an Application Class in your App, then initialize the SDK there, otherwise, initialize it inside the Main Activity of your app.

// Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713
MobileAds.initialize(this, "YOUR_ADMOB_APP_ID");

Replace YOUR_ADMOB_APP_ID with your Admob App ID.  If you’re just looking to experiment with the SDK in your app, though, you can use the App ID given in the code.

 

STEP 2:Define Layouts

Now we will define the layout for our activity which contains RecyclerView. We will also define layouts for the holders of a data item and an Ad unit inside RecyclerView. Copy the codes given below in their respective layout files.

NOTE:

1. I have defined the above layout files with minimum elements and properties so that this tutorial can be easily understood. You must alter the above layout files with your specific requirements except, the card_native_express_ad_container.xml file.

2. I have used CardView in layout files. If you also want to use CardView then add the following dependency in app-level build.gradle file.

compile 'com.android.support:cardview-v7:26.0.1' 

 

STEP 3:Define POJO Class for Data Item

Here POJO stands for Plain Old Java Object. Here I am defining a model class that will contain the data for each item in data list apart from Ad Unit. My data list contains State’s (States of a Country) information. So I have defined a POJO class for State. You should define POJO class according to your requirements.

 

STEP 4:Define Adapter Class for RecyclerView

Now we will define the Adapter Class for the RecyclerView. An adapter is used to attach a data list to a view (if you don’t know already). This adapter class will define two ViewHolders, for the data item and the Ad unit respectively. 

This adapter also contains the logic to return the view based on whether the item in the dataset is an ad unit or not. Copy the code given below in its respective file.

Now, the main logic for showing Ad Units in RecyclerView lies in the getItemViewType() method. Inside this method, we are returning the view type based on the variable spaceBetweenAds. For every position that comes after a spaceBetweenAds number of data items, we return Ad View Type otherwise Data Item View Type.

Inside the methods, onCreateViewHolder() and onBindViewHolder(), we check the view type and based on the view type we create the View Holder and bind the data to View Holder respectively.

We have defined two View Holders in above Adapter class each for Data View Type and Native Express Ad View Type.

 

STEP 5:Define Activity Class

Now we will define our Activity class where we will instantiate our views. Then we will create our data items list and add Native Express Ad units to that list. And then instantiate our Adapter with required parameters and attach to our RecyclerView. Copy the code below in your Activity class with required changes.

I have added more than enough comments in below code so that you can easily understand. I have also explained some points after the code.




Some Important Points:

1. First of all, in above code, we are calling loadData() method. This method loads data into mDataSet ArrayList.  You must write your own code inside this method, to show items specific to your App. Then after loading data, we are calling method addNativeExpressAds() to insert Ad Units in our Data List. After addNativeExpressAds() method completes its execution, we instantiate the Adapter and attach to our RecyclerView.

2. Inside addNativeExpressAds(), first of all, we iterate through mDataSet ArrayList and insert Native Express Ad units at consecutive places at a distance defined by spaceBetweeenAds variable. I have set it to 10, you should change it as you need. After that we again iterate through mDataset, to resize the Ad units equal to screen width, but this time it happens after RecyclerView Creation is completed.

I have used a Test ID provided by Admob, in above method to create Ad Units. You must change it yours Ad Unit ID that you can get through Admob Console. Also if you are experimenting then you should take a look at Sample Ad Units provided by Google Admob.

Native Ads Express offers several template sizes (chosen when creating an ad unit), each with a range of height and width values in device-independent pixels (dp). You should also take a look at it.

3. In the end of addNativeExpressAds() method, I have called a method loadNativeExpressAd(spaceBetweenAds). This method loads ads one after the other, thus improving user experience and efficiently using the bandwidth.

4. The last important point from above code is to Set your device as Test Device. If you are using Sample Ad Units, then it is not required but if you are using your own Ad unit then you must.

 


Now, we have gone through each and every aspect to start using Admob’s Native Express Ads in RecyclerView. You must tweak above code as per your requirements and you are ready to go.

If you face any problem, you can always leave a comment or message me through the Chat Option given in bottom right corner of the window.

Share this Story

Related Posts

3 Comments

  1. Bhaumik Mistry

    June 20, 2019 at 11:15 am

    Thank You

    Reply

  2. Mukund Pradhan

    October 8, 2019 at 3:24 am

    I am facing Class cast exception for the RecyclerViewAdapter on Bind method for nativeExpressAdview display. Can you please help me?

    Reply

    • SVB

      October 8, 2019 at 7:11 am

      Hi Mukund,

      If you are getting a class cast exception in the Bind method for the nativeExpressAdview, it means the item at that position in the dataset is not of type nativeExpressAdview. Just check your logic for getItemViewType() and position of ads in your dataset. If you still face the problem, just send me your code for RecyclerViewAdapter.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

About Me


I'm a college student pursuing B.tech. I created this website (Blog) to share my learnings with the people who search for the same content/knowledge.