Banner Ads

• Prerequisites
• Disclaimer
• Loading Banner Ads in Your App
• Using the Delegate
• Refreshing Ads
• Sample Code

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.

Disclaimer

Publisher provided overlays (i.e. close buttons) located with the ad placement and subsequently covering the ad creative are against [Policy][7] 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 simple process:

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

2. Load the ad into the banner slot.

IMPORTANT: Please do not use publisher-provided overlays (such as close buttons) that are located with the ad placement and that subsequently cover the ad creative. Doing so is against MoPub Policy. If you have questions, please reach out to your account team or support@mopub.com for additional assistance.

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="match_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();

Using the Delegate

MoPubView provides a listener interface, BannerAdListener, which includes a variety of optional callbacks you can use to be notified of events; for example, when an ad has successfully loaded, or when the ad is about to present or dismiss a modal view. 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 2):

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.

Sample Code

For a complete example of how to add banner ads into your app, check out the MoPub sample app.