Adaptive Banners Beta

Adaptive banners are the next generation of responsive ads, maximizing performance by optimizing ad size for each device. Improving on smart banners, which only supported fixed heights, adaptive banners let developers specify the ad-width and use this to determine the optimal ad size.

To pick the best ad size, adaptive banners use fixed aspect ratios instead of fixed heights. This results in banner ads that occupy a more consistent portion of the screen across devices and provide opportunities for improved performance.

When working with adaptive banners, note that these will always return a constant size for a given device and width. Once you've tested your layout on a given device, you can be sure that the ad size will not change. However, the size of the banner creative may change across different devices. Consequently, it is recommended to ensure your layout can accommodate variances in ad height. In rare cases, the full adaptive size may not be filled and a standard size creative will be centered in this slot instead.

When to use adaptive banners

Adaptive banners are designed to be a drop-in replacement for the industry standard 320x50 banner size, as well as the smart banner format they supersede.

These banner sizes are commonly used as anchored banners, which are usually locked to the top or bottom of the screen. For such anchored banners, the aspect ratio when using adaptive banners will be similar to that of a standard 320x50 ad, as can be seen in these screenshots:


320x50 banner

Smart banner

Adaptive banner

An adaptive banner makes better use of the available screen size. Additionally, compared to a smart banner, an adaptive banner is a better choice because:

  • It uses a provided width rather than full screen width, enabling you to account for display cutouts .

  • It selects an optimal height for the specific device, rather than having a constant height across different sized devices, mitigating the effects of device fragmentation.

Implementation notes

When implementing adaptive banners in your app, keep the following points in mind:

  • Ensure you are using the latest version of the Google Mobile Ads SDK. For mediation, use the latest version mediation adapters.
  • Consider updating or creating new line items to work with adaptive sizes. Further details.
  • The adaptive banner sizes are designed to work best when using the full available width. In most cases, this will be the full width of the screen of the device in use. Be sure to take into account applicable display cutouts.

  • The Google Mobile Ads SDK returns an optimized ad height for the given width in an AdSize.

  • There are three methods to get an ad size for adaptive banners—one for landscape, one for portrait, and one for the current orientation at the time of execution. For more information, see the full API documentation below.

  • The size returned for a given width on a given device will always be the same, hence once you've tested your layout on a given device, you can be sure that the ad size will not change.

  • Anchored banner height is never larger than 15% of the device's height and never smaller than 50 dp.

Quickstart

Follow the steps below to implement a simple adaptive anchor banner.

  1. Create a PublisherAdView object and set your ad unit ID.

  2. Get an adaptive banner ad size. The size you get will be used to request your adaptive banner. To get the adaptive ad size, make sure that you:

    1. Get the width of the device in use, or set your own width if you don’t want to use the full width of the screen.
    2. Use the appropriate static methods on the ad size class, such as AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width) to get an adaptive AdSize object for the chosen orientation.
    3. Set the ad size on the banner ad view—do this using PublisherAdView.setAdSizes().

    Note that Google may serve any reservation ads that that are smaller than the adaptive size as outlined here. The returned ad will be centered in the ad view. A full example is included below.

  3. Create an ad request object and load your banner using the loadAd() method on your prepared ad view, just like you would with a normal banner request.

Full example

Here's an example of an activity that will load an adaptive banner to fit the width of the screen:

Java

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.Display;
import android.widget.FrameLayout;

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.doubleclick.PublisherAdView;
import com.google.android.gms.ads.MobileAds;
/** Main Activity. Inflates main activity xml and child fragments. */
public class MyActivity extends AppCompatActivity {

  private FrameLayout adContainerView;
  private PublisherAdView adView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);

    // Initialize the Mobile Ads SDK.
    MobileAds.initialize(this);
    adContainerView = findViewById(R.id.ad_view_container);
    // Step 1 - Create a PublisherAdView and set the ad unit ID on it.
    adView = new PublisherAdView(this);
    adView.setAdUnitId(getString(R.string.adaptive_banner_ad_unit_id));
    adContainerView.addView(adView);
    loadBanner();
  }

  private void loadBanner() {
    // Create an ad request. Check your logcat output for the hashed device ID
    // to get test ads on a physical device, e.g.,
    // "Use AdRequest.Builder.addTestDevice("ABCDE0123") to get test ads on this
    // device."
    PublisherAdRequest adRequest =
        new PublisherAdRequest.Builder().addTestDevice(PublisherAdRequest.DEVICE_ID_EMULATOR)
            .build();

    AdSize adaptiveSize = getAdSize();
    // Step 4 - Set the adaptive ad size on the ad view. Note that this sets
    // both the adaptive ad size for backfill inventory as well as the supported
    // reservation sizes.
    adView.setAdSizes(adaptiveSize, AdSize.BANNER);
    // Step 5 - Start loading the ad in the background.
    adView.loadAd(adRequest);
  }

  private AdSize getAdSize() {
    // Step 2 - Determine the screen width (less decorations) to use for the ad width.
    Display display = getWindowManager().getDefaultDisplay();
    DisplayMetrics outMetrics = new DisplayMetrics();
    display.getMetrics(outMetrics);

    float widthPixels = outMetrics.widthPixels;
    float density = outMetrics.density;

    int adWidth = (int) (widthPixels / density);

    // Step 3 - Get adaptive ad size and return for setting on the ad view.
    return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
  }
}

Kotlin

import android.os.Bundle
import android.util.DisplayMetrics
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.ads.AdRequest
import com.google.android.gms.ads.AdSize
import com.google.android.gms.ads.AdView
import com.google.android.gms.ads.MobileAds
import kotlinx.android.synthetic.main.activity_my.*

/** Main Activity. Inflates main activity xml and child fragments.  */
class MyActivity : AppCompatActivity() {
  private lateinit var adView: PublisherAdView

  // Determine the screen width (less decorations) to use for the ad width.
  // If the ad hasn't been laid out, default to the full screen width.
  private val adSize: AdSize
    get() {
      val display = windowManager.defaultDisplay
      val outMetrics = DisplayMetrics()
      display.getMetrics(outMetrics)

      val density = outMetrics.density

      var adWidthPixels = ad_view_container.width.toFloat()
      if (adWidthPixels == 0f) {
        adWidthPixels = outMetrics.widthPixels.toFloat()
      }

      val adWidth = (adWidthPixels / density).toInt()
      return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth)
    }

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

    // Initialize the Mobile Ads SDK.
    MobileAds.initialize(this) { }

    adView = PublisherAdView(this)
    ad_view_container.addView(adView)
    loadBanner()
  }

  private fun loadBanner() {
    adView.adUnitId = ad unit id

    adView.adSize = adSize

    // Create an ad request. Check your logcat output for the hashed device ID to
    // get test ads on a physical device, e.g.,
    // "Use AdRequest.Builder.addTestDevice("ABCDE0123") to get test ads on this device."
    val adRequest = PublisherAdRequest
        .Builder()
        .addTestDevice(PublisherAdRequest.DEVICE_ID_EMULATOR).build()

    // Start loading the ad in the background.
    adView.loadAd(adRequest)
  }

  companion object {
    // This is an ad unit ID for a test ad. Replace with your own banner ad unit ID.
    private val AD_UNIT_ID = "/6499/example/banner"
  }
}

Here the function AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize is used to get the size for a banner in an anchored position for the current interface orientation. For pre-loading an anchored banner in a given orientation, use the relevant function from AdSize.getPortraitAnchoredAdaptiveBannerAdSize and AdSize.getLandscapeAnchoredAdaptiveBannerAdSize.

Adaptive Banner Ad Size APIs

Below are the relevant APIs for creating an AdSize for adaptive banners.

public final class AdSize {
...
  /**
   * Returns an AdSize with the given width and a Google-optimized height
   * to create a banner ad. The size returned will have an aspect ratio
   * similar to that of an AdSize.BANNER, suitable for anchoring near the top or
   * bottom of your app. The height will never be larger than 15% of the
   * device's height in landscape mode and never smaller than 50px.
   * This function always returns the same height for any width / device
   * combination. If the context is null or we cannot determine the device
   * height from the context, an AdSize.INVALID object will be returned.
   *
   * @return An Ad Size object. If the context is null or we cannot determine
   * the device height from the context, an AdSize.INVALID object will be
   * returned.
   */
  public static AdSize getLandscapeAnchoredAdaptiveBannerAdSize(Context context, int width);

  /**
   * Returns an AdSize with the given width and a Google-optimized height
   * to create a banner ad. The size returned will have an aspect ratio
   * similar to that of an AdSize.BANNER, suitable for anchoring near the top or
   * bottom of your app. The height will never be larger than 15% of the
   * device's portrait height and never smaller than 50px. This function always
   * returns the same height for any width / device combination.
   *
   * @return An Ad Size object. If the context is null or we cannot determine
   * the device height from the context, an AdSize.INVALID object will be
   * returned.
   */
  public static AdSize getPortraitAnchoredAdaptiveBannerAdSize(Context context, int width);

 /**
  * Returns an AdSize with the given width and a Google-optimized height
  * to create a banner ad. The size returned will have an aspect ratio similar
  * to that of an AdSize.BANNER, suitable for anchoring near the top or bottom
  * of your app. The height will never be larger than 15% of the device's
  * current orientation height and never smaller than 50px. This function always
  * returns the same height for any width / device combination. If the context
  * is null or we cannot determine the device height from the context, an
  * AdSize.INVALID object will be returned.
  *
  * @return An Ad Size object. If the context is null or we cannot determine the
  * device height from the context, an AdSize.INVALID object will be returned.
  */
 public static AdSize getCurrentOrientationAnchoredAdaptiveBannerAdSize(Context context, int width);

}