Native ads allow you to customize the look and feel of your ads, resulting in a better user experience and more flexibility. Better user experiences can increase engagement and improve your overall yield.

In order to get the most out of native ads, it's important to style your ad layouts so that they feel like a natural extension of your app. There are generally two steps to using Native Templates: loading an ad to obtain an ad object, and then using that ad object to display the ad assets.

To help you get started displaying your ads, we've created Native Templates. Native Templates help you display and style your Native ads very quickly. If you'd like to see an example of syling your ads from scratch, without the benefit of templates, see our guide here or our advanced codelab here. For Native Templates are views for your native ads, designed for fast implementation and easy modification. With Native Templates, you can implement your first native ad in just a few minutes, and you can quickly customize the look and feel without a lot of code. You can place these templates anywhere you want, such as in a recycler view used in a news feed, in a dialog, or anywhere else in your app.

What are you going to be building?

In this codelab we've provided an example project for you to integrate Native Templates and see how easy they make styling your Ads. You're going to set up a Native Ad Unit and then use that Ad unit to display an ad.

.

What you'll need

Create a new Android Studio project

Create a new project in Android Studio. Choose a minSDK version of 16. Start with an empty activity.

Import the Mobile Ads SDK

In your project-level build.gradle file, add the following:

allprojects {
    repositories {
        google()
        jcenter()
    }
}

Then, in your app module's build.gradle file, add the following:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.google.android.gms:play-services-ads:17.2.0'
}

Sync your project with gradle files

To be sure that all dependencies are available to your app, you should sync your project with gradle files at this point. Select File > Sync Project with Gradle Files menu to sync your project with gradle files.

Update your AndroidManifest.xml

Add your AdMob App ID to your app's AndroidManifest.xml file by adding the <meta-data> tag shown below. You can find your App ID in the AdMob UI. For android:value insert your own AdMob App ID in quotes, as shown below.

<manifest>
    <application>
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>
</manifest>

For the purposes of this codelab, you can use the sample App ID shown above. In a real app, you would Set up an app in AdMob and find your app ID in the AdMob UI.

Initialize the SDK

Before loading ads, have your app initialize the Mobile Ads SDK by calling MobileAds.initialize() with your AdMob App ID. This needs to be done only once, ideally at app launch.

In your MainActivity's onCreate() method add the following:

MobileAds.initialize(this, "ca-app-pub-3940256099942544~3347511713");

Download the code

Native Templates are open source and we encourage you to tweak the code to your needs. Let's first get the source code.

Download source code


Import the module

Native Templates live in an Android Studio module which makes it easy to import into existing projects. To import the module into Android Studio, navigate to File>New>Import Module.

Then, select the directory of the module which you downloaded above.

Click Finish.

Finally, import the module in your app-level build.gradle file:

dependencies {
        ...
        implementation project(':NativeTemplatesAndroid-1.0.0')
        ...
}

Make sure you sync your Gradle when you are finished.

Add a Template to Your Layout

In your activity_main.xml layout, insert the following view:

<com.google.android.ads.nativetemplates.TemplateView
   android:id="@+id/my_template"
   app:gnt_template_type="@layout/gnt_small_template_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

This view will be populated with a native ad in the next step.

Load a Native Ad

Next, we'll load a native ad. More information about loading an ad can be found here. For now, paste the following into the onCreate() method of your MainActivity:

AdLoader.Builder builder = new AdLoader.Builder(
    this, "ca-app-pub-3940256099942544/2247696110");

builder.forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() {
 @Override
 public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) {
   TemplateView template = findViewById(R.id.my_template);
   template.setNativeAd(unifiedNativeAd);
 }
});

AdLoader adLoader = builder.build();
adLoader.loadAd(new AdRequest.Builder().build());

Once the native ad loads, it is passed to the template you defined earlier so that the native ad's assets are populated on this template.

Build and run your app to see the template in action!