Facebook Native Banner Ads Integration in Android App | Admob Alternative Ad network

Hi, Today I am going to show you How to integrate Facebook Native Banner Ads in Android App. In the last post, I have shown you how to integrate Facebook Banner Ads in Android App. Let's start.

First, add the below dependency in build.gradle(Module: App) for importing Facebook ads SDK.

Code:

implementation 'com.facebook.android:audience-network-sdk:5.8.0'

And then move to the activity_main.xml file, then paste the below layout code.

Code:

<com.facebook.ads.NativeAdLayout android:id="@+id/native_banner_ad_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" />

It will show your ad bottom of the screen if you want to show your ad Top of the screen you need to write android:layout_alignParentBottom="true". 

Then you have to create a new layout for your Native Banner Ad, named it native_banner_ad_layout.xml 

Then paste the below code in native_banner_ad_layout.xml file.

Code:

<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <RelativeLayout android:id="@+id/ad_choices_container" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="2dp" /> <TextView android:id="@+id/native_ad_sponsored_label" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:ellipsize="end" android:lines="1" android:padding="2dp" android:textColor="@android:color/darker_gray" android:textSize="12sp" /> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/white"> <com.facebook.ads.AdIconView android:id="@+id/native_icon_view" android:layout_width="50dp" android:layout_height="50dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:gravity="center" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical" android:paddingLeft="53dp" android:paddingRight="83dp"> <TextView android:id="@+id/native_ad_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="end" android:lines="1" android:textColor="@android:color/black" android:textSize="15sp" android:textStyle="bold" /> <TextView android:id="@+id/native_ad_social_context" android:layout_width="match_parent" android:layout_height="wrap_content" android:ellipsize="end" android:lines="1" android:textSize="12sp" /> </LinearLayout> <Button android:id="@+id/native_ad_call_to_action" android:layout_width="80dp" android:layout_height="50dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:background="#4286F4" android:gravity="center" android:paddingLeft="3dp" android:paddingRight="3dp" android:textColor="@android:color/white" android:textSize="12sp" android:visibility="gone" /> </RelativeLayout> </LinearLayout>

So the final full code will be in activity_main.xml file is as follows:

Code:

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" android:orientation="vertical"> <com.facebook.ads.NativeAdLayout android:id="@+id/native_banner_ad_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" /> </RelativeLayout>

Now move to the MainActivity.java file, first import the Facebook ads SDK write the following code.

Code:

import com.facebook.ads.*;

Then paste the below code above Oncreate.

Code:

private NativeAdLayout nativeAdLayout; private LinearLayout adView; private final String TAG = MainActivity.class.getSimpleName(); private NativeBannerAd nativeBannerAd;

Now initialize the Facebook SDK in Oncreate.

Code:

AudienceNetworkAds.initialize(this);

Then create NativeBannerAd object, set an AdListener, then retrieve the "Native Banner Ad's" properties and display it in onAdLoaded() method. It will display the ad once it is loaded successfully. After that call loadAd() after AdListener in your Activity as follows.

Code:

nativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID"); nativeBannerAd.setAdListener(new NativeAdListener() { @Override public void onMediaDownloaded(Ad ad) { // Native ad finished downloading all assets Log.e(TAG, "Native ad finished downloading all assets."); } @Override public void onError(Ad ad, AdError adError) { // Native ad failed to load Log.e(TAG, "Native ad failed to load: " + adError.getErrorMessage()); } @Override public void onAdLoaded(Ad ad) { // Native ad is loaded and ready to be displayed if (nativeBannerAd == null || nativeBannerAd != ad) { return; } // Inflate Native Banner Ad into Container inflateAd(nativeBannerAd); } @Override public void onAdClicked(Ad ad) { // Native ad clicked Log.d(TAG, "Native ad clicked!"); } @Override public void onLoggingImpression(Ad ad) { // Native ad impression Log.d(TAG, "Native ad impression logged!"); } }); // load the ad nativeBannerAd.loadAd();

Then paste the following code in your activity after Oncreate.

Code:

private void inflateAd(NativeBannerAd nativeBannerAd) { // Unregister last ad nativeBannerAd.unregisterView(); // Add the Ad view into the ad container. nativeAdLayout = findViewById(R.id.native_banner_ad_container); LayoutInflater inflater = LayoutInflater.from(MainActivity.this); // Inflate the Ad view. The layout referenced is the one you created in the last step. adView = (LinearLayout) inflater.inflate(R.layout.native_banner_ad_layout, nativeAdLayout, false); nativeAdLayout.addView(adView); // Add the AdChoices icon RelativeLayout adChoicesContainer = adView.findViewById(R.id.ad_choices_container); AdOptionsView adOptionsView = new AdOptionsView(MainActivity.this, nativeBannerAd, nativeAdLayout); adChoicesContainer.removeAllViews(); adChoicesContainer.addView(adOptionsView, 0); // Create native UI using the ad metadata. TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title); TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context); TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label); AdIconView nativeAdIconView = adView.findViewById(R.id.native_icon_view); Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action); // Set the Text. nativeAdCallToAction.setText(nativeBannerAd.getAdCallToAction()); nativeAdCallToAction.setVisibility( nativeBannerAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE); nativeAdTitle.setText(nativeBannerAd.getAdvertiserName()); nativeAdSocialContext.setText(nativeBannerAd.getAdSocialContext()); sponsoredLabel.setText(nativeBannerAd.getSponsoredTranslation()); // Register the Title and CTA button to listen for clicks. List<view> clickableViews = new ArrayList<>(); clickableViews.add(nativeAdTitle); clickableViews.add(nativeAdCallToAction); nativeBannerAd.registerViewForInteraction(adView, nativeAdIconView, clickableViews); }

So the final code will be in your java activity file is as follows:

Code:

package com.ss.myapplication; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.widget.Button; import android.widget.LinearLayout; import android.widget.RelativeLayout; import android.widget.TextView; import com.facebook.ads.*; import com.facebook.ads.AudienceNetworkAds; import com.facebook.ads.NativeAdLayout; import com.facebook.ads.NativeBannerAd; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private NativeAdLayout nativeAdLayout; private LinearLayout adView; private final String TAG = MainActivity.class.getSimpleName(); private NativeBannerAd nativeBannerAd; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); AudienceNetworkAds.initialize(this); nativeBannerAd = new NativeBannerAd(this, "327506298216046_327507491549260"); nativeBannerAd.setAdListener(new NativeAdListener() { @Override public void onMediaDownloaded(Ad ad) { // Native ad finished downloading all assets Log.e(TAG, "Native ad finished downloading all assets."); } @Override public void onError(Ad ad, AdError adError) { // Native ad failed to load Log.e(TAG, "Native ad failed to load: " + adError.getErrorMessage()); } @Override public void onAdLoaded(Ad ad) { // Native ad is loaded and ready to be displayed if (nativeBannerAd == null || nativeBannerAd != ad) { return; } // Inflate Native Banner Ad into Container inflateAd(nativeBannerAd); } @Override public void onAdClicked(Ad ad) { // Native ad clicked Log.d(TAG, "Native ad clicked!"); } @Override public void onLoggingImpression(Ad ad) { // Native ad impression Log.d(TAG, "Native ad impression logged!"); } }); // load the ad nativeBannerAd.loadAd(); } private void inflateAd(NativeBannerAd nativeBannerAd) { // Unregister last ad nativeBannerAd.unregisterView(); // Add the Ad view into the ad container. nativeAdLayout = findViewById(R.id.native_banner_ad_container); LayoutInflater inflater = LayoutInflater.from(MainActivity.this); // Inflate the Ad view. The layout referenced is the one you created in the last step. adView = (LinearLayout) inflater.inflate(R.layout.native_banner_ad_unit, nativeAdLayout, false); nativeAdLayout.addView(adView); // Add the AdChoices icon RelativeLayout adChoicesContainer = adView.findViewById(R.id.ad_choices_container); AdOptionsView adOptionsView = new AdOptionsView(MainActivity.this, nativeBannerAd, nativeAdLayout); adChoicesContainer.removeAllViews(); adChoicesContainer.addView(adOptionsView, 0); // Create native UI using the ad metadata. TextView nativeAdTitle = adView.findViewById(R.id.native_ad_title); TextView nativeAdSocialContext = adView.findViewById(R.id.native_ad_social_context); TextView sponsoredLabel = adView.findViewById(R.id.native_ad_sponsored_label); AdIconView nativeAdIconView = adView.findViewById(R.id.native_icon_view); Button nativeAdCallToAction = adView.findViewById(R.id.native_ad_call_to_action); // Set the Text. nativeAdCallToAction.setText(nativeBannerAd.getAdCallToAction()); nativeAdCallToAction.setVisibility( nativeBannerAd.hasCallToAction() ? View.VISIBLE : View.INVISIBLE); nativeAdTitle.setText(nativeBannerAd.getAdvertiserName()); nativeAdSocialContext.setText(nativeBannerAd.getAdSocialContext()); sponsoredLabel.setText(nativeBannerAd.getSponsoredTranslation()); // Register the Title and CTA button to listen for clicks. List<view> clickableViews = new ArrayList<>(); clickableViews.add(nativeAdTitle); clickableViews.add(nativeAdCallToAction); nativeBannerAd.registerViewForInteraction(adView, nativeAdIconView, clickableViews); } }

Now if you run your App you will see the Native Banner ad.

That's it. Thank you.