Google Ads MediaView not correctly resizing height to wrap_content when displaying image

Question

I got an email from AdMob today saying:

Change to native ads policy: Native ads will require MediaView to render the video or main image asset. In an effort to help you deliver a better ad experience more easily, beginning October 29th, native ads will require MediaView to render the video or main image asset. Ad units not compliant by this date will stop serving ads, which could impact your ad revenue.

I tried this out in my Android app, removing the separate handling of images with ImageView and video with MediaView, but I have found that the MediaView is not resizing the view's height according to the height of the image it displays.

In this codelab example from Google, a fixed height and width for the MediaView are used. I cannot do this, as this screen is responsive to the screen size, which will change depending on the device. The fact that the image can be dynamically resized is one of the main benefits for using UnifiedNativeAds instead of predefined ads such as banners.

This is how I need to be displaying the MediaView, using match_parent for width and wrap_content for height.

<com.google.android.gms.ads.formats.MediaView
            android:id="@+id/ad_media"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:adjustViewBounds="true"
            android:scaleType="fitXY"/>

This is what I am currently getting from the above code

This is what I need and expect it to look like from using wrap_content

In the previous case where we were able to render the images separately using ImageView, the wrap_content value correctly sized the image.

Does anyone have a workaround for this? How can I follow the new Google requirements without hardcoding the MediaView's height?

My full code can be found here, in my demo app on github.

Answer 1

mediaView.setOnHierarchyChangeListener(new ViewGroup.OnHierarchyChangeListener() {
    @Override
    public void onChildViewAdded(View parent, View child) {
        if (child instanceof ImageView) {
            ImageView imageView = (ImageView) child;
            imageView.setAdjustViewBounds(true);
        }
    }

    @Override
    public void onChildViewRemoved(View parent, View child) {}
});

Answer 2

I was facing the same problem, after trying a lot with trial and error, I found that wrapping <FrameLayout...>(in which you are adding UnifiedNativeAdView) with ScrollView will resolve this problem.

Answer 3

If implementing Advanced Native Ads, use "imageScaleType" property of MediaView as suggested here in the official docs https://developers.google.com/admob/android/native/advanced#setting_imagescaletype

adView.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP)

or any other ScaleType as per requirement.

Answer 4

To ensure that all media are as wide as possible and that they respect a maximum height (so there are no surprises depending on the dimensions of the media).

XML

<com.google.android.gms.ads.formats.MediaView
     android:id="@+id/ad_media"
     android:layout_gravity="center_horizontal"
     android:layout_width="match_parent"
     android:layout_height="wrap_content" />

JAVA

mediaView.setOnHierarchyChangeListener(new ViewGroup.OnHierarchyChangeListener() {
        @Override
        public void onChildViewAdded(View parent, View child) {
            float scale = context.getResources().getDisplayMetrics().density;
            
            int maxHeightPixels = 175;
            int maxHeightDp = (int) (maxHeightPixels * scale + 0.5f);

            if (child instanceof ImageView) { //Images
                ImageView imageView = (ImageView) child;
                imageView.setAdjustViewBounds(true);
                imageView.setMaxHeight(maxHeightDp);

            } else { //Videos
                ViewGroup.LayoutParams params = child.getLayoutParams();
                params.height = maxHeightDp;
                child.setLayoutParams(params);
            }
        }

        @Override
        public void onChildViewRemoved(View parent, View child) {}
    });