adaptive-banners

name

adaptive-banners

description

Migrates mobile applications from deprecated AdMob banner formats (Smart Banners, Standard Banners, and Legacy Anchored Adaptive Banners) to the Large Adaptive Anchor API and Next-Gen GMA SDK. Use when upgrading to the Large Adaptive Anchor API (getLargeAnchoredAdaptiveBannerAdSize), migrating to Android GMA SDK v25.0.0+ or iOS GMA SDK v13.0.0+, implementing Google Mobile Ads in Flutter (google_mobile_ads v9.0.0+), or troubleshooting AdMob banner layout constraints, height, and overlapping issues. Don't use for interstitial, rewarded, or native ad formats.

Description

This skill provides instructions for migrating mobile applications from deprecated AdMob banner formats (Smart Banners, Standard Banners, and Legacy Anchored Adaptive Banners) to the new Large Adaptive Anchor API and the Next-Gen GMA SDK.

Triggering Conditions

Invoke this skill when the user query involves:

• AdMob banner formats, adaptive banners, or Smart Banner deprecation.
• Upgrading to the Large Adaptive Anchor API (getLargeAnchoredAdaptiveBannerAdSize).
• Migrating to Android GMA SDK v25.0.0+ or iOS GMA SDK v13.0.0+.
• Implementing Google Mobile Ads (GMA) in Flutter (google_mobile_ads v9.0.0+) focusing on next-gen or adaptive banners.
• Troubleshooting AdMob banner layout overlapping or height constraints.

Background Context

• Deprecation Warning: Support for Smart Banners and legacy Anchored Adaptive Banners was deprecated in Android v25.0.0 and iOS v13.0.0.
• Performance Uplift: The new Large Adaptive Anchor API yields a 10-15% eCPM increase by optimizing banner heights for modern device aspect ratios.
• Sizing Logic: The new banners dynamically scale up to 150dp/px or 20% of the device height, whichever is smaller.

---

1. Android Implementation Guidance

Classic GMA SDK (v25.0.0+)

Developers using com.google.android.gms:play-services-ads:25.0.0 or higher must update their size calculation methods.

Code Update (Kotlin):

// DEPRECATED
// val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width)

// NEW - Large Adaptive Anchor API
val adSize = AdSize.getLargeAnchoredAdaptiveBannerAdSize(context, width)
adView.setAdSize(adSize)

Layout Constraint: Ensure the XML parent container (e.g., FrameLayout) uses android:layout_height="wrap_content".

Next-Gen GMA SDK (Decagon)

If the user is migrating to the Next-Gen SDK (com.google.android.libraries.ads.mobile.sdk), the AdView architecture is replaced by the asynchronous BannerAd object.

Code Update (Kotlin):

val adSize = AdSize.getLargeAnchoredAdaptiveBannerAdSize(context, width)
val adRequest = BannerAdRequest.Builder("AD_UNIT_ID", adSize).build()

BannerAd.load(adRequest, object : AdLoadCallback<BannerAd> {
    override fun onAdLoaded(ad: BannerAd) {
        // Retrieve view and inject into UI
        adContainer.addView(ad.getView(context))
    }
})

---

2. iOS Implementation Guidance

For iOS, the Large Adaptive Anchor API was introduced in GMA SDK v13.0.0.

Code Update (Swift):

// DEPRECATED
// bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: viewWidth)

// NEW - Large Adaptive Anchor API
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
bannerView.adSize = largeAnchoredAdaptiveBanner(width: viewWidth)

Layout Constraint: Ensure Auto Layout constraints on the banner's container do not enforce a strict height.

---

3. Flutter Implementation Guidance

The Flutter plugin (google_mobile_ads) supports the Large Adaptive sizes. For users exploring Next-Gen SDK support or newer bindings (v9.0.0+ or compiling from the source main branch), they should ensure their pubspec.yaml points to the correct cutting-edge release.

Code Update (Dart):

Future<void> loadAd() async {
  // 1. Get safe screen width
  final double screenWidth = MediaQuery.sizeOf(context).width;

  // 2. Await the Large Adaptive Size calculation
  final AdSize size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
    screenWidth.truncate(),
  );

  // 3. Initialize and load
  final bannerAd = BannerAd(
    adUnitId: 'YOUR_AD_UNIT_ID',
    size: size,
    request: const AdRequest(),
    listener: BannerAdListener(...),
  );

  await bannerAd.load();
}

Dependencies Note: If the user asks about the Next-Gen SDK for Flutter, advise them to check if their targeted google_mobile_ads version (e.g., ^9.0.0 or git source) has officially exposed the Next-Gen asynchronous initialization wrappers, otherwise default to the standard initialization shown above.

---

4. UI/UX Troubleshooting & Best Practices (Agent Checklist)

When reviewing user code or layout issues, ensure the following:

1. Overlap Prevention: Because the new banners can be up to 150dp tall, verify they do not cover Bottom Navigation bars, Floating Action Buttons (FABs), or crucial app content.
2. Dynamic Containers: Instruct the user to strip any fixed height constraints (e.g., height = 50) from the banner's parent View/Widget/Container.
3. Safe Areas: Remind developers to calculate the banner width after subtracting system safe area insets (notches, edge-to-edge navigation bars), or the API may throw a "not enough space to show ad" error.