Keeping A Smart Banner Docked To The Bottom Of The Screen on iOS

Smart Banner advertisements, introduced in AdMob SDK v6.0, help developers utilize the full width of the iPhone and iPad screen for displaying ads. You still have to be smart about using Smart Banners! We are noticing that some of you are having a hard time resetting your ad’s origin when a re-orientation of the device occurs. More specifically, not resetting the ad’s origin correctly causes ads to disappear offscreen after orientation changes. In this blog post, we’ll show you how to keep a Smart Banner docked to the bottom of the screen on iOS.

The first thing to do is to initialize a Smart Banner at the bottom of the device’s screen. You can do this by giving the ad an origin corresponding to the screen bottom.

// Initialize the banner docked to the bottom of the screen.
// We start in a portrait orientation so use kGADAdSizeSmartBannerPortrait.
  CGPoint origin = CGPointMake(0.0,
                               self.view.frame.size.height -
                               CGSizeFromGADAdSize(
                                   kGADAdSizeSmartBannerPortrait).height);

  self.adBanner = [[[GADBannerView alloc]
                    initWithAdSize:kGADAdSizeSmartBannerPortrait
                            origin:origin] autorelease];

//Continue rest of initialization here

Every time an orientation change occurs, you have to reset the ad’s orientation so it continues to stay docked to the bottom. The best place to implement the above logic is in the willAnimateRotationToInterfaceOrientation:duration: method since the view’s frame has been updated to the new orientation

Update the origin by utilizing the Smart Banner constant that is applicable to your current orientation. The only value that should change is your y-origin, since your x-origin should remain at 0.

-(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInt
                                        duration:(NSTimeInterval)duration {
  // The updated y value for the origin.
  CGFloat yLocation;

  // Set a new frame to update the origin on orientation change. Remember to set
  // adSize first before you update the frame.
  if (UIInterfaceOrientationIsLandscape(toInt)) {
    self.adBanner.adSize = kGADAdSizeSmartBannerLandscape;
    yLocation = self.view.frame.size.width -
                CGSizeFromGADAdSize(kGADAdSizeSmartBannerLandscape).height
  } else {
    self.adBanner.adSize = kGADAdSizeSmartBannerPortrait;
    yLocation = self.view.frame.size.height -
                CGSizeFromGADAdSize(kGADAdSizeSmartBannerPortrait).height);
  }

  CGRect frame = self.adBanner.frame;
  frame.origin = CGPointMake(0.0, yLocation);
  self.adBanner.frame = frame;
}

If you’re not using mediation, changing the adSize after your first request will cause another request to be made. Make sure that you set the frame after you modify the adSize. This ensures that the ad transition looks smooth across orientation changes.

Your Smart Banner ads are now even smarter. As the orientation of the device changes, your ads should stay docked to the bottom of the screen. If you have any questions about Smart Banners or about the AdMob SDK, feel free to post them in our forum or keep on the lookout for upcoming Hangout office hours.

 - Raj Parameswaran, AdMob Team