Banner ads provide a great way to add an additional revenue stream with minimal impact to the flow and usage of your app.

The MobileFuse SDK also supports delivery of expandable rich-media banner ads by default, which are more interactive and engaging than standard banner placements.

Prerequisites

Follow the initial integration guide: Integrate the MobileFuse SDK for Android
Ensure that you have a Banner Ad Placement ID to use.

Display a banner ad in your app

A banner ad is implemented into your app as a UI View - you therefore have two options for implementation - either you can adjust your applications layout XML to include a position for your banner ad, or you can programmatically create, add, and remove the banner ad view as needed.

Note: Ensure that you adjust the user interface of your app to account for the positioning of the banner. You should leave a margin between the displayed banner ad and your app UI to avoid potential mis-clicks on the ad creative.

Option 1. Create the banner ad in your layout XML

Option 2. Create the banner ad programatically

Option 1: Create a banner ad in your layout XML

1. In your Activity’s XML layout file, add a banner view:

<com.mobilefuse.sdk.MobileFuseBannerAd
    app:mobilefusePlacementId="[INSERT PLACEMENT ID HERE]"
    app:mobilefuseAdSize="BANNER_320x50"
    
    android:id="@+id/mf_banner_ad"
    android:layout_width="match_parent"
    android:layout_height="50dp"

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    />

Ensure that you replace <YOUR BANNER PLACEMENT ID> with a valid banner placement ID.

Note: Valid banner ad sizes are:

BANNER_320x50
BANNER_300x50
BANNER_300x250
BANNER_728x90

2. Once you have initialized the MobileFuse SDK, request that the banner ad is loaded into the view. A good place to do this is within the onInitSuccess callback, but you also may want to call it when sub-activities are created:

MobileFuseBannerAd banner = findViewById(R.id.mf_banner_ad);
banner.loadAd();

Option 2: Create the Banner Ad programmatically

Once the MobileFuse SDK has initialized, create the MobileFuseBannerAdinstance and add it to your activity’s view hierarchy:

String bannerPlacementId = "000000";
MobileFuseBannerAd banner = new MobileFuseBannerAd(this, bannerPlacementId, BannerAd.AdSize.BANNER_728x90);

ViewGroup bannerContainer = findViewById(R.id.adContainer);
bannerContainer.addView(banner);

banner.loadAd();

Listening for event callbacks

Optionally, you can create a BannerAdListener to receive events during the banner ad’s lifecycle.

banner.setListener(new MobileFuseBannerAd.Listener() {
    @Override
    public void onAdExpanded() {
        // Called when an 'expandable banner' placement is expanded to full-screen
    }

    @Override
    public void onAdCollapsed() {
        // Called when an 'expandable banner' placement is collapsed back from full-screen
    }

    @Override
    public void onAdLoaded() {
        // Called when a banner ad is successfully loaded
    }

    @Override
    public void onAdNotFilled() {
        // The ad server responded with no fill (no ad available)
    }

    @Override
    public void onAdRendered() {
        // The banner has been rendered and displayed to the user
    }

    @Override
    public void onAdClicked() {
        // Triggered when the user clicks on the banner ad
    }

    @Override
    public void onAdExpired() {
        // The banner ad has expired and a new ad should be loaded from the server
    }

    @Override
    public void onAdError(AdError adError) {
        // An error occured - examine the adError argument for further details
    }
});

Advanced: Configure Ad Rotation

Banner ads can be set to rotate on a pre-set time interval. This is useful to increase the number of banner impressions that will be shown to your users. By default banner ad rotation is disabled.

Example: Configure ad to refresh every 60 seconds:

banner.setAutorefreshEnabled(true);
banner.setAutorefreshInterval(60);

Example: Manually handle refreshing of the ad, for example you may want to fetch a new ad when a view is changed within your app:

// On view change:
banner.forceRefresh();

Advanced: Set the ad background color

When the ad creative doesn’t fill the entire view area - for example when the view spans the entire width of the screen - the ad will sometimes be centred within the view. You can configure the background color of the view behind the ad to match the style of your app - or you can set it to transparent. The default behaviour is for the view to be transparent.

Setting the background in XML Layout:

Simply set the android:background attribute in the MobileFuseBannerAd tag in your Layout XML. The MobileFuse SDK exposes some useful colors to your project, but you can also use any theme or values color.

<com.mobilefuse.sdk.MobileFuseBannerAd
    //...
    android:background="@color/mobilefuse_transparent"
    />

Also available: mobilefuse_black, mobilefuse_white and mobilefuse_default_banner_bg

Setting the background programmatically:

You can also set the background color of the banner view programmatically:

// Set to a specific argb color:
bannerAd.setBackgroundColor(0xFFFF0000);

// Use a resource color:
bannerAd.setBackgroundResource(R.color.purple_200);

// Use a drawable resource/image:
bannerAd.setBackgroundResource(R.drawable.example_drawable_resource);

// Advanced - retrieve app theme color:
TypedValue resolvedThemeColor = new TypedValue();
getTheme().resolveAttribute(R.attr.colorSecondary, resolvedThemeColor, true);
bannerAd.setBackgroundResource(resolvedThemeColor.resourceId);

Example Code

Java

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.mobilefuse.sdk.MobileFuseBannerAd
        android:id="@+id/mf_banner_ad"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:mobilefuseAdSize="BANNER_320x50"
        app:mobilefusePlacementId="418310"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.util.TypedValue;
import android.widget.Toast;

import com.mobilefuse.sdk.MobileFuse;
import com.mobilefuse.sdk.MobileFuseBannerAd;
import com.mobilefuse.sdk.SdkInitListener;
import com.mobilefuse.sdk.privacy.MobileFusePrivacyPreferences;

public class MainActivity extends Activity {
    final int publisherId = 0;
    final int appId = 0;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // Set up the user's privacy preferences before init:
        MobileFuse.setPrivacyPreferences(
                new MobileFusePrivacyPreferences.Builder()
                        .setSubjectToCoppa(false)
                        .setUsPrivacyConsentString("1YNN")
                        .build()
        );
    
        Activity activity = this;
        MobileFuse.init(activity, publisherId, appId, new SdkInitListener() {
            @Override
            public void onInitSuccess() {
                Toast.makeText(activity, "SDK Init Success", Toast.LENGTH_SHORT).show();
    
                // Load our banner ad instance:
                MobileFuseBannerAd bannerAd = findViewById(R.id.mf_banner_ad);
                bannerAd.loadAd();
                
                // Set up auto-refresh each minute:
                bannerAd.setAutorefreshEnabled(true);
                bannerAd.setAutorefreshInterval(60);
                
                // Set our background color to match the app theme:
                TypedValue resolvedThemeColor = new TypedValue();
                getTheme().resolveAttribute(R.attr.colorPrimary, resolvedThemeColor, true);
                bannerAd.setBackgroundResource(resolvedThemeColor.resourceId);
            }
            
            @Override
            public void onInitError() {
                Toast.makeText(activity, "SDK Init Failed", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Kotlin

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <com.mobilefuse.sdk.MobileFuseBannerAd
        android:id="@+id/mf_banner_ad"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:mobilefuseAdSize="BANNER_320x50"
        app:mobilefusePlacementId="418310"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

import android.app.Activity
import android.os.Bundle
import android.util.TypedValue
import android.widget.Toast
import com.mobilefuse.sdk.*
import com.mobilefuse.sdk.privacy.MobileFusePrivacyPreferences

class MainActivity : Activity() {
    private val publisherId = 0
    private val appId = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Set up the user's privacy preferences before init:
        MobileFuse.setPrivacyPreferences(
            MobileFusePrivacyPreferences.Builder()
                .setSubjectToCoppa(false)
                .setUsPrivacyConsentString("1YNN")
                .build()
        )

        val activity: Activity = this
        MobileFuse.init(activity, publisherId, appId, object : SdkInitListener {
            override fun onInitSuccess() {
                Toast.makeText(activity, "SDK Init Success", Toast.LENGTH_SHORT).show()

                // Load our banner ad instance:
                val bannerAd: MobileFuseBannerAd = findViewById(R.id.mf_banner_ad)
                bannerAd.loadAd()

                // Set up auto-refresh each minute:
                bannerAd.autorefreshEnabled = true
                bannerAd.setAutorefreshInterval(60)

                // Set our background color to match the app theme:
                val resolvedThemeColor = TypedValue()
                theme.resolveAttribute(R.attr.colorPrimary, resolvedThemeColor, true)
                bannerAd.setBackgroundResource(resolvedThemeColor.resourceId)
            }

            override fun onInitError() {
                Toast.makeText(activity, "SDK Init Failed", Toast.LENGTH_SHORT).show()
            }
        })
    }
}