How to Integrate Facebook Audience Network (FAN) Banner Ads in Android?

In order to earn money from the Android app or game, there are many ways such as in-App Purchases, Sponsorship, Advertisements, and many more. But there is another popular method to earn money from the Android app is by integrating a third party advertisement e.g known as Facebook Audience Network (FAN). Facebook Audience Network is designed to help monetize with the user experience in mind. By using high-value formats, quality ads, and innovative publisher tools it helps to grow the business while keeping people engaged.

Why Facebook Audience Network?

• Facebook Audience Network is one of the best alternatives for Google Admob to monetize the Android or IOS App.
• Minimum Payout is $100
• Wide Range of Ad Formats
• Maximum Fill Rates
• High eCPM(Effective Cost Per Mille)
• Quality Ads
• Personalized Ads

Formats of Facebook Audience Network

There are mainly five types of flexible, high-performing format available in Facebook Audience Network

• Native: Ads that you design to fit the app, seamlessly
• Interstitial: Full-screen ads that capture attention and become part of the experience.
• Banner: Traditional formats in a variety of placements.
• Rewarded Video: An immersive, user-initiated video ad that rewards users for watching.
• Playables: A try-before-you-buy ad experience allowing users to preview a game before installing.

In this article let's integrate Facebook Audience Network Banner ads in the Android app. Banner ad is a rectangular image or text ad which occupies a small space in the app layout. Banner ad is easy to implement and it doesn't affect user interface and increases the revenue gradually.

Approach

Step 1: Creating a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that choose Java as language though we are going to implement this project in Java language.

Step 2: Before going to the coding section first do some pre-task

• Go to app -> res -> values -> colors.xml file and set the colors for the app.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#0F9D58</color>
    <color name="colorAccent">#05af9b</color>
</resources>

• Go to Gradle Scripts -> build.gradle (Module: app) section and import following dependencies and click the “sync now” on the above pop up.

 implementation 'com.facebook.android:audience-network-sdk:5.+'

• Go to app -> manifests -> AndroidManifests.xml section and allow "Internet Permission".

<uses-permission android:name="android.permission.INTERNET"/>

Step 3: Designing the UI 

In the activity_main.xml file, there are simply three Buttons is used. So whenever the user clicked on that button the desired Banner Ad will pop up. To contain the Banner Ad a LinearLayout is added inside the XML file. Here is the code for the activity_main.xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- Button to Show BANNER_50 Ad By Clicking it -->
    <Button
        android:id="@+id/banner_50"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="40dp"
        android:background="@color/colorPrimary"
        android:padding="16dp"
        android:text="Show  BANNER_50"
        android:textColor="#ffff"
        android:textSize="24dp" />

    <!-- Button to Show BANNER_90 Ad By Clicking it -->
    <Button
        android:id="@+id/banner_90"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/banner_50"
        android:layout_margin="40dp"
        android:background="@color/colorPrimary"
        android:padding="16dp"
        android:text="Show  BANNER_90"
        android:textColor="#ffff"
        android:textSize="24dp" />

    <!-- Button to Show RECTANGLE_HEIGHT_250 Ad By Clicking it -->
    <Button
        android:id="@+id/banner_250"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/banner_90"
        android:layout_margin="40dp"
        android:background="@color/colorPrimary"
        android:padding="16dp"
        android:text="Show  RECTANGLE_HEIGHT_250"
        android:textColor="#ffff"
        android:textSize="24dp" />

    <!-- LinearLayout to contain the Banner Ads -->
    <LinearLayout
        android:id="@+id/fb_banner_ad_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" />

</RelativeLayout>

Step 4: Working with MainActivity.java file

• Open the MainActivity.java file there within the class, first create the object of the Button class.

// Creating objects of Button class
Button fbBanner_50, fbBanner_90, fbBanner_250;

• Now inside the onCreate() method, link those objects with their respective IDs that is given in activity_main.xml file.

 // link those objects with their respective id's that we have given in activity_main.xml file 
fbBanner_50 = (Button)findViewById(R.id.banner_50);
fbBanner_90 = (Button)findViewById(R.id.banner_90);
fbBanner_250 = (Button)findViewById(R.id.banner_250);

• Now inside onCreate() method, initialize the Facebook Audience Network SDK

// initializing the Audience Network SDK
AudienceNetworkAds.initialize(this);

• Create a private void showBanner() method outside onCreate() method and define it.
• showBanner() method take AdSize as an Argument, to show banner with different Ad sizes

 private void showBanner(AdSize adSize)

{

       // creating object of AdView

       AdView bannerAd;

       // initializing AdView Object

       // AdView Constructor Takes 3 Arguments

       // 1)Context

       // 2)Placement Id

       // 3)AdSize

       bannerAd = new AdView(this, "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID",adSize);

       // Creating and initializing LinearLayout which contains the ads

      LinearLayout adLinearContainer = (LinearLayout) findViewById(R.id.fb_banner_ad_container);

      // removing the views inside linearLayout

      adLinearContainer.removeAllViewsInLayout();

      // adding ad to the linearLayoutContainer

      adLinearContainer.addView(bannerAd);

      // loading Ad

       bannerAd.loadAd();

}

Note: Replace "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID" with its own placement id to show real ads.

• So the next thing is to call the showBanner() method when a user clicks a respective banner ad button.
• Now in oncreate() method create a ClickListener for all the three buttons and call showBanner() with different AdSize.

       // click listener to show Banner_50 Ad

       fbBanner_50.setOnClickListener(new View.OnClickListener() {

           @Override

           public void onClick(View view) {

               showBanner(AdSize.BANNER_HEIGHT_50);

           }

       });

       // click listener to show Banner_90 Ad

       fbBanner_90.setOnClickListener(new View.OnClickListener() {

           @Override

           public void onClick(View view) {

               showBanner(AdSize.BANNER_HEIGHT_90);

           }

       });

       // click listener to show Banner_250 Ad

       fbBanner_250.setOnClickListener(new View.OnClickListener() {

           @Override

           public void onClick(View view) {

               showBanner(AdSize.RECTANGLE_HEIGHT_250);

           }

       });

• Now call setAdListener() for Banner Ad, so that users will know the status of the ads. To add  adListener open showBanner() method and add the below code before bannerAd.loadAd();

       // banner AdListener

       bannerAd.setAdListener(new AdListener() {

           @Override

           public void onError(Ad ad, AdError adError) {

               // Showing a toast message

               Toast.makeText(MainActivity.this, "onError", Toast.LENGTH_SHORT).show();

           }

           @Override

           public void onAdLoaded(Ad ad) {

               // Showing a toast message

               Toast.makeText(MainActivity.this, "onAdLoaded", Toast.LENGTH_SHORT).show();

           }

           @Override

           public void onAdClicked(Ad ad) {

               // Showing a toast message

               Toast.makeText(MainActivity.this, "onAdClicked", Toast.LENGTH_SHORT).show();

           }

           @Override

           public void onLoggingImpression(Ad ad) {

               // Showing a toast message

               Toast.makeText(MainActivity.this, "onLoggingImpression", Toast.LENGTH_SHORT).show();

           }

       });

• And inside AdListener Override methods to show a toast message so that users know the status of the ad. Below is the complete code for the MainActivity.java file.

package org.geeksforgeeks.project;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.facebook.ads.Ad;
import com.facebook.ads.AdError;
import com.facebook.ads.AdListener;
import com.facebook.ads.AdSize;
import com.facebook.ads.AdView;
import com.facebook.ads.AudienceNetworkAds;

public class MainActivity extends AppCompatActivity {

    Button fbBanner_50, fbBanner_90, fbBanner_250;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fbBanner_50 = findViewById(R.id.banner_50);
        fbBanner_90 = findViewById(R.id.banner_90);
        fbBanner_250 = findViewById(R.id.banner_250);

        AudienceNetworkAds.initialize(this);

        fbBanner_50.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showBanner(AdSize.BANNER_HEIGHT_50);
            }
        });

        fbBanner_90.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showBanner(AdSize.BANNER_HEIGHT_90);
            }
        });

        fbBanner_250.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showBanner(AdSize.RECTANGLE_HEIGHT_250);
            }
        });
    }

    private void showBanner(AdSize adSize) {
        AdView bannerAd = new AdView(this, "IMG_16_9_APP_INSTALL#YOUR_PLACEMENT_ID", adSize);
        LinearLayout adLinearContainer = findViewById(R.id.fb_banner_ad_container);
        adLinearContainer.removeAllViewsInLayout();
        adLinearContainer.addView(bannerAd);

        bannerAd.setAdListener(new AdListener() {
            @Override
            public void onError(Ad ad, AdError adError) {
                Toast.makeText(MainActivity.this, "onError", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAdLoaded(Ad ad) {
                Toast.makeText(MainActivity.this, "onAdLoaded", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAdClicked(Ad ad) {
                Toast.makeText(MainActivity.this, "onAdClicked", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onLoggingImpression(Ad ad) {
                Toast.makeText(MainActivity.this, "onLoggingImpression", Toast.LENGTH_SHORT).show();
            }
        });

        bannerAd.loadAd();
    }
}

Output: Run on Emulator