Ad Kit: Native Video Ads - Huawei Developers

Ad Kit: 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:
VideoConfiguration
The VideoConfiguration class is used to configure native videos. The sample code is as follows:
Code:
// "testy63txaom86" is a dedicated test ad slot ID.
NativeAdLoader.Builder builder = new NativeAdLoader.Builder(this, "testy63txaom86");
VideoConfiguration videoConfiguration = new VideoConfiguration.Builder()
// Set whether to play video assets in mute mode. The default value is true.
.setStartMuted(true)
.build();
NativeAdConfiguration adConfiguration = new NativeAdConfiguration.Builder()
.setVideoConfiguration(videoConfiguration)
.build();
builder.setNativeAdOptions(adConfiguration);
VideoOperator
The VideoOperator class is used to obtain video information and control videos. The controller instance needs to be obtained by calling the NativeAd.getVideoOperator() method. This method always returns the VideoOperator object, regardless of whether the ad contains a video asset.
Code:
VideoOperator videoOperator = nativeAd.getVideoOperator();
VideoOperator provides the hasVideo() method to determine whether the ad contains a video asset.
The VideoOperator.VideoLifecycleListener class can be used to listen for events during video playback.
Code:
videoOperator.setVideoLifecycleListener(new VideoOperator.VideoLifecycleListener() {
@Override
public void onVideoEnd() {
// TODO
...
super.onVideoEnd();
}
});
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.
Small Template
The following figure shows a small template:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
The content of the XML layout file is as follows:
Code:
<com.huawei.hms.ads.nativead.NativeView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/native_small_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:background="#FFFFFF"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="vertical">
<com.huawei.hms.ads.nativead.MediaView
android:id="@+id/ad_media"
android:layout_width="75dp"
android:layout_height="50dp"
android:layout_marginStart="24dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:background="#8BC34A" />
<RelativeLayout
android:id="@+id/center_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="107dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="48dp"
android:layout_marginBottom="8dp"
android:background="#FFFFFF">
<TextView
android:id="@+id/ad_title"
android:layout_width="match_parent"
android:layout_height="34dp"
android:layout_marginBottom="16dp"
android:alpha="1"
android:textColor="#000000"
android:textSize="@dimen/hiad_text_13_sp" />
<TextView
android:id="@+id/ad_source"
android:layout_width="wrap_content"
android:layout_height="14dp"
android:layout_marginTop="36dp"
android:alpha="0.6"
android:maxWidth="132dp"
android:textColor="#666666"
android:textSize="@dimen/hiad_text_9_sp" />
<TextView
android:id="@+id/ad_flag"
android:layout_width="16dp"
android:layout_height="14dp"
android:layout_marginStart="8dp"
android:layout_marginTop="36dp"
android:layout_toEndOf="@+id/ad_source"
android:background="@drawable/native_flag_rounded_corners_shape"
android:gravity="center"
android:text="@string/ad_flag"
android:textColor="#FFFFFF"
android:textSize="8sp"
android:textStyle="bold" />
<Button
android:id="@+id/ad_call_to_action"
android:layout_width="44dp"
android:layout_height="@dimen/hiad_16_dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="34dp"
android:background="@drawable/native_button_rounded_corners_shape"
android:textColor="#FFFFFF"
android:textSize="6sp" />
</RelativeLayout>
</RelativeLayout>
</com.huawei.hms.ads.nativead.NativeView>
Medium Template
The following figure shows a medium template:
The content of the XML layout file is as follows:
Code:
<com.huawei.hms.ads.nativead.NativeView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/native_video_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#FFFFFF"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/background"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.huawei.hms.ads.nativead.MediaView
android:id="@+id/ad_media"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RelativeLayout
android:id="@+id/left_bottom_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ad_media">
<TextView
android:id="@+id/ad_title"
android:layout_width="180dp"
android:layout_height="19dp"
android:layout_marginStart="24dp"
android:layout_marginTop="16dp"
android:alpha="1"
android:textColor="#000000"
android:textSize="@dimen/hiad_text_13_sp" />
<TextView
android:id="@+id/ad_source"
android:layout_width="wrap_content"
android:layout_height="19dp"
android:layout_below="@id/ad_title"
android:layout_marginStart="24dp"
android:layout_marginTop="2dp"
android:layout_marginBottom="16dp"
android:alpha="0.6"
android:maxWidth="158dp"
android:textColor="#666666"
android:textSize="@dimen/hiad_text_12_sp" />
<TextView
android:id="@+id/ad_flag"
android:layout_width="20dp"
android:layout_height="14dp"
android:layout_marginStart="8dp"
android:layout_marginTop="40dp"
android:layout_toEndOf="@+id/ad_source"
android:background="@drawable/native_flag_rounded_corners_shape"
android:gravity="center"
android:text="@string/ad_flag"
android:textColor="#FFFFFF"
android:textSize="8sp"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/right_bottom_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ad_media"
android:layout_alignParentEnd="true">
<Button
android:id="@+id/ad_call_to_action"
android:layout_width="72dp"
android:layout_height="26dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="23dp"
android:layout_marginEnd="52dp"
android:layout_marginBottom="23dp"
android:background="@drawable/native_button_rounded_corners_shape"
android:textColor="#FFFFFF"
android:textSize="10sp" />
</RelativeLayout>
</RelativeLayout>
</com.huawei.hms.ads.nativead.NativeView>
The content of the drawable/native_flag_rounded_corners_shape.xml file is as follows:
Code:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#CCCCCC" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners
android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
The content of the drawable/native_button_rounded_corners_shape.xml file is as follows:
Code:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#214EF3" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
</shape>