Native platform ads are not displayed properly on Android

[YBill]

I use the platform Native ads, the ads are loaded successfully and displayed successfully, but the ads are not visible. onAdLoaded, onAdImpression, and onPaidEvent callbacks are all executed. But the ad is there, and when I click on it, it will be displayed immediately and I will be redirected to the store. I click the taskbar and then call back the page and it will be displayed.

You can reproduce it by directly using the Demo provided by Admob. It is not necessary to reproduce it, but if you kill the process and re-enter it, the probability of reproduction is very high. [https://github.com/googleads/googleads-mobile-flutter] - native_platform_example

Below are the normal and abnormal screenshots：

Phone model：Galaxy Note9 Android version：Android 10 Flutter version：Flutter 3.24.0 • channel stable Dart version：Dart 3.5.0

[malandr2]

Hi @YBill, can you further elaborate "kill the process and re-enter it" for your reproduce instructions? Which process?

[malandr2]

@YBill, disregard the previous question - I can observe it simply by tapping "Refresh Ad." I have escalated this to engineering team to begin the troubleshooting process

[jellynoone]

I've ran into this as well. Below is a reproducer:

1. Run flutter create -e --platforms android ads_app
2. Copy below code to relevant files
3. Run app (In my case a Samsung Galaxy A25 5G)
4. Wait for ad to load as normal
5. Click on "Hide and show again"
6. See a loading indicator and then a white screen. Bringing down the status bar brings back the ad.

// lib/main.dart
import 'dart:async';

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

const _androidNativeAdUnitId = 'ca-app-pub-3940256099942544/2247696110';
const _factoryId = 'myAd';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: AdPage(),
    );
  }
}

class AdPage extends StatefulWidget {
  const AdPage({super.key});

  @override
  State<AdPage> createState() => _AdPageState();
}

class _AdPageState extends State<AdPage> {
  (NativeAd?,)? _nativeAd;

  @override
  void initState() {
    super.initState();
    NativeAd(
      adUnitId: _androidNativeAdUnitId,
      listener: NativeAdListener(
        onAdLoaded: _onLoaded,
        onAdFailedToLoad: _onFailedToLoad,
      ),
      factoryId: _factoryId,
      request: const AdManagerAdRequest(),
    ).load();
  }

  void _onLoaded(Ad ad) {
    if (mounted) {
      setState(() {
        _nativeAd = (ad as NativeAd,);
      });
    } else {
      ad.dispose();
    }
  }

  void _onFailedToLoad(Ad ad, LoadAdError error) {
    ad.dispose();
    if (mounted) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Failed to load an ad: ${error.message}')),
      );
      setState(() {
        _nativeAd = (null,);
      });
    }
  }

  @override
  void dispose() {
    _nativeAd?.$1?.dispose();
    _nativeAd = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final ad = _nativeAd;
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 400,
          child: switch (ad) {
            (NativeAd ad,) => AdWidget(ad: ad),
            (null,) => const Text('Load failed'),
            null => const Center(
                child: CircularProgressIndicator(),
              ),
          },
        ),
      ),
      floatingActionButton: switch (ad) {
        (NativeAd ad,) => TextButton(
            onPressed: () {
              setState(() {
                _nativeAd = null;
              });
              Timer(const Duration(seconds: 1), () {
                setState(() {
                  _nativeAd = (ad,);
                });
              });
            },
            child: const Text('Hide and show again'),
          ),
        (null,) => null,
        null => const CircularProgressIndicator(),
      },
    );
  }
}

<!-- android/app/src/main/res/layout/my_ad.xml -->
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:layout_gravity="center_vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/ad_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="8dp"
            android:text="Ad Title"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/ad_body"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:text="Ad Body"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/ad_call_to_action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:text="Call to Action" />

        <com.google.android.gms.ads.nativead.MediaView
            android:id="@+id/ad_main_content"
            android:layout_width="250dp"
            android:layout_height="175dp"
            android:layout_marginBottom="16dp" />

        <ImageView
            android:id="@+id/ad_app_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_marginBottom="8dp" />

        <TextView
            android:id="@+id/ad_attribution"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="16dp"
            android:background="#000000"
            android:textColor="#ffffff"
            android:padding="4dp"
            android:text="Ad"
            android:textSize="12sp" />
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

// android/app/src/main/kotlin/com/example/ads_app/MainActivity.kt
package com.example.ads_app

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        GoogleMobileAdsPlugin.registerNativeAdFactory(
            flutterEngine, "myAd", AdFactory(layoutInflater))
    }

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "myAd")
    }
}

// android/app/src/main/kotlin/com/example/ads_app/AdFactory.kt
package com.example.ads_app

import android.util.Log
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.google.android.gms.ads.nativead.MediaView
import com.google.android.gms.ads.nativead.NativeAd
import com.google.android.gms.ads.nativead.NativeAdView
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory

class AdFactory(
    private val inflater: LayoutInflater,
): NativeAdFactory {
    override fun createNativeAd(
        nativeAd: NativeAd,
        customOptions: MutableMap<String, Any>?
    ): NativeAdView {
        val adView = inflater.inflate(R.layout.my_ad, null) as NativeAdView

        val adTitle = adView.findViewById<TextView>(R.id.ad_title)
        val adBody = adView.findViewById<TextView>(R.id.ad_body)
        val adCallToAction = adView.findViewById<TextView>(R.id.ad_call_to_action)
        val adMainContent = adView.findViewById<MediaView>(R.id.ad_main_content)
        val adAppIcon = adView.findViewById<ImageView>(R.id.ad_app_icon)

        adView.headlineView = adTitle
        adView.bodyView = adBody
        adView.callToActionView = adCallToAction
        adView.mediaView = adMainContent
        adView.iconView = adAppIcon

        adTitle.text = nativeAd.headline
        adBody.text = nativeAd.body
        adCallToAction.text = nativeAd.callToAction
        adMainContent.mediaContent = nativeAd.mediaContent
        val icon = nativeAd.icon
        if (icon != null) {
            adAppIcon.setImageDrawable(icon.drawable)
        } else {
            adAppIcon.visibility = View.GONE
        }

        adView.setNativeAd(nativeAd)
        
        return adView
    }
}

Add the following meta data just before the </application> tag:

        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>

[jellynoone]

@malandr2 Any news on this issue?

[malandr2]

Hi @jellynoone, no update to share at this time but it is something the team is aware of.

[LTPhantom]

Update: It seems to me that the issue is related to the impeller renderer. It is something to look more into.

If this is really a big problem, temporarily disabling impeller for Android could be a workaround. To do so, you would need to add the following to the Android manifest:

<meta-data android:name="io.flutter.embedding.android.EnableImpeller" android:value="false"/>

[matanlurey]

Update: It seems to me that the issue is related to the impeller renderer. It is something to look more into.

Hey @LTPhantom, I work on Flutter (and Impeller).

Just to be clear, when this issue was filed (September 11, 2024) and some of the subsequent posts, the default renderer for Android was still Skia - it only changed to Impeller in 3.27 (December 11th, 2024). It's certainly possible there are also elements on Impeller that need to be fixed, but I would be surprised if most of the comments in this issue are directly related to Impeller.

Feel free to ping me internally as well.

[malandr2]

Hi @matanlurey, thanks for sharing.

@YBill did the proposed workaround from https://github.com/googleads/googleads-mobile-flutter/issues/1171#issuecomment-2574106580 have any effect?

[github-actions[bot]]

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

[jellynoone]

@malandr2 This issue is being prematurely closed, the issue is not related to impeller and has existed before the Android rendering backend switched. I assumed the comment from @matanlurey cleared that up.