目录

Native ads fit seamlessly into the surrounding content to match your app design. Such ads can be customized as needed.

1. Adding a Native Ad

Load native ads through the Native Ad Loader class.

Step 1: Building an AdLoader

The Native Ad Loader class provides the Native Ad Loader Builder class for setting the ad slot ID, customizing attributes, and building the Native Ad Loader object. The sample code is as follows:

  1. // "testy63txaom86" is a dedicated test ad slot ID.
  2. NativeAdLoader.Builder builder = new NativeAdLoader.Builder(this, "testy63txaom86");
  3. builder.setNativeAdLoadedListener(new NativeAd.NativeAdLoadedListener() {
  4.     @Override
  5.     public void onNativeAdLoaded(NativeAd nativeAd) {
  6.         // Call this method when an ad is successfully loaded.
  7.         ...
  8.     }
  9. }).setAdListener(new AdListener() {
  10.     @Override
  11.     public void onAdFailed(int errorCode) {
  12.         // Called when an ad fails to be loaded.
  13.         ...
  14.     }
  15. });

  17. NativeAdLoader nativeAdLoader = builder.build();

If an ad is loaded successfully, the SDK calls the onNativeAdLoaded() method of Native Ad Native Ad Load ed Listener to return the Native Ad object.

If an ad fails to be loaded, the SDK calls the onAdFailed() method of Ad Listener.

Step 2: Loading an Ad

Native Ad Loader provides the loadAd() and loadAds() methods for ad loading.

Ad Param is the only parameter. The sample code is as follows:

  1. nativeAdLoader.loadAd(new AdParam.Builder().build());

After loadAd() is called, the SDK calls back the added listener method.

loadAds() contains two parameters: Ad Param and the number of ads to be loaded. The maximum number is 5. The number of ads returned by the SDK will be less than or equal to the requested number, and the returned ads are different.

The sample code is as follows:

  1. nativeAdLoader.loadAds(new AdParam.Builder().build(), 5);

After loadAds() is called, the listener makes multiple callbacks based on the number of returned ads. An app requesting multiple ads can use the NativeAdLoader.isLoading() method in the callback code to determine whether ad loading is complete. The sample code is as follows:

  1. // "testy63txaom86" is a dedicated test ad slot ID.
  2. NativeAdLoader.Builder builder = new NativeAdLoader.Builder(this, "testy63txaom86");
  3. NativeAdLoader nativeAdLoader = builder.setNativeAdLoadedListener(new NativeAd.NativeAdLoadedListener() {
  4.     @Override
  5.     public void onNativeAdLoaded(NativeAd nativeAd) {
  6.         if (nativeAdLoader.isLoading()) {
  7.             // nativeAdLoader is still loading ads.
  8.             ...
  9.         } else {
  10.             // nativeAdLoader has finished loading ads.
  11.             ...
  12.         }
  13.     }
  14. }).build();
  15. nativeAdLoader.loadAds(new AdParam.Builder().build(), 5);

Caution:
Before reusing NativeAdLoader to load ads, ensure that the previous request is complete.

Step 3: Displaying an Ad

The "Why this ad" icon and an ad identifier must be displayed in the corner of each ad view.

The procedure for displaying a native ad is as follows:

    1. Define the native ad layout.

Customize a layout to display the assets in Native Ad.

Caution:

NativeView must be used as the root layout of native ads. Otherwise, the ad revenue will be affected.

The following is a sample view hierarchy for a native ad that uses Relative Layout to display its asset view:

  1. <com.huawei.hms.ads.nativead.NativeView xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:orientation="vertical"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     ... >
  6.     <RelativeLayout
  7.         ... >
  8.         <com.huawei.hms.ads.nativead.MediaView
  9.             android:id="@+id/ad_media"
  10.             ... />
  11.         <RelativeLayout
  12.             ... >
  13.             <TextView
  14.                 android:id="@+id/ad_title"
  15.                 ...  />
  16.             // Other assets.
  17.             ...
  18.         </RelativeLayout>
  19.         // Other assets.
  20.         ...
  21.     </RelativeLayout>
  22. </com.huawei.hms.ads.nativead.NativeView>

    2. Register and populate the asset view.

After obtaining the Native View object, register and populate the asset view.

The following shows the sample code for registering and populating the view with the title and multimedia:

  1. // ad_native: name of the XML layout file for the native ad.
  2. NativeView nativeView = (NativeView) getLayoutInflater().inflate(R.layout.ad_native, null);
  3. nativeView.setTitleView(nativeView.findViewById(R.id.ad_title));
  4. ((TextView) nativeView.getTitleView()).setText(nativeAd.getTitle());
  5. nativeView.setMediaView((MediaView) nativeView.findViewById(R.id.ad_media));
  6. nativeView.getMediaView().setMediaContent(nativeAd.getMediaContent());

Set other ad assets to be displayed.

Media View is used to display multimedia assets. If the loaded ad contains a video element, the video will be rendered in Media View. Otherwise, an image will be rendered in Media View.

    3. Register the native ad object with NativeView.

The sample code is as follows:

  1. nativeView.setNativeAd(nativeAd);

    4. Display NativeView.

Add Native View to the UI to display the native ad. The sample code is as follows:

  1. private void loadAd() {
  2.     NativeAdLoader.Builder builder = new NativeAdLoader.Builder(this, "testy63txaom86");
  3.     builder.setNativeAdLoadedListener(new NativeAd.NativeAdLoadedListener() {
  4.         @Override
  5.         public void onNativeAdLoaded(NativeAd nativeAd) {
  6.             // TODO
  7.             ...
  8.             // Obtain NativeView.
  9.             NativeView nativeView = (NativeView) getLayoutInflater().inflate(R.layout.ad_native, null);
  10.             // Register and populate the native ad asset views.
  11.             initNativeAdView(nativeAd, nativeView);
  12.             // Add NativeView to the UI.
  13.             FrameLayout adFrameLayout = findViewById(R.id.frame_layout_ad);
  14.             adFrameLayout.removeAllViews();
  15.             adFrameLayout.addView(nativeView);
  16.             // TODO
  17.             ...
  18.         }
  19.     });
  20.     ...
  21. }
  22. private void initNativeView(NativeAd nativeAd, NativeView nativeView) {
  23.     // Register and populate the title view.
  24.     nativeView.setTitleView(nativeView.findViewById(R.id.ad_title));
  25.     ((TextView) nativeView.getTitleView()).setText(nativeAd.getTitle());
  26.     // Register and populate the multimedia view.
  27.     nativeView.setMediaView((MediaView) nativeView.findViewById(R.id.ad_media));
  28.     nativeView.getMediaView().setMediaContent(nativeAd.getMediaContent());
  29.     // Register and populate other asset views.
  30.     ...
  31.     // Register the native ad object.
  32.     nativeView.setNativeAd(nativeAd);
  33. }

(Optional) Step 4: Listening for Ad Events

Add an event listener for native ads. The sample code is as follows:

  1. NativeAdLoader nativeAdLoader = builder.setAdListener(new AdListener() {
  2.     @Override
  3.     public void onAdClicked() {
  4.         // TODO
  5.         ...
  6.     }
  7.     ...
  8. }).build();

2. Destroying an Ad

When you have finished showing a native ad, you should destroy it.

  1. nativeAd.destroy();

3. Native Video Ads

A native ad may contain video assets in addition to images and text. The HUAWEI Ads SDK also provides the following two classes for video configuration and control:

The Video Configuration class is used to configure native videos. The sample code is as follows:

  1. // "testy63txaom86" is a dedicated test ad slot ID.
  2. NativeAdLoader.Builder builder = new NativeAdLoader.Builder(this, "testy63txaom86");
  3. VideoConfiguration videoConfiguration = new VideoConfiguration.Builder()
  4.         // Set whether to play video assets in mute mode. The default value is true.
  5.         .setStartMuted(true)
  6.         .build();
  7. NativeAdConfiguration adConfiguration = new NativeAdConfiguration.Builder()
  8.         .setVideoConfiguration(videoConfiguration)
  9.         .build();
  10. builder.setNativeAdOptions(adConfiguration);

The Video Operator class is used to obtain video information and control videos. The controller instance needs to be obtained by calling the Native Ad.getVideoOperator() method. This method always returns the Video Operator object, regardless of whether the ad contains a video asset.

  1. VideoOperator videoOperator = nativeAd.getVideoOperator();

Video Operator provides the hasVideo() method to determine whether the ad contains a video asset.

The VideoOperator.Video LifecycleListener class can be used to listen for events during video playback.

  1. videoOperator.setVideoLifecycleListener(new VideoOperator.VideoLifecycleListener() {
  2.     @Override
  3.     public void onVideoEnd() {
  4.         // TODO
  5.         ...
  6.         super.onVideoEnd();
  7.     }
  8. });

4. Native Ad Templates

Huawei provides a set of native ad templates for you to quickly integrate into your app to display native ads.

Native ad templates are available in two sizes: small and medium. Both will scale to fill the width of their parent views. You can change the layout or style of the templates as you like.

The following figure shows a small template:

The content of the XML layout file is as follows:

  1. <com.huawei.hms.ads.nativead.NativeView xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:id="@+id/native_small_view"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:layout_centerInParent="true"
  6.     android:layout_marginTop="10dp"
  7.     android:background="#FFFFFF"
  8.     android:orientation="vertical">
  9.     <RelativeLayout
  10.         android:id="@+id/background"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="wrap_content"
  13.         android:layout_alignParentTop="true"
  14.         android:orientation="vertical">
  15.         <com.huawei.hms.ads.nativead.MediaView
  16.             android:id="@+id/ad_media"
  17.             android:layout_width="75dp"
  18.             android:layout_height="50dp"
  19.             android:layout_marginStart="24dp"
  20.             android:layout_marginTop="8dp"
  21.             android:layout_marginBottom="8dp"
  22.             android:background="#8BC34A" />
  23.         <RelativeLayout
  24.             android:id="@+id/center_view"
  25.             android:layout_width="wrap_content"
  26.             android:layout_height="wrap_content"
  27.             android:layout_marginStart="107dp"
  28.             android:layout_marginTop="8dp"
  29.             android:layout_marginEnd="48dp"
  30.             android:layout_marginBottom="8dp"
  31.             android:background="#FFFFFF">
  32.             <TextView
  33.                 android:id="@+id/ad_title"
  34.                 android:layout_width="match_parent"
  35.                 android:layout_height="34dp"
  36.                 android:layout_marginBottom="16dp"
  37.                 android:alpha="1"
  38.                 android:textColor="#000000"
  39.                 android:textSize="@dimen/hiad_text_13_sp" />
  40.             <TextView
  41.                 android:id="@+id/ad_source"
  42.                 android:layout_width="wrap_content"
  43.                 android:layout_height="14dp"
  44.                 android:layout_marginTop="36dp"
  45.                 android:alpha="0.6"
  46.                 android:maxWidth="132dp"
  47.                 android:textColor="#666666"
  48.                 android:textSize="@dimen/hiad_text_9_sp" />
  49.             <TextView
  50.                 android:id="@+id/ad_flag"
  51.                 android:layout_width="16dp"
  52.                 android:layout_height="14dp"
  53.                 android:layout_marginStart="8dp"
  54.                 android:layout_marginTop="36dp"
  55.                 android:layout_toEndOf="@+id/ad_source"
  56.                 android:background="@drawable/native_flag_rounded_corners_shape"
  57.                 android:gravity="center"
  58.                 android:text="@string/ad_flag"
  59.                 android:textColor="#FFFFFF"
  60.                 android:textSize="8sp"
  61.                 android:textStyle="bold" />
  62.             <Button
  63.                 android:id="@+id/ad_call_to_action"
  64.                 android:layout_width="44dp"
  65.                 android:layout_height="@dimen/hiad_16_dp"
  66.                 android:layout_alignParentEnd="true"
  67.                 android:layout_marginTop="34dp"
  68.                 android:background="@drawable/native_button_rounded_corners_shape"
  69.                 android:textColor="#FFFFFF"
  70.                 android:textSize="6sp" />
  71.         </RelativeLayout>
  72.     </RelativeLayout>
  73. </com.huawei.hms.ads.nativead.NativeView>

The following figure shows a medium template:

The content of the XML layout file is as follows:

  1. <com.huawei.hms.ads.nativead.NativeView xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:id="@+id/native_video_view"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="wrap_content"
  5.     android:layout_centerInParent="true"
  6.     android:background="#FFFFFF"
  7.     android:orientation="vertical">
  8.     <RelativeLayout
  9.         android:id="@+id/background"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="wrap_content">
  12.         <com.huawei.hms.ads.nativead.MediaView
  13.             android:id="@+id/ad_media"
  14.             android:layout_width="match_parent"
  15.             android:layout_height="wrap_content" />
  16.         <RelativeLayout
  17.             android:id="@+id/left_bottom_view"
  18.             android:layout_width="wrap_content"
  19.             android:layout_height="wrap_content"
  20.             android:layout_below="@id/ad_media">
  21.             <TextView
  22.                 android:id="@+id/ad_title"
  23.                 android:layout_width="180dp"
  24.                 android:layout_height="19dp"
  25.                 android:layout_marginStart="24dp"
  26.                 android:layout_marginTop="16dp"
  27.                 android:alpha="1"
  28.                 android:textColor="#000000"
  29.                 android:textSize="@dimen/hiad_text_13_sp" />
  30.             <TextView
  31.                 android:id="@+id/ad_source"
  32.                 android:layout_width="wrap_content"
  33.                 android:layout_height="19dp"
  34.                 android:layout_below="@id/ad_title"
  35.                 android:layout_marginStart="24dp"
  36.                 android:layout_marginTop="2dp"
  37.                 android:layout_marginBottom="16dp"
  38.                 android:alpha="0.6"
  39.                 android:maxWidth="158dp"
  40.                 android:textColor="#666666"
  41.                 android:textSize="@dimen/hiad_text_12_sp" />
  42.             <TextView
  43.                 android:id="@+id/ad_flag"
  44.                 android:layout_width="20dp"
  45.                 android:layout_height="14dp"
  46.                 android:layout_marginStart="8dp"
  47.                 android:layout_marginTop="40dp"
  48.                 android:layout_toEndOf="@+id/ad_source"
  49.                 android:background="@drawable/native_flag_rounded_corners_shape"
  50.                 android:gravity="center"
  51.                 android:text="@string/ad_flag"
  52.                 android:textColor="#FFFFFF"
  53.                 android:textSize="8sp"
  54.                 android:textStyle="bold" />
  55.         </RelativeLayout>
  56.         <RelativeLayout
  57.             android:id="@+id/right_bottom_view"
  58.             android:layout_width="wrap_content"
  59.             android:layout_height="wrap_content"
  60.             android:layout_below="@id/ad_media"
  61.             android:layout_alignParentEnd="true">
  62.             <Button
  63.                 android:id="@+id/ad_call_to_action"
  64.                 android:layout_width="72dp"
  65.                 android:layout_height="26dp"
  66.                 android:layout_alignParentEnd="true"
  67.                 android:layout_marginTop="23dp"
  68.                 android:layout_marginEnd="52dp"
  69.                 android:layout_marginBottom="23dp"
  70.                 android:background="@drawable/native_button_rounded_corners_shape"
  71.                 android:textColor="#FFFFFF"
  72.                 android:textSize="10sp" />
  73.         </RelativeLayout>
  74.     </RelativeLayout>
  75. </com.huawei.hms.ads.nativead.NativeView>

The content of the drawable/native_flag_rounded_corners_shape.xml file is as follows:

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <solid android:color="#CCCCCC" />
  3.     <padding
  4.         android:bottom="1dp"
  5.         android:left="1dp"
  6.         android:right="1dp"
  7.         android:top="1dp" />
  8.     <corners
  9.         android:bottomLeftRadius="2dp"
  10.         android:bottomRightRadius="2dp"
  11.         android:topLeftRadius="2dp"
  12.         android:topRightRadius="2dp" />
  13. </shape>

The content of the drawable/native_button_rounded_corners_shape.xml file is as follows:

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <solid android:color="#214EF3" />
  3.     <padding
  4.         android:bottom="1dp"
  5.         android:left="1dp"
  6.         android:right="1dp"
  7.         android:top="1dp" />
  8.     <corners
  9.         android:bottomLeftRadius="20dp"
  10.         android:bottomRightRadius="20dp"
  11.         android:topLeftRadius="20dp"
  12.         android:topRightRadius="20dp" />
  13. </shape>

5. Native Ad Options

The NativeAdConfiguration object allows you to customize native ads. 

The sample code is as follows:

  1. // "testy63txaom86" is a dedicated test ad slot ID. 
  2. NativeAdLoader.Builder builder = new NativeAdLoader.Builder(this, "testy63txaom86");
  3. NativeAdConfiguration adConfiguration = new NativeAdConfiguration.Builder()
  4.         .setVideoConfiguration(videoConfiguration) // Set video attributes.
  5.         .setRequestCustomDislikeThisAd(true) // Set whether to customize "Dislike This Ad".
  6.         .build();
  7. builder.setNativeAdOptions(adConfiguration);

For details about the methods, please refer to NativeAdConfiguration.Builder in the API Reference.

6. Dislike This Ad

The "Dislike This Ad" feature allows users to block the ads that they are not interested in.

An example is as follows.

            

Figure 1 Native ad                                                  Figure 2 Ad options


            

Figure 3 Reasons for disliking this ad                    Figure 4 Native ad disliked


If you do not want to display the view showing that an ad is disliked, you can call the setDislikeAdListener() method in the NativeAd class to set the ad disliking event listener for the NativeAd object and add custom implementation to the onAdDisliked() method in the listener. When an ad is disliked, the SDK calls back the onAdDisliked() method in the listener.

The sample code is as follows:

  1. NativeAdLoader.Builder builder = new NativeAdLoader.Builder(this, "testy63txaom86");
  2. builder.setNativeAdLoadedListener(new NativeAd.NativeAdLoadedListener() {
  3.     @Override
  4.     public void onNativeAdLoaded(NativeAd nativeAd) {
  5.         ...
  6.         nativeAd.setDislikeAdListener(new DislikeAdListener() {
  7.             @Override
  8.             public void onAdDisliked() {
  9.                 // TODO Call this method when an ad is disliked.
  10.             }
  11.         });
  12.     }
  13. });

You can use the setRequestCustomDislikeThisAd() method in the NativeAdConfiguration.Builder class to set whether to customize "Dislike This Ad". If "Dislike This Ad" is customized, the "Why this ad" icon will be displayed for native ads. To hide this icon, call the setChoicesPosition() method in the NativeAdConfiguration.Builder class.

The sample code is as follows:

  1. NativeAdConfiguration adConfiguration = new NativeAdConfiguration.Builder()
  2.         .setRequestCustomDislikeThisAd(true) // Customize "Dislike This Ad".
  3.         .setChoicesPosition(NativeAdConfiguration.ChoicesPosition.INVISIBLE) // Hide the "Why this ad" icon.
  4.         .build();
  5. NativeAdLoader nativeAdLoader = builder.setNativeAdOptions(adConfiguration).build();
Caution:
If you hide the "Why this ad" icon, it is strongly recommended that you add the "Why this ad" option to the custom list of reasons for disliking an ad. When a user taps the "Why this ad" option, call the gotoWhyThisAdPage() method in the NativeView class to show the screen about why the ad is displayed.

When a native ad is loaded, the NativeAd.isCustomDislikeThisAdEnabled() method can be called to determine whether "Dislike This Ad" is customized. In addition, a list of reasons for disliking this ad can be obtained by using the NativeAd.getDislikeAdReasons() method. You can customize how to display the list on the UI.

The sample code is as follows:

  1. if (nativeAd.isCustomDislikeThisAdEnabled()) { 
  2.     List<DislikeAdReason> dislikeAdReasons = nativeAd.getDislikeAdReasons();  
  3. }

You can use the NativeAd.dislikeAd() method to send the selected reason to the HUAWEI Ads SDK.

The sample code is as follows:

  1. nativeAd.dislikeAd(dislikeAdReason);

7. Testing a Native Ad

When testing native ads, use the dedicated test ad slot ID to obtain test ads. This avoids invalid ad clicks during the test. The test ad slot ID is used only for function commissioning. Before releasing your app, apply for a formal ad slot ID and replace the test ad slot ID with the formal one.

The following table lists the dedicated ad slot IDs for native ad testing.

Ad Format

Display Form

Size

Aspect Ratio

Test Ad Slot ID

Native

Large image with text

1080 x 607

16:9

testu7m3hc4gvm

Native

Small image with text

225 x 150

3:2

testb65czjivt9

Native

Video with text

640 x 360

16:9

testy63txaom86

 

You can download the sample code for native ads and execute the code. The following screen will be displayed.