Banner Ads

Suggest Edits

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

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

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

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();

val banner: MobileFuseBannerAd = 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();

val bannerPlacementId = "000000"
val banner = MobileFuseBannerAd(this, bannerPlacementId, BannerAd.AdSize.BANNER_728x90)

val bannerContainer: ViewGroup = 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
    }
});

banner.setListener(object : MobileFuseBannerAd.Listener {
    override fun onAdExpanded() {
        // Called when an 'expandable banner' placement is expanded to full-screen
    }

    override fun onAdCollapsed() {
        // Called when an 'expandable banner' placement is collapsed back from full-screen
    }

    override fun onAdLoaded() {
        // Called when a banner ad is successfully loaded
    }

    override fun onAdNotFilled() {
        // The ad server responded with no fill (no ad available)
    }

    override fun onAdRendered() {
        // The banner has been rendered and displayed to the user
    }

    override fun onAdClicked() {
        // Triggered when the user clicks on the banner ad
    }

    override fun onAdExpired() {
        // The banner ad has expired and a new ad should be loaded from the server
    }

    override fun 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);

banner.autorefreshEnabled = 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();

// 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);

// 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:
val resolvedThemeColor = TypedValue()
getTheme().resolveAttribute(R.attr.colorSecondary, resolvedThemeColor, true)
bannerAd.setBackgroundResource(resolvedThemeColor.resourceId)

Example Code

Updated over 1 year ago