Banner Ads

Banner ads usually appear at the top or bottom of your app’s screen. Adding one to your app takes just a few lines of code.

Prerequisites

Before integrating banner ads in your app:

  1. Go through the steps in our Getting Started Guide to create an account on MoPub and integrate the SDK into your project. For banner ads, it is essential that you added the necessary Activities to your AndroidManifest.xml file as instructed:

    <activity android:name="com.mopub.common.MoPubBrowser" 
              android:configChanges="keyboardHidden|orientation|screenSize" />
    
  2. Create an ad unit in the Publisher UI (refer here) for instructions. You will need that ad unit’s ID.

Important: Publisher-provided overlays (such as close buttons) located with the ad placement and subsequently covering the ad creative are against policy and should not be used. If you have quesitons please reach out to your account team or support@mopub.com.

Loading Banner Ads in Your App

To be safe, check your AndroidManifest.xml file again to make sure you included the necessary custom Activities discussed in the Prerequisites section.

After that, loading banner ads is a two-step process:

  1. Define a slot for your banner ad in your XML layout.

  2. Load the ad into the banner slot.

Step 1. Define a Slot for Your Banner Ad in Your XML Layout

The MoPub SDK provides a custom View subclass, MoPubView, which handles requesting and loading ads.

Start by including this XML block to your Activity’s or Fragment’s layout. The expected dimensions for a banner ad are screen width and 50dp high; these should not be modified.

<com.mopub.mobileads.MoPubView
    android:id="@+id/adview"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
/>

Step 2. Load an Ad Into the Banner Slot

Next, in your Activity or Fragment code, declare an instance variable for your MoPubView:

private MoPubView moPubView;

You should already have created an ad unit on MoPub’s site and received an Ad Unit ID. You’ll use it now to identify that ad unit in your app and request ads from MoPub that are relevant for your users.

In your Activity’s onCreate() or your Fragment’s onCreateView() method, set your MoPubView’s Ad Unit ID, then simply call loadAd() to fetch and display the ad:

...
moPubView = (MoPubView) findViewById(R.id.adview);
moPubView.setAdUnitId("xxxxxxxxxxx"); // Enter your Ad Unit ID from www.mopub.com
moPubView.loadAd();
...

When the hosting Activity or Fragment is destroyed, be sure to also destroy the MoPubView by calling:

    moPubView.destroy();

Sample Code

For a complete example, check out the mopub-sample.

Using the Listener Interface

MoPubView provides a listener interface, BannerAdListener, which you can use to stay informed about ad lifecycle events. BannerAdListener includes the following methods:

// Sent when the banner has successfully retrieved an ad.
public void onBannerLoaded(MoPubView banner);

// Sent when the banner has failed to retrieve an ad. You can use the MoPubErrorCode value to diagnose the cause of failure.
public void onBannerFailed(MoPubView banner, MoPubErrorCode errorCode);

// Sent when the user has tapped on the banner.
public void onBannerClicked(MoPubView banner);

// Sent when the banner has just taken over the screen.
public void onBannerExpanded(MoPubView banner);

// Sent when an expanded banner has collapsed back to its original size.
public void onBannerCollapsed(MoPubView banner);

To listen for events, you’ll need to implement the listener interface:

public class ExampleActivity extends Activity implements BannerAdListener {
  @Override
  public void onBannerLoaded(MoPubView banner) {
    Toast.makeText(getApplicationContext(),
      "Banner successfully loaded.", Toast.LENGTH_SHORT).show();
  }

  // ... other BannerAdListener methods ...
}

and pass your Activity to the MoPubView as it’s being created (see Step 3, above):

moPubView.setBannerAdListener(this);

Refreshing Ads

The MoPubView will automatically refresh your ad unit at a time interval that you set using the MoPub web interface. You can also programmatically toggle auto-refresh on a particular MoPubView using the setAutorefreshEnabled method.

Last updated November 09, 2018

TWITTER, MOPUB, and the Bird logo are trademarks of Twitter, Inc. or its affiliates. All third party logos and trademarks included are the property of their respective owners.

© 2018 MoPub Inc.