Banner ads

    Select platform: Android iOS Unity Flutter

    Banner ads are rectangular ads that occupy a portion of an app's layout. Anchored adaptive banners are fixed aspect ratio ads that stay on screen while users are interacting with the app, either anchored at the top or bottom of the screen.

    This guide covers loading an anchored adaptive banner ad into an Android app.

    Prerequisites

    Always test with test ads

    When building and testing your apps, make sure you use test ads rather than live, production ads. Failure to do so can lead to suspension of your account.

    The easiest way to load test ads is to use our dedicated test ad unit ID for Android banners:

    /21775744923/example/adaptive-banner

    It's been specially configured to return test ads for every request, and you can use it in your own apps while coding, testing, and debugging. Just make sure you replace it with your own ad unit ID before publishing your app.

    For more information about how Google Mobile Ads SDK test ads work, see Enable test ads .

    Define the ad view

    XML Layout

    Add a view to your layout XML file to serve as the container for your anchored adaptive banner ad:

     <!--  
Ad  
view  
container  
that  
fills  
the  
width  
of  
the  
screen  
and  
adjusts  
its  
height  
to  
the  
content  
of  
the  
ad.  
-->
<FrameLayout  
android:id="@+id/ad_view_container"  
android:layout_width="match_parent"  
android:layout_height="wrap_content"  
android:layout_centerInParent="true"  
android:layout_alignParentBottom="true"  
/>

    Jetpack Compose

    1. Include the JetpackComposeDemo/compose-util module. This module includes helpers for composing the AdView object and assets.

    2. Compose a BannerAd class from the compose-util module:

      // Place the ad view at the bottom of the screen. 
 Column 
 ( 
 modifier 
  
 = 
  
 modifier 
 . 
 fillMaxSize 
 (), 
  
 verticalArrangement 
  
 = 
  
 Arrangement 
 . 
 Bottom 
 ) 
  
 { 
  
 Box 
 ( 
 modifier 
  
 = 
  
 modifier 
 . 
 fillMaxWidth 
 ()) 
  
 { 
  
 AdManagerBannerAd 
 ( 
 adView 
 , 
  
 modifier 
 ) 
  
 } 
 } 
 
      AdManagerBannerScreen 
 . 
 kt

    Set the ad size

    Set the AdSize to an anchored adaptive banner type with a specified width:

    Java

      // Request an anchored adaptive banner with a width of 360. 
 adView 
 . 
 setAdSize 
 ( 
 AdSize 
 . 
 getCurrentOrientationAnchoredAdaptiveBannerAdSize 
 ( 
 this 
 , 
  
 360 
 )); 
 
      MyActivity 
 . 
 java

    Kotlin

      // Request an anchored adaptive banner with a width of 360. 
 adView 
 . 
 setAdSize 
 ( 
 AdSize 
 . 
 getCurrentOrientationAnchoredAdaptiveBannerAdSize 
 ( 
 this 
 , 
  
 360 
 )) 
 
      MainActivity 
 . 
 kt

    Jetpack Compose

      // Set the adaptive banner ad size with a given width. 
 val 
  
 adSize 
  
 = 
  
 AdSize 
 . 
 getCurrentOrientationAnchoredAdaptiveBannerAdSize 
 ( 
 LocalContext 
 . 
 current 
 , 
  
 360 
 ) 
 adView 
 . 
 setAdSize 
 ( 
 adSize 
 ) 
 
      AdManagerBannerScreen 
 . 
 kt

    Add AdManagerAdView to the layout

    Create an AdManagerAdView using the ad size to add to your app's layout:

    Java

      // Create a new ad view. 
 adView 
  
 = 
  
 new 
  
 AdManagerAdView 
 ( 
 this 
 ); 
 adView 
 . 
 setAdUnitId 
 ( 
 AD_UNIT 
 ); 
 // Request an anchored adaptive banner with a width of 360. 
 adView 
 . 
 setAdSize 
 ( 
 AdSize 
 . 
 getCurrentOrientationAnchoredAdaptiveBannerAdSize 
 ( 
 this 
 , 
  
 360 
 )); 
 // Replace ad container with new ad view. 
 adContainerView 
 . 
 removeAllViews 
 (); 
 adContainerView 
 . 
 addView 
 ( 
 adView 
 ); 
 
      MyActivity 
 . 
 java

    Kotlin

      // Create a new ad view. 
 val 
  
 adView 
  
 = 
  
 AdManagerAdView 
 ( 
 this 
 ) 
 adView 
 . 
 adUnitId 
  
 = 
  
 AD_UNIT_ID 
 // Request an anchored adaptive banner with a width of 360. 
 adView 
 . 
 setAdSize 
 ( 
 AdSize 
 . 
 getCurrentOrientationAnchoredAdaptiveBannerAdSize 
 ( 
 this 
 , 
  
 360 
 )) 
 this 
 . 
 adView 
  
 = 
  
 adView 
 // Replace ad container with new ad view. 
 binding 
 . 
 adViewContainer 
 . 
 removeAllViews 
 () 
 binding 
 . 
 adViewContainer 
 . 
 addView 
 ( 
 adView 
 ) 
 
      MyActivity 
 . 
 kt

    Jetpack Compose

      val 
  
 adView 
  
 = 
  
 remember 
  
 { 
  
 AdManagerAdView 
 ( 
 context 
 ) 
  
 } 
 // Setup and load the adview. 
 // Set the unique ID for this specific ad unit. 
 adView 
 . 
 adUnitId 
  
 = 
  
 ADMANANGER_ADAPTIVE_BANNER_AD_UNIT_ID 
 // Set the adaptive banner ad size with a given width. 
 val 
  
 adSize 
  
 = 
  
 AdSize 
 . 
 getCurrentOrientationAnchoredAdaptiveBannerAdSize 
 ( 
 LocalContext 
 . 
 current 
 , 
  
 360 
 ) 
 adView 
 . 
 setAdSize 
 ( 
 adSize 
 ) 
 // Place the ad view at the bottom of the screen. 
 Column 
 ( 
 modifier 
  
 = 
  
 modifier 
 . 
 fillMaxSize 
 (), 
  
 verticalArrangement 
  
 = 
  
 Arrangement 
 . 
 Bottom 
 ) 
  
 { 
  
 Box 
 ( 
 modifier 
  
 = 
  
 modifier 
 . 
 fillMaxWidth 
 ()) 
  
 { 
  
 AdManagerBannerAd 
 ( 
 adView 
 , 
  
 modifier 
 ) 
  
 } 
 } 
 
      AdManagerBannerScreen 
 . 
 kt

    Load an ad

    Once the AdManagerAdView is in place, the next step is to load an ad. That's done with the loadAd() method in the AdManagerAdView class. It takes an AdManagerAdRequest parameter, which holds runtime information, such as targeting info, about a single ad request.

    Here's an example that shows how to load an ad:

    Java

      AdManagerAdRequest 
  
 adRequest 
  
 = 
  
 new 
  
 AdManagerAdRequest 
 . 
 Builder 
 (). 
 build 
 (); 
 adView 
 . 
 loadAd 
 ( 
 adRequest 
 ); 
 
      MyActivity 
 . 
 java

    Kotlin

      val 
  
 adRequest 
  
 = 
  
 AdManagerAdRequest 
 . 
 Builder 
 (). 
 build 
 () 
 adView 
 . 
 loadAd 
 ( 
 adRequest 
 ) 
 
      MyActivity 
 . 
 kt

    If successful, your app is ready to display banner ads.

    Refresh an ad

    If you configured your ad unit to refresh, you don't need to request another ad when the ad fails to load. Google Mobile Ads SDK respects any refresh rate you specified in the Ad Manager UI. If you haven't enabled refresh, issue a new request. For more details on ad unit refresh, such as setting a refresh rate, see Refresh rate for ads in mobile apps .

    Release an ad resource

    When you are finished using a banner ad, you can release the banner ad's resources.

    To release the ad's resource, you remove the ad from the view hierarchy and drop all its references:

    Java

      public 
  
 void 
  
 destroyBanner 
 () 
  
 { 
  
 // Remove banner from view hierarchy. 
  
 if 
  
 ( 
 adView 
  
 != 
  
 null 
 ) 
  
 { 
  
 View 
  
 parentView 
  
 = 
  
 ( 
 View 
 ) 
  
 adView 
 . 
 getParent 
 (); 
  
 if 
  
 ( 
 parentView 
  
 instanceof 
  
 ViewGroup 
 ) 
  
 { 
  
 (( 
 ViewGroup 
 ) 
  
 parentView 
 ). 
 removeView 
 ( 
 adView 
 ); 
  
 } 
  
 // Destroy the banner ad resources. 
  
 adView 
 . 
 destroy 
 (); 
  
 } 
  
 // Drop reference to the banner ad. 
  
 adView 
  
 = 
  
 null 
 ; 
 } 
 
      BannerSnippets 
 . 
 java

    Kotlin

      fun 
  
 destroyBanner 
 () 
  
 { 
  
 // Remove banner from view hierarchy. 
  
 val 
  
 parentView 
  
 = 
  
 adView 
 ?. 
 parent 
  
 if 
  
 ( 
 parentView 
  
 is 
  
 ViewGroup 
 ) 
  
 { 
  
 parentView 
 . 
 removeView 
 ( 
 adView 
 ) 
  
 } 
  
 // Destroy the banner ad resources. 
  
 adView 
 ?. 
 destroy 
 () 
  
 // Drop reference to the banner ad. 
  
 adView 
  
 = 
  
 null 
 } 
 
      BannerSnippets 
 . 
 kt

    Ad events

    You can listen for a number of events in the ad's lifecycle, including loading, ad impression and click, as well as ad open and close events. It is recommended to set the callback before loading the banner.

    Java

      if 
  
 ( 
 adView 
  
 != 
  
 null 
 ) 
  
 { 
  
 adView 
 . 
 setAdListener 
 ( 
  
 new 
  
 AdListener 
 () 
  
 { 
  
 @Override 
  
 public 
  
 void 
  
 onAdClicked 
 () 
  
 { 
  
 // Code to be executed when the user clicks on an ad. 
  
 } 
  
 @Override 
  
 public 
  
 void 
  
 onAdClosed 
 () 
  
 { 
  
 // Code to be executed when the user is about to return 
  
 // to the app after tapping on an ad. 
  
 } 
  
 @Override 
  
 public 
  
 void 
  
 onAdFailedToLoad 
 ( 
 @NonNull 
  
 LoadAdError 
  
 adError 
 ) 
  
 { 
  
 // Code to be executed when an ad request fails. 
  
 } 
  
 @Override 
  
 public 
  
 void 
  
 onAdImpression 
 () 
  
 { 
  
 // Code to be executed when an impression is recorded 
  
 // for an ad. 
  
 } 
  
 @Override 
  
 public 
  
 void 
  
 onAdLoaded 
 () 
  
 { 
  
 // Code to be executed when an ad finishes loading. 
  
 } 
  
 @Override 
  
 public 
  
 void 
  
 onAdOpened 
 () 
  
 { 
  
 // Code to be executed when an ad opens an overlay that 
  
 // covers the screen. 
  
 } 
  
 }); 
 } 
 
      BannerSnippets 
 . 
 java

    Kotlin

      adView 
 ?. 
 adListener 
  
 = 
  
 object 
  
 : 
  
 AdListener 
 () 
  
 { 
  
 override 
  
 fun 
  
 onAdClicked 
 () 
  
 { 
  
 // Code to be executed when the user clicks on an ad. 
  
 } 
  
 override 
  
 fun 
  
 onAdClosed 
 () 
  
 { 
  
 // Code to be executed when the user is about to return 
  
 // to the app after tapping on an ad. 
  
 } 
  
 override 
  
 fun 
  
 onAdFailedToLoad 
 ( 
 adError 
 : 
  
 LoadAdError 
 ) 
  
 { 
  
 // Code to be executed when an ad request fails. 
  
 } 
  
 override 
  
 fun 
  
 onAdImpression 
 () 
  
 { 
  
 // Code to be executed when an impression is recorded 
  
 // for an ad. 
  
 } 
  
 override 
  
 fun 
  
 onAdLoaded 
 () 
  
 { 
  
 // Code to be executed when an ad finishes loading. 
  
 } 
  
 override 
  
 fun 
  
 onAdOpened 
 () 
  
 { 
  
 // Code to be executed when an ad opens an overlay that 
  
 // covers the screen. 
  
 } 
  
 } 
 
      BannerSnippets 
 . 
 kt

    Each of the overridable methods in AdListener corresponds to an event in the lifecycle of an ad.

    Overridable methods
    onAdClicked()
    The onAdClicked() method is invoked when a click is recorded for an ad.
    onAdClosed()
    The onAdClosed() method is invoked when a user returns to the app after viewing an ad's destination URL. Your app can use it to resume suspended activities or perform any other work necessary to make itself ready for interaction.
    onAdFailedToLoad()
    The onAdFailedToLoad() method is the only one that includes a parameter. The error parameter of type LoadAdError describes what error occurred. For more information, refer to the Debugging Ad Load Errors documentation .
    onAdImpression()
    The onAdImpression() method is invoked when an impression is recorded for an ad.
    onAdLoaded()
    The onAdLoaded() method is executed when an ad has finished loading. If you want to delay adding the AdManagerAdView to your activity or fragment until you're sure an ad will be loaded, for example, you can do so here.
    onAdOpened()
    The onAdOpened() method is invoked when an ad opens an overlay that covers the screen.

    Hardware acceleration for video ads

    In order for video ads to show successfully in your banner ad views, hardware acceleration must be enabled.

    Hardware acceleration is enabled by default, but some apps may choose to disable it. If this applies to your app, we recommend enabling hardware acceleration for Activity classes that use ads.

    Enable hardware acceleration

    If your app does not behave properly with hardware acceleration turned on globally, you can control it for individual activities as well. To enable or disable hardware acceleration, you can use the android:hardwareAccelerated attribute for the <application> and <activity> elements in your AndroidManifest.xml . The following example enables hardware acceleration for the entire app but disables it for one activity:

     <application  
android:hardwareAccelerated="true">  
<!--  
For  
activities  
that  
use  
ads,  
hardwareAcceleration  
should  
be  
true.  
-->  
<activity  
android:hardwareAccelerated="true"  
/>  
<!--  
For  
activities  
that  
don't  
use  
ads,  
hardwareAcceleration  
can  
be  
false.  
-->  
<activity  
android:hardwareAccelerated="false"  
/>
</application>

    See the Hardware acceleration guide for more information about options for controlling hardware acceleration. Note that individual ad views cannot be enabled for hardware acceleration if the activity is disabled, so the activity itself must have hardware acceleration enabled.

    Manual impression counting

    Manual impression counting is compatible only with direct-sold and house campaigns with creatives trafficked directly in Ad Manager. It shouldn't be used for backfill or third-party networks ads. For more details, see Counting impressions and clicks .

    You can manually send impression pings to Ad Manager if you have special conditions for when an impression should be recorded:

    Java

      if 
  
 ( 
 adManagerAdView 
  
 != 
  
 null 
 ) 
  
 { 
  
 adManagerAdView 
 . 
 setManualImpressionsEnabled 
 ( 
 true 
 ); 
 } 
 
      BannerSnippets 
 . 
 java

    Kotlin

      adManagerAdView 
 ?. 
 setManualImpressionsEnabled 
 ( 
 true 
 ) 
 
      BannerSnippets 
 . 
 kt

    When you determine that an ad has been successfully returned and is on-screen, you can manually record an impression:

    Java

      if 
  
 ( 
 adManagerAdView 
  
 != 
  
 null 
 ) 
  
 { 
  
 adManagerAdView 
 . 
 recordManualImpression 
 (); 
 } 
 
      BannerSnippets 
 . 
 java

    Kotlin

      adManagerAdView 
 ?. 
 recordManualImpression 
 () 
 
      BannerSnippets 
 . 
 kt

    App events

    App events let you create ads that can send messages to their app code. The app can then take actions based on these messages.

    You can listen for Ad Manager specific app events using AppEventListener . These events can occur at any time during the ad's lifecycle, even before onAdLoaded() is called.

    Set the AppEventListener on your AdManagerAdView :

    Java

      if 
  
 ( 
 adManagerAdView 
  
 != 
  
 null 
 ) 
  
 { 
  
 adManagerAdView 
 . 
 setAppEventListener 
 ( 
 this 
 ); 
 } 
 
      BannerSnippets 
 . 
 java

    Kotlin

      adManagerAdView 
 ?. 
 appEventListener 
  
 = 
  
 this 
     BannerSnippets 

     
     
 . 
 kt

    Here is an example showing how to change the background color of your app depending on an app event with a name of color:

    Java

      @Override 
 public 
  
 void 
  
 onAppEvent 
 ( 
 @NonNull 
  
 String 
  
 name 
 , 
  
 @NonNull 
  
 String 
  
 info 
 ) 
  
 { 
  
 if 
  
 ( 
 name 
 . 
 equals 
 ( 
 "color" 
 )) 
  
 { 
  
 switch 
  
 ( 
 info 
 ) 
  
 { 
  
 case 
  
 "green" 
 : 
  
 // Set background color to green. 
  
 break 
 ; 
  
 case 
  
 "blue" 
 : 
  
 // Set background color to blue. 
  
 break 
 ; 
  
 default 
 : 
  
 // Set background color to black. 
  
 break 
 ; 
  
 } 
  
 } 
 } 
 
      BannerSnippets 
 . 
 java

    Kotlin

      override 
  
 fun 
  
 onAppEvent 
 ( 
 name 
 : 
  
 String 
 , 
  
 info 
 : 
  
 String 
 ) 
  
 { 
  
 if 
  
 ( 
 name 
  
 == 
  
 "color" 
 ) 
  
 { 
  
 when 
  
 ( 
 info 
 ) 
  
 { 
  
 "green" 
  
 - 
>  
 { 
  
 // Set background color to green. 
  
 } 
  
 "blue" 
  
 - 
>  
 { 
  
 // Set background color to blue. 
  
 } 
  
 else 
  
 - 
>  
 { 
  
 // Set background color to black. 
  
 } 
  
 } 
  
 } 
 } 
 
      BannerSnippets 
 . 
 kt

    And, here is the corresponding creative that sends color app event messages to the Listener:

     <html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

    See the Ad Manager App Events example for an implementation of app events in the API Demo app.

    Java Kotlin JetpackCompose

    Next steps

    Collapsible banners

    Collapsible banner ads are banner ads that are initially presented as a larger overlay, with a button to collapse the ad to a smaller size. Consider using it to further optimize your performance. See collapsible banner ads for more details.

    Inline adaptive banners

    Inline adaptive banners are larger, taller banners compared to anchored adaptive banners. They are of variable height, and can be as tall as the device screen. Inline adaptive banners are recommended over anchored adaptive banner ads for apps that place banner ads in scrollable content. See inline adaptive banners for more details.

    Explore other topics

    Design a Mobile Site
    View Site in Mobile | Classic
    Share by: