Use the Native Ads Template in Android

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 and native banner ads.

Step 1: Template Implementation

Step 2: Further Customization

Initialize the Audience Network SDK

This method was added in the Android Audience Network SDK version 5.1.

Explicit initialization of the Audience Network Android SDK is required for version 5.3.0 and greater. Please refer to this document about how to initialize the Audience Network Android SDK.

Before creating an ad object and loading ads, you should initialize the Audience Network SDK. It is recommended to do this at app launch.

public class YourApplication extends Application {
    ...
    @Override
    public void onCreate() {
        super.onCreate();
        // Initialize the Audience Network SDK
        AudienceNetworkAds.initialize(this);       
    }
    ...
}

Step 1: Template Implementation

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

import com.facebook.ads.*;

Implementation for Native Ads.

private NativeAd nativeAd;

public class NativeAdActivity extends Activity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...

    // Instantiate an NativeAd object. 
    // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
    // now, while you are testing and replace it later when you have signed up.
    // While you are using this temporary code you will only get test ads and if you release
    // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
    nativeAd = new NativeAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };
    
    // Initiate a request to load an ad.
    nativeAd.loadAd(
            nativeAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .withMediaCacheFlag(NativeAdBase.MediaCacheFlag.ALL)
                    .build());
  }
}        

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.

private NativeAd nativeAd;
...
  NativeAdListener nativeAdListener = new NativeAdListener() {
    ...
    @Override
    public void onAdLoaded(Ad ad) {
      // Render the Native Ad Template
      View adView = NativeAdView.render(MainActivity.this, nativeAd);
      LinearLayout nativeAdContainer = (LinearLayout) findViewById(R.id.native_ad_container);
      // Add the Native Ad View to your ad container. 
      // The recommended dimensions for the ad container are:
      // Width: 280dp - 500dp
      // Height: 250dp - 500dp
      // The template, however, will adapt to the supplied dimensions.
      nativeAdContainer.addView(adView, new LayoutParams(MATCH_PARENT, 800));  
    }
   ...
  }

In case of not showing the ad immediately after the ad has been loaded, the developer is responsible for checking whether or not the ad has been invalidated. Once the ad is successfully loaded, the ad will be valid for 60 mins. You will not get paid if you are showing an invalidated ad. Please check the sample code for Scenario of Displaying the Ad with Delay.

Run the code and you should see the following:




Implementation for Native Banner Ads.

private NativeBannerAd mNativeBannerAd;
...

  @Override
  public void onCreate(Bundle savedInstanceState) {
    ...

    // Instantiate an NativeBannerAd object. 
    // NOTE: the placement ID will eventually identify this as your App, you can ignore it for
    // now, while you are testing and replace it later when you have signed up.
    // While you are using this temporary code you will only get test ads and if you release
    // your code like this to the Google Play your users will not receive ads (you will get a no fill error).
    mNativeBannerAd = new NativeBannerAd(this, "YOUR_PLACEMENT_ID");
    NativeAdListener nativeAdListener = new NativeAdListener() {
        ...
    };
    
    // Initiate a request to load an ad.
    mNativeBannerAd.loadAd(
            mNativeBannerAd.buildLoadAdConfig()
                    .withAdListener(nativeAdListener)
                    .build());
  }
}        

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 Banner Ad Template
  View adView = NativeBannerAdView.render(MainActivity.this, mNativeBannerAd, NativeBannerAdView.Type.HEIGHT_100);
  LinearLayout nativeBannerAdContainer = (LinearLayout) findViewById(R.id.native_banner_ad_container);
  // Add the Native Banner Ad View to your ad container
  nativeBannerAdContainer.addView(adView);  
}

In case of not showing the ad immediately after the ad has been loaded, the developer is responsible for checking whether or not the ad has been invalidated. Once the ad is successfully loaded, the ad will be valid for 60 mins. You will not get paid if you are showing an invalidated ad. Please check the sample code for Scenario of Displaying the Ad with Delay.

Run the code and you should see the following:



Custom Native Banner Ad Formats come in three templates:

Template View Type Height Width Attributes Included

NativeBannerAdView.Type .HEIGHT_50

50dp

Flexible width

Icon, title, context, and CTA button

NativeBannerAdView.Type .HEIGHT_100

100dp

Flexible width

Icon, title, context, and CTA button

NativeBannerAdView.Type .HEIGHT_120

120dp

Flexible width

Icon, title, context, description, and CTA button

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 or native banner ad to render these elements:

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

Example for Native Ads.

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.BLACK)
    .setTitleTextColor(Color.WHITE)
    .setDescriptionTextColor(Color.LTGRAY)
    .setButtonColor(Color.WHITE)
    .setButtonTextColor(Color.BLACK);
  
  View adView = NativeAdView.render(MainActivity.this, nativeAd, viewAttributes);

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

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




Example for Native Banner Ads.

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

@Override
public void onAdLoaded(Ad ad) {
  // Set the NativeAd attributes
  NativeAdViewAttributes viewAttributes = new NativeAdViewAttributes()
    .setBackgroundColor(Color.BLACK)
    .setTitleTextColor(Color.WHITE)
    .setDescriptionTextColor(Color.LTGRAY)
    .setButtonColor(Color.WHITE)
    .setButtonTextColor(Color.BLACK);   
  
  View adView = NativeBannerAdView.render(MainActivity.this, nativeAd, NativeBannerAdView.Type.HEIGHT_100, viewAttributes);

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

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

Next Steps