Creating a banner ad

Banner ads occupy a spot within an app's layout, either at the top or bottom of the device screen. They stay on screen while users are interacting with the app, and can refresh automatically after a certain period of time. If you're new to mobile advertising, they're a great place to start.

Consider using Native Ads over Banner Ads

It's recommended to use NativeAds over BannerAds. A NativeAd is automatically adapted to the screen size, that means there will be no blank spaces in the borders and it'll fit when the screen is resized (or when the orientation changes). You can use the pre-built banner layout to use as a replacement to Banner Ads.

• How to create a Native Ad
• Example creating a Native Ad using the pre-built banner layout

Output:

Creating an ad

To create an ad, use the widget BannerAd:

BannerAd(size: BannerSize.ADAPTIVE_BANNER)

Here's an example of how to use Banner Ads at the bottom of the screen (recommended spot), but above the bottom navigation bar

Adaptive Banners

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 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.

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.

Both 320x50 Banner and Adaptive Banner in a device with a width of 360:

320x50 Banner	Adaptive Banner

Implementation Notes

• Adaptive Banners will NOT work if the parent width is infinity. That means it can't be wrraped in a Row without an Expanded or in a horizontal ListView, for example.
• Ensure that your ad view background is opaque (It can't be transparent) to be compliant with AdMob policies when smaller ad sizes serve that do not fill the ad slot.
• 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.
• Adaptive banner height is never larger than 15% of the device's height (MediaQuery.of(context).height * 0.15) and never smaller than 50.

Usage

BannerAd(
  ...
  size: BannerSize.ADAPTIVE,
  ...
)

Smart Banners

Smart Banners are ad units that render screen-width banner ads on any screen size across different devices in either orientation. Smart Banners detect the width of the device in its current orientation and create the ad view that size.
Three ad heights are implemented in smart banners:

Ad height	Screen height
32 dp	≤ 400 dp
50 dp	> 400 dp and ≤ 720 dp
90 dp	> 720 dp

Typically, Smart Banners on phones have a height of 50 dp in portrait and 32 dp in landscape. On tablets, height is normally 90 dp in both orientations.

When an image ad isn't large enough to take up the entire allotted space, the image will be centered, and the space on either side will be filled in.

Usage

BannerAd(
  ...
  size: BannerSize.SMART_BANNER,
  ...
)

Deprecated

As of SDK v20, Smart Banner ads are deprecated in favor of adaptive banner ads. Adaptive banners provide superior performance and more flexibility in setting ad width.

Other sizes

Name	WidthxHeight	Availability
BANNER	320x50	Phones and Tablets
LARGE_BANNER	320x100	Phones and Tablets
MEDIUM_RECTANGLE	320x250	Phones and Tablets
FULL_BANNER	468x60	Tablets
LEADERBOARD	728x90	Tablets

Usage

BannerAd(
  ...
  size: BannerSize.`Name` /* (`BANNER`, `FULL_BANNER`, etc) */,
  ...
)

Custom size

To define a custom banner size, set your desired BannerSize, as shown here:

BannerAd(
  ...
                     // width, height
  size: BannerSize.fromWH(300, 50),
  size: BannerSize(Size(300, 50)),
  ...
)

---

Next: Using AdBuilder and Placeholders