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.

FAN banner ad

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.

colors.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


  • 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.+’
 

<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.

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?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>

chevron_right


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.

MainActivity.java

filter_none

edit
close

play_arrow

link
brightness_4
code

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 {
  
    // Creating a objects of Button class
    Button fbBanner_50, fbBanner_90, fbBanner_250;
  
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // 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);
  
        // initializing the Audience Network SDK
        AudienceNetworkAds.initialize(this);
  
        // 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);
                }
            });
    }
  
    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);
  
        // 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();
            }
        });
  
        // loading Ad
        bannerAd.loadAd();
    }
}

chevron_right


Output: Run on Emulator


Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.