Customize the color of the white border arround NativeAds

[svprdga]

Use case

The new NativeAd can now be customized with colors from Dart code. However there is a padding space between the ad components and the gray outer boundary which is always white. Right now, even if the app is in Dark mode, that space is white. It would be nice if that white space could be customized, so that it could be put in a Dark tone.

Proposal

Add a paddingColor or similar property in NativeTemplateStyle in order to be able to set the color of that space which right now is always white.

[huycozy]

Hi @svprdga
Can you please provide a minimal sample code along with a screenshot of the issue? Thank you!

[NaMeTaKeN33]

I'm not OP, but was browsing I'm in the process of implementing and was looking around and saw the open post that I also ran into. This is 100% the code from the implementation guide here: https://developers.google.com/admob/flutter/native/templates

The below images are what I assume OP is talking about. Left is Android, right is iOS. Note that this only occurs on Android.

Just as an addition: On Android, setting the background colors of the Ad to transparent also sets it to whatever that border color is so it seems that whatever container the ad details are in/over has a padding and a bg color. Also the constrained box templates in the code linked above does not auto-expand the height based on if there is a video or not in the small template.

EDIT After playing around a bit more and altering the button colors, it appears to be an issue with android padding in general. Android left - iOS right

[NaMeTaKeN33]

Just as a temporary fix: You can change the following lines in "gnt_small_template_view.xml"

Line 16: Find
android:background="@drawable/gnt_outline_shape"

Replace With
android:background="@android:color/transparent"

Not sure if it's a proper fix, but it works for now:

[huycozy]

Thank @NaMeTaKeN33 for providing more information. I also can see the issue as you described.

To reproduce the issue, enable dark theme (ThemeData.dark()) for the plugin example at:

googleads-mobile-flutter/packages/google_mobile_ads/example/lib/main.dart

Line 239 in b38fc89

return MaterialApp(

[huycozy]

We’re closing this issue due to inactivity. If you’re still impacted, please create a new issue via the Developer Forum.

[NaMeTaKeN33]

Lmao why was this closed due to inactivity? It's still an issue considering that there hasn't been a version bump and was on development sides plate.

[ravitaak]

~AppData\Local\Pub\Cache\hosted\pub.dev\google_mobile_ads-3.0.0\android\src\main\res\drawable\gnt_outline_shape.xml

@svprdga @NaMeTaKeN33 @huycozy
I have changed this file and color and border set as transparent. Can you tell me I can do it? will it effect my ads?

NOTE: after changing it I can change background color in flutter by adding Container or else.

[alphonse-va]

If you need a less quick and dirty fix that work with your CI environnement

Replace

google_mobile_ads: ^3.0.0

By this forked repo repo

google_mobile_ads: # ^3.0.0
    git:
      url: https://github.com/alphonse-va/googleads-mobile-flutter.git
      path: packages/google_mobile_ads
      ref: 321c0a8e9bf6594c5d6d24e0aa1baf44208d2361

[ajith-ab]

For IOS Comment following line

ios/Classes/NativeTemplates/GoogleAdsMobileIosNativeTemplates/GADTTemplateView.m inside the package file

This helps me change the border and color.

- (void)applyStyles {
  // self.layer.borderColor =
  //     [GADTTemplateView colorFromHexString:@"E0E0E0"].CGColor;
  // self.layer.borderWidth = 1.0f;
  [self.mediaView sizeToFit];
  if ([self styleForKey:GADTNativeTemplateStyleKeyCornerRadius]) {
    float roundedCornerRadius =
        ((NSNumber *)[self styleForKey:GADTNativeTemplateStyleKeyCornerRadius])
            .floatValue;

    // Rounded corners
    self.iconView.layer.cornerRadius = roundedCornerRadius;
    self.iconView.clipsToBounds = YES;
    ((UIButton *)self.callToActionView).layer.cornerRadius =
        roundedCornerRadius;
    ((UIButton *)self.callToActionView).clipsToBounds = YES;
  }
...

}

happy coding!