Native styles

  • Native style settings in Google Ad Manager automate the rendering of native ads based on specified styles, handling HTML, CSS, and JavaScript for responsive display.

  • Native styles are implemented similarly to banner ads and can have either a fluid size, determined at runtime to fit content, or a fixed size, determined beforehand.

  • Fluid ad size dynamically adjusts its height to fit the ad's content while the width matches the app's content, using the FLUID AdSize constant in the SDK.

  • Fixed size native styles allow publishers to control the exact width and height of the ad by selecting predefined sizes in the Ad Manager UI and loading a BannerAd with that size.

Native style settings let Google Ad Manager handle the rendering of your native ads based on native styles you specify within the product. First, specify size and targeting. Then add HTML, CSS, and JavaScript to define ads that are responsive and produce a quality display across all screens. You don't need to do any of the rendering; Ad Manager automatically applies the right native style for the destination. Native styles are implemented just like banner ads. They are rendered with a fluid ad size determined at runtime, or with a fixed ad size determined ahead of time.

Prerequisites

Fluid size

You can use the Fluid ad size in the Ad Manager UI to achieve an ad that dynamically adjusts to fit its content. With this setting, the ad's width will match your app's content, and its height will adjust at runtime to accommodate the ad's content. The SDK provides a special AdSize constant, FLUID, to handle this case. The fluid ad size height is dynamically determined based on the publisher defined width, allowing the ad view to adjust its height to match that of the creative.

Create a fluid ad request

Create a layout container for the ad view. Set the layout_height of the ad container to wrap_content because its height will be determined by the ad returned at runtime.

<FrameLayout
   android:id="@+id/fluid_ad_container"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal" />

Here's what the implementation looks like for making the ad request:

Kotlin

// Be sure to specify Fluid as the ad size in the Ad Manager UI and create
// an ad request with FLUID size.
val adRequest = BannerAdRequest.Builder("AD_UNIT_ID", AdSize.FLUID).build()

Java

// Be sure to specify Fluid as the ad size in the Ad Manager UI and create
// an ad request with FLUID size.
BannerAdRequest adRequest = new BannerAdRequest.Builder("AD_UNIT_ID", AdSize.FLUID).build();

Replace AD_UNIT_ID with your test device ID.

Once you successfully load the ad, add BannerAd.getView() to the view hierarchy. For more details, see Load an ad.

Fixed size

Native styles with a fixed size allow you to control the width and height of the native ad. To set a fixed size, follow these steps:

  1. Create a line item in the Ad Manager UI and select one of the predefined sizes from the Size field drop-down.

  2. Load a BannerAd ad with the predefined AdSize.