Interstitial Ad doesn't cover all screen for a specific device

[figengungor]

[REQUIRED] Step 1: Describe your environment

Plugin Version

google_mobile_ads: ^4.0.0

[REQUIRED] Step 2: Describe the problem

Steps to Reproduce

1. Run interstitial sample on Galaxy S20 (https://github.com/googleads/googleads-mobile-flutter/tree/main/samples/admob/interstitial_example)

Expected results:

I want to see full screen interstitial app.

Actual results:
It seems like hiding the status bar and then showing my app bar as much as status bar's height.

interstitial_example % flutter doctor -v
[✓] Flutter (Channel stable, 3.16.9, on macOS 13.3.1 22E772610a darwin-arm64, locale en-TR)
    • Flutter version 3.16.9 on channel stable at /Users/figengungor/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 41456452f2 (5 weeks ago), 2024-01-25 10:06:23 -0800
    • Engine revision f40e976bed
    • Dart version 3.2.6
    • DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/figengungor/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/figengungor/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.85.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (3 available)
    • SM G980F (mobile) • RF8N72BXR7R • android-arm64  • Android 13 (API 33)
    • macOS (desktop)   • macos       • darwin-arm64   • macOS 13.3.1 22E772610a darwin-arm64
    • Chrome (web)      • chrome      • web-javascript • Google Chrome 122.0.6261.69

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[malandr2]

Hi @figengungor, are you able to reproduce this issue using our Android interstitial example? This will help us identify if it's a Flutter google_mobile_ads plugin issue or an Android Google Mobile Ads SDK issue.

[figengungor]

Hi @malandr2, Sorry I couldn't run the Android one, it requires to download extra things. I'm not working native so I won't spend time on it. This is not a crucial bug for me for now. You can try to run it on a Samsung device if you want.

[malandr2]

@figengungor gotcha, I've escalated to the engineering team to see if they can reproduce.

[douglasiacovelli]

The same is happening to me on devices with cutout such as the s23 as well. Not exactly sure if it's that, but it's worth double-checking https://developer.android.com/develop/ui/views/layout/display-cutout

[MestreKarin]

Is there any workaround? Tried to downgrade to 3.1.0, however, this still happens (tested on s10 plus). My app is in production and this issue triggered a violation (Google-served ads obscuring content) 😞

[alfit21]

Hopefully this issue is resolved soon, as this is already an issue in AdMob with 'Google Ads hiding content'.

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.10.6, on Microsoft Windows [Version 10.0.22631.3155], locale en-150)
[√] Windows Version (Installed version of Windows is version 10 or higher)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.8.3)
[√] Android Studio (version 2022.3)
[√] VS Code (version 1.87.2)
[√] Connected device (4 available)
[√] Network resources

! Doctor found issues in 1 category.

sdk gphone x86 (mobile) • emulator-5554 • android-x86 • Android 11 (API 30) (emulator)

[malandr2]

@ALL if confirming the issue, please add the device and ad unit ID you are experiencing the issue with to help troubleshoot. Thanks!

[ibrahimtaleb11]

i have same issue , and google admob send mail to my but i don't now how i solve this issue Interstitial ad in same device not cover all screen like ( Pixel 6 Pro , Resolution 1440 X 3120 )

[barchinvictor]

@ALL if confirming the issue, please add the device and ad unit ID you are experiencing the issue with to help troubleshoot. Thanks!

Android emulator Pixel 6 Pro. test unid id: ca-app-pub-3940256099942544/1033173712

[MestreKarin]

@ALL if confirming the issue, please add the device and ad unit ID you are experiencing the issue with to help troubleshoot. Thanks!

I'm using Samsung Galaxy S10+. I just want to note that after further testing, I noticed that this is happening in all apps... I'm suspecting that this is an SDK issue.

[arturoszulc]

I have the same issue, both in my app and with package examples (rewarder and rewardedinterstitial)
On emulators (API 30, 31, 32, 33) everything is OK, ads are fullscreen. The problem occurs on my devices Moto G8 and Moto G10 (Android 11).
On iOS everything is fine.

[Phlphat746]

คุณแก้ไขใด้หรือยังครับปัญหานี้ผมก็เจอมาแต่ปรับปรุงแล้วครับ

[malandr2]

@ALL

I have escalated this information to the ad formats team. I have a feeling this is not directly a Flutter google_mobile_ads plugin issue as it's only happening on Android devices but I will keep this issue open for now. I'll report back as soon as I have an update to share. Thanks!

[gustysetyono]

same issue, please help

thats make admob violation
Google-served ads obscuring content
We do not allow Google-served ads that:

fully or partially obscure content for any period of time

Thanks

[ibrahimtaleb11]

@ALL
@malandr2

today i test Admob Interstitial Example on GitHub By Android Studio java Ads show full screen but in flutter not full screen ,
I use ( Android emulator Pixel 6 Pro , unit id unid id: ca-app-pub-3940256099942544/1033173712 )

you can see attachment for both projects

1- Java Interstitial Example

2- Flutter Interstitial Example

[malandr2]

Hi @ibrahimtaleb11, thank you for the investigation. We have also deduced it is a Flutter issue and this is something that is actively being worked on by the Flutter team. The fix is expected to be in our next upcoming release (5.0.0). Thanks!

EDIT: The fix requires more time and did not make it in 5.0.0. We are doing a fast-follow release and this issue will be resolved in the following release. Thank you for your patience.

[gustysetyono]

i just fix this admob violation, I replied and submitted for review with the description that the ad that covers the application is an interstitial ad that is supposed to cover the application, this ad is not a banner ad. I also request that it be checked by a real person

[barchinvictor]

Hi @ibrahimtaleb11, thank you for the investigation. We have also deduced it is a Flutter issue and this is something that is actively being worked on by the Flutter team. The fix is expected to be in our next upcoming release (5.0.0). Thanks!

Hi! I'm testing package version 5.0.0, but the problem is not solved. Test ID, Pixel 6 pro emulator. Please check

[malandr2]

Hi @barchinvictor, the fix requires more time and did not make it in 5.0.0. We are doing a fast-follow release and this issue will be resolved in the following release. Thank you for your patience.

I updated my previous comment.

[techashonline]

i just fix this admob violation, I replied and submitted for review with the description that the ad that covers the application is an interstitial ad that is supposed to cover the application, this ad is not a banner ad. I also request that it be checked by a real person

hi @gustysetyono I have a admob policy center violation "Encouraging Accidental Clicks - Layout". Do you have the same thing. If so i can also request a review like you did. Thank you.

[LTPhantom]

Hello everyone. So about this issue, as it was pointed out before, seems to affect devices from api 27 to 32 that have some cutout on top (notches). Unfortunately, this is related to the way Flutter handles this device configuration.

We are looking into a possible general fix in the GMA Android SDK, but meanwhile you can use the following workaround.

It is necessary to modify the Android theme used by the Flutter app. In the example app, there is a generic Android theme assigned by default so a new theme should be created in the res/values/themes.xml like any other custom Android theme if that is the same case for you.

Make sure to inherit from that same default theme:

<style name="ActivityTheme" parent="@android:style/Theme.Black.NoTitleBar">
</style>

After you have your theme created or if you already had one theme before, please add the following item:

<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="27">
  never
</item>

The never value will ensure to leave space only when there is a cutout on the device. Activities made by Flutter seem to have the shortEdges value by default.

The full example theme file would end up like this:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="ActivityTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="27">
      never
    </item>
  </style>
</resources>

This change shouldn't affect any display behavior at all but please let us know if that is not the case or if this does not work for your use case.

You can learn more about this configuration here

Hope this helps!

[techashonline]

Hi @LTPhantom I have tested out the above workaround on my notched device(Oneplus 7T) with my own app. Now the notched area becomes black and the ad covers the remaining area.

Hope the issue will be fixed to show full screen ad on notched devices.

[malandr2]

@ALL

We have opened a bug ticket with Flutter to track the progress of this issue. Stay tuned for any updates.

[KevinHua]

The flutter view dimension is changed by InterstatialAd when shown. Please check on "Show Guidelines" on flutter "Widget Inspector", and you will find some hints.

Before InterstatialAd shown:

When showing:

After dismissed:

The original fullscreen-ed view is offset downside by a distance of statusbar's height and a black statusbar appears.

FYI. @LTPhantom @malandr2

Thanks!

[KevinHua]

The background of status bar is black. The icons and text could be shown when code:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
overlays: [SystemUiOverlay.top, SystemUiOverlay.bottom])

added. However, the app root view's position and dimension are still wrong.

[Wenutz]

I have the same issue with interstitial and rewarded videos.
My phone doesn't have a notch, just a hole for the camera: Galaxy S21 FE.

I have noticed that when we show the ad, the content behind is moved up, outside of the safeArea. When the interstitial is dismissed, the content jumps back down in its place. (as shown with the red down arrow).

Edit: applying the following code in styles.xml for light and dark mode fixes the issue:

 <item name="android:windowLayoutInDisplayCutoutMode">
            shortEdges
        </item>

The following code also works:

 <item name="android:windowLayoutInDisplayCutoutMode" targetApi="27">
            never
        </item>

[malandr2]

@LTPhantom ICYMI

[ibrahimtaleb11]

Hello everyone. So about this issue, as it was pointed out before, seems to affect devices from api 27 to 32 that have some cutout on top (notches). Unfortunately, this is related to the way Flutter handles this device configuration.

We are looking into a possible general fix in the GMA Android SDK, but meanwhile you can use the following workaround.

It is necessary to modify the Android theme used by the Flutter app. In the example app, there is a generic Android theme assigned by default so a new theme should be created in the res/values/themes.xml like any other custom Android theme if that is the same case for you.

Make sure to inherit from that same default theme:

<style name="ActivityTheme" parent="@android:style/Theme.Black.NoTitleBar">
</style>

After you have your theme created or if you already had one theme before, please add the following item:

<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="27">
  never
</item>

The never value will ensure to leave space only when there is a cutout on the device. Activities made by Flutter seem to have the shortEdges value by default.

The full example theme file would end up like this:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
  <style name="ActivityTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="27">
      never
    </item>
  </style>
</resources>

This change shouldn't affect any display behavior at all but please let us know if that is not the case or if this does not work for your use case.

You can learn more about this configuration here

Hope this helps!

Hi @LTPhantom

please inform to us if we use your suggest solution , it will not be affected my Admob Account ,
Because I stopped the ads more than a month and a half ago because of a political violation Google ads.
thank you ....

[PMARZV]

@ibrahimtaleb11 im using this solution and i have not received any violation notice. Can't 100% assure you that you will not receive one but its been almost 2 weeks now.... i have a killswitch in the app so that if i receive one, the ads will be disabled remotely

[Matees]

None of above mentioned issues work for me with device poco f3 with android 13, @malandr2, please let us know as soon as problem is solved

[malandr2]

@Matees and others can follow along flutter/flutter#146092 to see any updates from the Flutter team related to this. It may be infeasible for our team to directly resolve and may vary across the number of Android devices.

[anonym24]

The issue happens on all devices with native code in Jetpack Compose - https://stackoverflow.com/questions/78726976/content-of-the-activity-jumps-under-the-status-bar-when-admobs-interstitial-is

Samsung/Pixel:

Here's the default example of empty activity created with Jetpack Compose, just replaced a text with a button to show fullscreen ad (Admob Interstitial)

class MainActivity : ComponentActivity() {
private var interstitialAd: InterstitialAd? = null

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ... load ad 

    enableEdgeToEdge()
    setContent {
        AppTheme {
            Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                Column(
                    modifier = Modifier.padding(innerPadding)
                ) {
                    Button(onClick = {
                        interstitialAd?.show(this@MainActivity)
                    }) {
                        Text(
                            text = "Show fullscreen ad"
                        )
                    }
                }
            }
        }
    }
}

Before pressing the button the UI looks fine (as expected):

But when I click the button to show the ad the content of app's activity jumps under the status bar:

Samsung S22 Ultra

This is very annoying. I have this issue in my real projects where I also use Jetpack Compose.

We need to use enableEdgeToEdge() or WindowCompat.setDecorFitsSystemWindows(window, false) to be able to draw the backround for system bars with Jetpack Compose instead of Theme/Style xml.

The issue happens with any activity which appears above app's own activity, for example:

1. when a dialog with app chooser appears: context.startActivity(Intent.createChooser(...))

2. Google Play In App Review: reviewManager.launchReviewFlow(activity, reviewInfo)

and so on

Pixe emulator:

[malandr2]

@anonym24 you can create an issue in the AdMob Developers Forum for it to be properly addressed - your issue is related to the Android Google Mobile Ads SDK, not the flutter plugin. Thanks!

[kingvhit]

Hi all,
For work around until this issue can be solved.
You could try bellow way

        _interstitialAd!.fullScreenContentCallback =
            FullScreenContentCallback<InterstitialAd>(
                // Called when the ad showed the full screen content.
                onAdShowedFullScreenContent: (InterstitialAd ad) {
                  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
                },
                // Called when an impression occurs on the ad.
                onAdImpression: (InterstitialAd ad) {},
                // Called when the ad failed to show full screen content.
                onAdFailedToShowFullScreenContent:
                    (InterstitialAd ad, AdError err) {
                  // Dispose the ad here to free resources.
                  ad.dispose();
                  // Reload again
                  _interstitialAd = null;
                },
                // Called when the ad dismissed full screen content.
                onAdDismissedFullScreenContent: (InterstitialAd ad) {
                  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
                  // Dispose the ad here to free resources.
                  ad.dispose();
                  // Reload ads
                  debugPrint('InterstitialAd: onAdDismissedFullScreenContent');
                  initialAds();
                  // Callback
                  callback(true);
                },
                // Called when a click is recorded for an ad.
                onAdClicked: (InterstitialAd ad) {});

When Ad has been shown

                onAdShowedFullScreenContent: (InterstitialAd ad) {
                  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
                },

When Ad has been dismissed

                onAdDismissedFullScreenContent: (InterstitialAd ad) {
                  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
                }

I think that now can fix the policy and do not show black on notch place.

[congvc-dev]

@anonym24 I'm having the same issue. I created an issue for you to discuss and follow. Thank @malandr2 btw

[dotdevx]

Environment:
Plugin version: ^4.0.0 (tested with 5.1.0 result is the same)

Emulator: Pixel 6 pro with release Upsidedown Cake API Level 34

Describe the problem:

Expected result:
Full screen interstitial ad

Actual result:
Interstitial ad doesn't cover all screen, leaving a small see through gap

This triggered google admob ad restriction "Layout Encourages Accidental Clicks - Unexpected Launch Interstitials", along with image like the result above.

It works fine on my device and many emulators. I had spent some time searching and testing multiple emulators and finally managed to find the affected emulator.

Any working solution? please help. Thanks!

[MrCoder75]

Any updates on it?

[emircanerkul]

+1 same issue.

[emircanerkul]

#1013 (comment) applied, result not perfect but better than previous.

[amancd]

For me this code, worked just add this in app, res value

<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar"> <item name="android:windowBackground">?android:colorBackground</item> <item name="android:windowLayoutInDisplayCutoutMode"> never </item> </style>

[devfemibadmus]

please refers to flutter/flutter#146092 and stop posting screenshot of same issue someone has posted over and over here again

[emircanerkul]

@devfemibadmus it say Closing as working as intended i dont think this is intended. Black section should be bg of the ad. Also i think you don't know value of those test data.

[Jigneshiosdeveloper]

Hi,

I recently implemented admob interstitial ads in my project. It is showing in full screen for Android and iOS devices. You can check the screenshots for both platforms.

[min-naing]

The issue happens on all devices with native code in Jetpack Compose - https://stackoverflow.com/questions/78726976/content-of-the-activity-jumps-under-the-status-bar-when-admobs-interstitial-is

Samsung/Pixel:

Here's the default example of empty activity created with Jetpack Compose, just replaced a text with a button to show fullscreen ad (Admob Interstitial)

class MainActivity : ComponentActivity() { private var interstitialAd: InterstitialAd? = null

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // ... load ad 

    enableEdgeToEdge()
    setContent {
        AppTheme {
            Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                Column(
                    modifier = Modifier.padding(innerPadding)
                ) {
                    Button(onClick = {
                        interstitialAd?.show(this@MainActivity)
                    }) {
                        Text(
                            text = "Show fullscreen ad"
                        )
                    }
                }
            }
        }
    }
}

Before pressing the button the UI looks fine (as expected):

But when I click the button to show the ad the content of app's activity jumps under the status bar:

Samsung S22 Ultra

This is very annoying. I have this issue in my real projects where I also use Jetpack Compose.

We need to use enableEdgeToEdge() or WindowCompat.setDecorFitsSystemWindows(window, false) to be able to draw the backround for system bars with Jetpack Compose instead of Theme/Style xml.

The issue happens with any activity which appears above app's own activity, for example:

1. when a dialog with app chooser appears: context.startActivity(Intent.createChooser(...))
2. Google Play In App Review: reviewManager.launchReviewFlow(activity, reviewInfo)

and so on

Pixe emulator:

@anonym24

You sould use WindowInsets.displayCutout
Like this

Scaffold() { innerPadding ->
Column(
modifier = Modifier.fillMaxSize()
     .padding(innerPadding)
     .windowInsetsPadding(your'sWindowInsets.union(WindowInsets.displayCutout))
) {
... your navhost
}
}