Native Ads MediaView doesn't match constraint in Huawei Ads Implementation

748 views Asked by At

I’m implementing the Native Ads in Android using Native Ads - Huawei documentation. When I come across to change the height of the MediaView according to Screen Size (0 dp), I have found that it couldn't be changed.

Even though I have implemented the setOnHierarchyChangeListener, but it doesn't work either. The following is what I have achieved currently.

File native_ad.xml

<com.huawei.hms.ads.nativead.NativeView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/native_video_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:background="#FFFFFF"
    android:orientation="vertical">
      <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.huawei.hms.ads.nativead.MediaView
                android:id="@+id/ad_media"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.8"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toTopOf="@id/constraintLayout"/>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/constraintLayout"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintHeight_percent="0.2"
                android:background="@drawable/white_bg"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/ad_media">

                <TextView
                    ... />

                <TextView
                    ... />

                <TextView
                  .. />

                <Button
                   ... />

            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </com.huawei.hms.ads.nativead.NativeView>

Function inItNativeAdView

private fun initNativeAdView(nativeAd: NativeAd?, nativeView: NativeView) {
    nativeView.titleView = nativeView.findViewById(R.id.ad_title)
    (nativeView.titleView as TextView).text = nativeAd!!.title

    nativeView.mediaView = nativeView.findViewById(R.id.ad_media)
    nativeView.mediaView.setMediaContent(nativeAd.mediaContent)
    nativeView.mediaView.setOnHierarchyChangeListener(object : OnHierarchyChangeListener {
        override fun onChildViewAdded(parent: View, child: View) {
          *//*  if (child is ImageView) {
                val imageView: ImageView = child as ImageView
                imageView.adjustViewBounds = true
            }*//*
            val scale = context.resources.displayMetrics.density

            val maxHeightPixels = 175
            val maxHeightDp = (maxHeightPixels * scale + 0.5f).toInt()

            if (child is ImageView) { //Images
                val imageView = child
                imageView.adjustViewBounds = true
                imageView.maxHeight = maxHeightDp
            } else { //Videos
                val params = child.layoutParams
                params.height = maxHeightDp
                child.layoutParams = params
            }
        }

        override fun onChildViewRemoved(parent: View, child: View) {}
    })
}

Implementation of setOnHierarchyChangeListener doesn't change the height of the mediaView.

Currently I’m viewing the native ads as follows:

Enter image description here

I expect something like this with the dynamic mediaView:

Enter image description here

How can I fix this?

3

There are 3 answers

6
zhangxaochen On

According to our analysis, if initNativeAdView is not invoked, the ads layout is also generated, but the ads content is missing. It follows that ImageView is not loaded after getting ads. Therefore, setting the height through OnHierarchyChangeListener is not feasible.

However, you can set the height of the MediaView directly like following:

        MediaView mediaView = nativeView.getMediaView();
        ViewGroup.LayoutParams params = mediaView.getLayoutParams();
        params.height = 200;
        mediaView.setLayoutParams(params);

Enter image description here


You could try to change MediaView like the following:

<com.huawei.hms.ads.nativead.MediaView
                android:id="@+id/ad_media"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.8"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toTopOf="@id/constraintLayout"/>
5
Zinna On

Automatically filling the screen or the portion of a screen by the current widget only works for LinearLayout.

In the sample XML file, a relative layout is used. To make the 0dp plus layout_weight control work with MediaView, please change the layout to Linear from Relative in the native_small_template.xml file in the sample code as shown below. The image from Native ads will be scaled accordingly as shown in the image below.

For using ContraintLayout, please use app:layout_constraintVertical_weight="1", or app:layout_constraintHorizontal_weight="1", depending on the layout design, to make it scalable.

Enter image description here

Enter image description here

To answer your further question:

For videos, it is better not to change the aspect ratio as ttljtw said.

But changing the vertical size based on video width could be implemented using the same principle used for images. The display width could be set in the init process. A percentage of some dimension could be used to set the display width through the layoutParams.width property.

Enter image description here

Enter image description here

Scale up the video width example is give below

This could be set it in the “initNativeAdView” if following the original sample code name.

Enter image description here

Scale is shown here:

Enter image description here

2
ttljtw On

The aspect ratio of the video is fixed. Why do you have to set the height beyond the width of the screen?

I think the ad provider will consider the effect of the ad and limit the size of the material. As the previous picture you post, the white space supplements the heights that the video can't reach.

Or you can use Layout Inspector in Android Studio, find the video's layout element and modify it. However, this can be complicated and prone to problems.

Enter image description here