How to Integrate Firebase Native Advanced Ads on Android using Kotlin Tutorial

What are Firebase Native Ads Advanced in Google admob ?

AdMob Native Advanced Ads allows you to create customized promotions that matches your application theme.

AdMob Native Advanced Ads SDK send the advertisement segments specifically to your application, and you render them in your local application code, conveying an awesome user experience.

Developer have freedom to display Native Advanced Ads in Application according to their Application theme, required Ad format.

Unlike old styled Admob Banner Ads you have to design XML layout files for Ads to be displayed in your application.

So you can fully customize Native Advanced Ads in terms of fonts, color, ad format, action buttons according to your Application theme due to which ads closely resemble a natural piece of the application.

Say you need an ad format which fits naturally with your application content with AdMob Native Ads you can design CSS templates (XML layout files in case of Android) specifically for better user experience of your app.

firebase advance native Ad
AdMob Native Firebase Ads

For example if you want to show text Ads in your application you can only display Ads in TextView in Android and if you want to show only image ad you can show Ads in ImageView or you can add native buttons to ads to be shown in your Android Application.

This means that when you request Advanced Native Ads from Admob you get object of type NativeAd which contains assets for the Ad and than your application is responsible to display Ad in your desired format.

Advanced Native Ads
Firebase Advanced Native Ad in RecyclerView

In above screen shot we are displaying Advanced Native Ads in RecyclerView feed in Android using Admob Native Ads Sdk.

  1. As of today 15 Dec 2017 you cannot create ad unit ids for Advanced Native Ads in Google AdMob because they are in beta version and only available to selected publishers.
  2. Must Read Comments in Code for bettter understanding.
  3. AdMob includes Firebase SDK and you can link AdMob with your Firebase account to take advantage of free unlimited Firebase analytics.

What you will build in this Tutorial ?

  • You will develop an Application which will load and display images from camera folder in RecyclerView and display Ads along with images.
  • You will learn how to Integrate Firebase Advanced Native Ads in Android Application.
  • How to load and display Advanced Native Ads using AdMob.
  • How to customize Advanced Native Ads in Android.
  • How to Pre load Ads for RecyclerView feed.
  • Display Native Advanced Ads in RecyclerView item list.

How to setup Firebase Native Ads Advanced

  • I assume you have Advanced Native Ads unit id at Admob.
  • Created project at Firebase and completed Firebase setup in Android Studio.

We will be using Kotlin Programming language in this Tutorial. if you are familiar with basic syntax of Kotlin than you can easily covert this into Java if you want to do so.

Top level build.gradle file include google services plugin.
buildscript {
    ext.kotlin_version = '1.1.3-2'
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
        classpath 'com.google.gms:google-services:3.0.0'
    }
}
Add Firebase Ads SDK in module level build.gradle file
dependencies {
    //Firebase Ads Dependency
    compile 'com.google.firebase:firebase-ads:10.2.1'
}
// place this at the bottom of the file.
apply plugin: 'com.google.gms.google-services'
Initialize Firebase Ads SDK

We need AdMob application ID and AdMob Ad Unit ID for initializing SDK for displaying Ads in our application.

Create these ID’s from AdMob admin console and place in your application for

First of all insert Admob Ad Id and ApplicationId in strings.xml

<string name="admob_app_id">ca-app-pub-3940256099942544~3347511713</string>
<string name="ad_unit_id">ca-app-pub-3940256099942544/8135179316</string>
Create new Activity which will show Native Ads in Android RecyclerView
activity_main.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.Toolbar
        android:id="@+id/my_album_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        app:titleTextColor="@color/colorIcons" />


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvAlbumSelected"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?attr/actionBarSize"
        android:clipToPadding="false" />

</android.support.design.widget.CoordinatorLayout>
MainActivity.kt
// we will be showing total 5 ads in our RecyclerView.

val NUMBER_OF_ADS = 5

 
private val mRecyclerViewItems = ArrayList<Any>()

// once we load NativeAd from Admob.
// we will add NativeAd in ArrayList.
private val mNativeAds = ArrayList<NativeAd>()

// SingleAlbumAdapter class will be our RecyclerView Adapter.
var adapter: SingleAlbumAdapter? = null

override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_album)
 
 // Initialize the Mobile Ads SDK.
 MobileAds.initialize(this, getString(R.string.admob_app_id))
 
 init_ui_views("camera", false)

}
 Here we will setup RecylcerView, load Ads from Admob, Initialize Glide for images.

For populating RecyclerView I am loading images from camera folder on device. and showing Ads along with images.

You can implement your adapter accordingly, You will have to change only ViewHolder class for your own adapter, rest of the code (Native Ads related code) is same.

private fun init_ui_views(folderName: String?, isVideo: Boolean?) {

    val options = RequestOptions()
            .diskCacheStrategy(DiskCacheStrategy.RESOURCE).override(160, 160).skipMemoryCache(true).error(R.drawable.ic_image_unavailable)
    val glide = Glide.with(this)
    val builder = glide.asBitmap()

    rvAlbumSelected?.setHasFixedSize(true)
    adapter = SingleAlbumAdapter(mRecyclerViewItems, getAllShownImagesPath(this, folderName, isVideo), this, options, builder, glide, this)
    rvAlbumSelected?.adapter = adapter

    // Note i am loading Ads after populating RecyclerView.
    //  After application loads Ads we will call notifydatasetChnaged()
    // and ads will be displayed in RecylclerView.
     loadNativeAd()
    )

Loading images from camera directory
private fun getAllShownImagesPath(activity: Activity, folderName: String?, isVideo: Boolean?): MutableList<String> {

    val uri: Uri
    val cursorBucket: Cursor
    val column_index_data: Int
    val listOfAllImages = ArrayList<String>()
    var absolutePathOfImage: String? = null

    val selectionArgs = arrayOf("%" + folderName + "%")

    uri = android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI
    val selection = MediaStore.Images.Media.DATA + " like ? "

    val projectionOnlyBucket = arrayOf(MediaStore.MediaColumns.DATA, MediaStore.Images.Media.BUCKET_DISPLAY_NAME)

    cursorBucket = activity.contentResolver.query(uri, projectionOnlyBucket, selection, selectionArgs, null)

    column_index_data = cursorBucket.getColumnIndexOrThrow(MediaStore.MediaColumns.DATA)

    while (cursorBucket.moveToNext()) {
        absolutePathOfImage = cursorBucket.getString(column_index_data)
        if (absolutePathOfImage != "" && absolutePathOfImage != null) {
            listOfAllImages.add(absolutePathOfImage)
            mRecyclerViewItems.add(absolutePathOfImage)
        }
    }
    return listOfAllImages.asReversed()
}

First time we will call loadNativeAd function with 0 value. Every time we get new NativeAd object from Admob we will increment this value and when we reach 5 we will update our RecyclerView Adapter and will display Ads in our RecyclerView.

private fun loadNativeAd() {
    loadNativeAd(0)
}
Loading Native Content Ads and Native App Install Ads

There are two types of Ads format one is Content Ads and the other is Native App Install Ads.

In code below we are using AdBuilder class to load both types of Ads.

Native App Install Ads are represented by object of type NativeAppInstallAd  and Content Ads are represented by NativeContentAd.

When their respective Ad type is loaded call back method is called and we can get our Native Ad assets from their objects.

Since I wanted to display Native Ad 5 times in RecyclerView so we will keep loading Ads until we reach 5.

And after that we will populate Ads in RecyclerView.

private fun loadNativeAd(adLoadCount: Int) {

    if (adLoadCount >= NUMBER_OF_ADS) {
       
        // This method will insert Ads in list
        // which is used to populate RecyclerView items.
        insertAdsInRecyclerViewItems()

        // Here after 5 Native Ads are loaded we will display them in adapter.
        // Find below source code of our RecyclerView Adapter.
        rvAlbumSelected.adapter.notifyDataSetChanged()
        return
    }

    val builder = AdLoader.Builder(this, getString(R.string.ad_unit_id))
    val adLoader = builder.forAppInstallAd { ad ->
        // An app install ad loaded successfully, call this method again to
        // load the next ad.
        mNativeAds.add(ad)
        loadNativeAd(adLoadCount + 1)
    }.forContentAd { ad ->
        // A content ad loaded successfully, call this method again to
        // load the next ad.
        mNativeAds.add(ad)
        loadNativeAd(adLoadCount + 1)
    }.withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(errorCode: Int) {
            // A native ad failed to load. Call this method again to load
            // the next ad in the items list.
            Log.e("AlbumsActivity", "The previous native ad failed to load. Attempting to" + " load another.")
            loadNativeAd(adLoadCount + 1)
        }
    }).build()

    // Load the Native Express ad.
    adLoader.loadAd(AdRequest.Builder().build())
}

Insert Admob Native Ads at random indexes of RecyclerView items list.

private fun insertAdsInRecyclerViewItems() {
    if (mNativeAds.size <= 0) {
        return
    }
    val offset = mRecyclerViewItems.size / mNativeAds.size + 1
    var index = 0
    for (ad in mNativeAds) {
        mRecyclerViewItems.add(index, ad)
        index = index + offset
    }
}

We are done with

  1. Initializing Firebase Ads SDK.
  2.  Pre loading Native Ads Advanced.
  3.  Insert Native Ads Advanced in RecyclerView.
  4.  Update RecyclerView adapter on completion of Ads loading.

Now we will

  • Create layout files for Native Ads.
  • Write code for our RecyclerView Adapter.
  • Define different ViewTypes for Native Ads and our images list in RecyclerView.
  • Populate Content AdView and AppInstall AdView in RecyclerView Adapter.
Create 2 new Layout files for Native Ads (ad_app_install.xml & add_content.xml)
// add_content.xml

<com.google.android.gms.ads.formats.NativeContentAdView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="170dp"
    android:layout_height="170dp"
    android:background="#FFFFFF"
    android:minHeight="50dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/contentad_headline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:textColor="#0000FF"
            android:textSize="24sp"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="16dp"
            android:orientation="horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.35"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/contentad_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="8dp"
                    android:adjustViewBounds="true"
                    android:maxHeight="100dp" />

                <TextView
                    android:id="@+id/contentad_call_to_action"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="8dp"
                    android:textColor="#0000FF"
                    android:textSize="16sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.5"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/contentad_body"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textSize="16sp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_gravity="right"
                    android:layout_marginTop="16dp"
                    android:gravity="bottom"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/contentad_advertiser"
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:gravity="bottom"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <ImageView
                        android:id="@+id/contentad_logo"
                        android:layout_width="25dp"
                        android:layout_height="25dp"
                        android:layout_marginRight="8dp"
                        android:gravity="bottom" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</com.google.android.gms.ads.formats.NativeContentAdView>
// ad_app_install.xml

<com.google.android.gms.ads.formats.NativeAppInstallAdView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="170dp"
    android:layout_height="170dp">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#FFFFFF"
        android:minHeight="50dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="3dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/appinstall_app_icon"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:adjustViewBounds="true"
                    android:paddingBottom="5dp" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:id="@+id/appinstall_headline"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textSize="14sp"
                        android:textStyle="bold" />

                    <RatingBar
                        android:id="@+id/appinstall_stars"
                        style="?android:attr/ratingBarStyleSmall"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:isIndicator="true"
                        android:numStars="5"
                        android:stepSize="0.5" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/appinstall_body"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="20dp"
                    android:layout_marginRight="20dp"
                    android:textSize="12sp" />

                <ImageView
                    android:id="@+id/appinstall_image"
                    android:layout_width="250dp"
                    android:layout_height="175dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp" />

                <com.google.android.gms.ads.formats.MediaView
                    android:id="@+id/appinstall_media"
                    android:layout_width="250dp"
                    android:layout_height="175dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="end"
                    android:orientation="horizontal"
                    android:paddingBottom="10dp"
                    android:paddingTop="10dp">

                    <TextView
                        android:id="@+id/appinstall_price"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingEnd="5dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingStart="5dp"
                        android:textSize="12sp" />

                    <TextView
                        android:id="@+id/appinstall_store"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingEnd="5dp"
                        android:paddingLeft="5dp"
                        android:paddingRight="5dp"
                        android:paddingStart="5dp"
                        android:textSize="12sp" />

                    <Button
                        android:id="@+id/appinstall_call_to_action"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:textSize="12sp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</com.google.android.gms.ads.formats.NativeAppInstallAdView>
Create layout file for RecyclerView Item

This layout file will be used for our own ViewType.

 // list_single_album_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="@dimen/five_dp"
        android:elevation="3dp"
        card_view:cardCornerRadius="@dimen/zero_dp">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="?attr/selectableItemBackgroundBorderless">

            <ImageView
                android:id="@+id/thumbnail_single"
                android:layout_width="@dimen/album_cover_height"
                android:layout_height="@dimen/album_cover_height"
                android:scaleType="centerCrop" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>
Define ViewHolder Classes

we will define two ViewHolder classes in our project. one to hold views of type Native Content Ads and one for Native Install Ads.

// NativeAppInstallAdViewHolder.kt

class NativeAppInstallAdViewHolder internal constructor(view: View) : RecyclerView.ViewHolder(view) {
    init {
        val adView = view as NativeAppInstallAdView
        // Register the view used for each individual asset.
        // The MediaView will display a video asset if one is present in the ad, and the
        // first image asset otherwise.
        val mediaView = adView.appinstall_media as MediaView
        adView.mediaView = mediaView
        adView.headlineView = adView.findViewById(R.id.appinstall_headline)
        adView.bodyView = adView.findViewById(R.id.appinstall_body)
        adView.callToActionView = adView.findViewById(R.id.appinstall_call_to_action)
        adView.iconView = adView.findViewById(R.id.appinstall_app_icon)
        adView.priceView = adView.findViewById(R.id.appinstall_price)
        adView.starRatingView = adView.findViewById(R.id.appinstall_stars)
        adView.storeView = adView.findViewById(R.id.appinstall_store)
    }
}

For Content Ads we will create separate ViewHolder class.

class NativeContentAdViewHolder internal constructor(view: View) : RecyclerView.ViewHolder(view) {
    init {
        val adView = view as NativeContentAdView
        // Register the view used for each individual asset.
        adView.headlineView = adView.findViewById(R.id.contentad_headline)
        adView.imageView = adView.findViewById(R.id.contentad_image)
        adView.bodyView = adView.findViewById(R.id.contentad_body)
        adView.callToActionView = adView.findViewById(R.id.contentad_call_to_action)
        adView.logoView = adView.findViewById(R.id.contentad_logo)
        adView.advertiserView = adView.findViewById(R.id.contentad_advertiser)
    }
}
Setup RecyclerView Adapter

Now create a new class SingleAlbumAdapter.kt

Define ViewTypes for RecyclerView Adapter

We need to define three types of Views in our RecyclerViewAdapter class.

One for our own items, one for Native Content Ad and one for Native App Install Ad.

// declare these variables in SingleAlbumAdapter class

private val PHOTO_ITEM_VIEW_TYPE = 0
private val NATIVE_APP_INSTALL_AD_VIEW_TYPE = 1
private val NATIVE_CONTENT_AD_VIEW_TYPE = 2
Determine ViewTypes for RecyclerView Adapter

override getItemViewType function in adapter class. which will check if item at a position is of type NativeAd, it will retun AD_VIEW_TYPE otherwise it will return PHOTO_ITEM_VIEW_TYPE.

override fun getItemViewType(position: Int): Int {
    val recyclerViewItem = mRecyclerViewItems[position]
    if (recyclerViewItem is NativeAppInstallAd) {
        return NATIVE_APP_INSTALL_AD_VIEW_TYPE
    } else if (recyclerViewItem is NativeContentAd) {
        return NATIVE_CONTENT_AD_VIEW_TYPE
    }
    return PHOTO_ITEM_VIEW_TYPE
}

also implement override function getItemCount().

override fun getItemCount(): Int {
    return mRecyclerViewItems.size
}
Update RecyclerView adapter onCreateViewHandler method

onCreateViewHolder will return RecyclerView.ViewHolder object based on ViewType.

We have already created ViewHolder layout files and classes.

when statement is equivalent to switch in Java.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
    
when (viewType) {
        NATIVE_APP_INSTALL_AD_VIEW_TYPE -> {
            val nativeAppInstallLayoutView = LayoutInflater.from(
                    parent.context).inflate(R.layout.ad_app_install,
                    parent, false)
            return NativeAppInstallAdViewHolder(nativeAppInstallLayoutView)
        }
        NATIVE_CONTENT_AD_VIEW_TYPE -> {
            val nativeContentLayoutView = LayoutInflater.from(
                    parent.context).inflate(R.layout.ad_content,
                    parent, false)
            return NativeContentAdViewHolder(nativeContentLayoutView)
        }
        PHOTO_ITEM_VIEW_TYPE -> {
            val menuItemLayoutView = LayoutInflater.from(parent.context).inflate(
                    R.layout.list_single_album_layout, parent, false)
            return ViewHolderPhotoItem(menuItemLayoutView)
        }
        else -> {
            val menuItemLayoutView = LayoutInflater.from(parent.context).inflate(R.layout.list_single_album_layout, parent, false)
            return ViewHolderPhotoItem(menuItemLayoutView)
        }
    }
}
Populate Native Ads assets in views

Add below functions in RecyclerView adapter class.

Function populateContentAdView will receive an object of type NativeContentAdView NativeContentAd.

It will bind Native Content Ad with Native Content AdView.

private fun populateContentAdView(nativeContentAd: NativeContentAd,
                                  adView: NativeContentAdView) {
    // Some assets are guaranteed to be in every NativeContentAd.
    (adView.headlineView as TextView).text = nativeContentAd.headline
    (adView.bodyView as TextView).text = nativeContentAd.body
    (adView.callToActionView as TextView).text = nativeContentAd.callToAction
    (adView.advertiserView as TextView).text = nativeContentAd.advertiser

    val images = nativeContentAd.images

    if (images.size > 0) {
        (adView.imageView as ImageView).setImageDrawable(images[0].drawable)
    }
    // Some aren't guaranteed, however, and should be checked.
    val logoImage = nativeContentAd.logo

    if (logoImage == null) {
        adView.logoView.visibility = View.INVISIBLE
    } else {
        (adView.logoView as ImageView).setImageDrawable(logoImage.drawable)
        adView.logoView.visibility = View.VISIBLE
    }

    // Assign native ad object to the native view.
    adView.setNativeAd(nativeContentAd)
}
Populate Install Ad View

Function populateAppInstallAdView will receive an object of type NativeAppInstallAdView & NativeAppInstallAd.

It will bind Native Install Ad object with Native Install AdView.

private fun populateAppInstallAdView(nativeAppInstallAd: NativeAppInstallAd,
                                     adView: NativeAppInstallAdView) {
    // Some assets are guaranteed to be in every NativeAppInstallAd.
    (adView.iconView as ImageView).setImageDrawable(nativeAppInstallAd.icon
            .drawable)
    (adView.headlineView as TextView).text = nativeAppInstallAd.headline
    (adView.bodyView as TextView).text = nativeAppInstallAd.body
    (adView.callToActionView as Button).text = nativeAppInstallAd.callToAction

    // These assets aren't guaranteed to be in every NativeAppInstallAd, so it's important to
    // check before trying to display them.
    if (nativeAppInstallAd.price == null) {
        adView.priceView.visibility = View.INVISIBLE
    } else {
        adView.priceView.visibility = View.VISIBLE
        (adView.priceView as TextView).text = nativeAppInstallAd.price
    }

    if (nativeAppInstallAd.store == null) {
        adView.storeView.visibility = View.INVISIBLE
    } else {
        adView.storeView.visibility = View.VISIBLE
        (adView.storeView as TextView).text = nativeAppInstallAd.store
    }
    if (nativeAppInstallAd.starRating == null) {
        adView.starRatingView.visibility = View.INVISIBLE
    } else {
        (adView.starRatingView as RatingBar).rating = nativeAppInstallAd.starRating!!.toFloat()
        adView.starRatingView.visibility = View.VISIBLE
    }

    // Assign native ad object to the native view.
    adView.setNativeAd(nativeAppInstallAd)
}
Update RecyclerView adapter onBindViewHolder method
override fun onBindViewHolder(holder: RecyclerView.ViewHolder?, position: Int) {
//        holder?.bindItems(albumList.get(position), glide, options, inOnItemClick)
        val viewType = getItemViewType(position)
        when (viewType) {
            NATIVE_APP_INSTALL_AD_VIEW_TYPE -> {
                val appInstallAd = mRecyclerViewItems[position] as NativeAppInstallAd
                populateAppInstallAdView(appInstallAd, holder?.itemView as NativeAppInstallAdView)
            }
            NATIVE_CONTENT_AD_VIEW_TYPE -> {
                val contentAd = mRecyclerViewItems[position] as NativeContentAd
                populateContentAdView(contentAd, holder?.itemView as NativeContentAdView)
            }
            PHOTO_ITEM_VIEW_TYPE -> {
                val menuItemHolder = holder as ViewHolderPhotoItem
                val menuItem = mRecyclerViewItems[position] as String
                glide.load(menuItem).apply { options }.thumbnail(0.4f)
                        .into(holder.itemView.thumbnail_single)

                holder.itemView.setOnClickListener(object : View.OnClickListener {
                    override fun onClick(p0: View?) {
                        inOnItemClick.onItemClick(menuItem, false)
                    }
                })
            }
            else -> {
                val listItemHolder = holder as ViewHolderPhotoItem
                val listItem = mRecyclerViewItems[position]

                glide.load(listItem).apply { options }.thumbnail(0.4f)
                        .into(holder.itemView.thumbnail_single)

                holder.itemView.setOnClickListener(object : View.OnClickListener {
                    override fun onClick(p0: View?) {
                        inOnItemClick.onItemClick(position.toString(), false)
                    }
                })
            }
        }
    }

Define ViewHolder class for your own view

inner class ViewHolderPhotoItem(itemView: View) : RecyclerView.ViewHolder(itemView) {
    private val menuItemImage: ImageView
    init {
        menuItemImage = itemView.thumbnail_single as ImageView
    }
}

Conclusion:- 

We have learned about Native Ads Advanced in Firebase and How to display Native Ads advanced in your Android Application.

We have learned how to implement multiple ViewTypes for RecyclerView items in Kotlin.

Recommended Article

How to develop android image gallery app in Kotlin tutorial with complete source code

5 thoughts on “How to Integrate Firebase Native Advanced Ads on Android using Kotlin Tutorial”

    1. Yes as mentioned in our article, Android Advanced Native Ads are currently in beta version and not available for all publishers(developers at play store).
      soon there will be option for creating AdMob Ad id’s for Native Advanced Ads.

Leave a Reply

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