Native Ads Template

Publishers seeking a more hands off approach when integrating Native Ads can leverage a custom Audience Network Native Ads template. Customize a native ad's size, color, and font to match the look and feel of your app.

Ensure you have completed the Audience Network Getting Started and Android Getting Started guides before you proceed.

To utilize this guide effectively, you should be familiar with implementing Native Ads.

Step 1: Implementation

Step 2: Further Customization

Step 1: Implementation

Add the following code at the top of your activity class in order to import the Facebook Ads SDK:

import com.facebook.ads.*;

Then, request an ad via the Native Ads API.

private NativeAd nativeAd;
...

  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...
    nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID");
    nativeAd.setAdListener(new AdListener() {
      ...
    });
	  
    // Initiate a request to load an ad.
    nativeAd.loadAd();
  }
}        

If you want the ad to be shown as soon as it is loaded, you can render the custom template inside the AdListener's onAdLoaded() method and add it to your container.

@Override
public void onAdLoaded(Ad ad) {
  // Render the Native Ad Template
  View adView = NativeAdView.render(MainActivity.this, nativeAd, NativeAdView.Type.HEIGHT_300);
  LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
  // Add the Native Ad View to your ad container
  nativeAdContainer.addView(adView);  
}

Run the code and you should see the following:




Custom Ad Formats come in four templates:

Template View Type Height Width Attributes Included

NativeAdView.Type .HEIGHT_100

100dp

Flexible width

Icon, title, context, and CTA button

NativeAdView.Type .HEIGHT_120

120dp

Flexible width

Icon, title, context, description, and CTA button

NativeAdView.Type .HEIGHT_300

300dp

Flexible width

Image, icon, title, context, description, and CTA button

NativeAdView.Type .HEIGHT_400

400dp

Flexible width

Image, icon, title, subtitle, context, description and CTA button


Native ad templates can also be used in tandem with a Horizontal Scroll View. See here for details.

Step 2: Further Customization

With a native custom template, you can customize the following elements:

  • Height
  • Width
  • Background Color
  • Title Color
  • Title Font
  • Description Color
  • Description Font
  • Button Color
  • Button Title Color
  • Button Title Font
  • Button Border Color

If you want to customize certain elements, then it is recommended to use a design that fits in with your app's layouts and themes.

You will need to build an attributes object and provide a loaded native ad to render these elements:

Build a NativeAdViewAttributes object and provide it as an argument in NativeAdView.render():

@Override
public void onAdLoaded(Ad ad) {
  // Set the Native Ad attributes
  NativeAdViewAttributes viewAttributes = new NativeAdViewAttributes()
    .setBackgroundColor(Color.LTGRAY)
    .setTitleTextColor(Color.WHITE)
    .setButtonColor(Color.CYAN);    
  
  View adView = NativeAdView.render(MainActivity.this, nativeAd, NativeAdView.Type.HEIGHT_300, viewAttributes);

  LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
  // Add the Native Ad View to your ad container
  nativeAdContainer.addView(adView);  
}

Use Color.parseColor() if you'd like to use hex colors.

The above code will render an ad that looks like this:

Next Steps