Why native ads shrink when created manually

mopub
android

#1

that is the code and layout I’m using for rendering native ads:

private NativeAdService(Context context) {
        moPubNative = new MoPubNative(context.getApplicationContext(), "XXX", new MoPubNative.MoPubNativeNetworkListener() {
            @Override
            public void onNativeLoad(NativeAd nativeAd) {
                NativeAdService.this.nativeAd = nativeAd;
            }

            @Override
            public void onNativeFail(NativeErrorCode errorCode) {
            }
        });

        ViewBinder viewBinder = new ViewBinder.Builder(R.layout.native_ad_layout)
                .iconImageId(R.id.native_ad_icon_image)
                .titleId(R.id.native_ad_title)
                .textId(R.id.native_ad_text)
                .build();

        MoPubStaticNativeAdRenderer moPubStaticNativeAdRenderer = new MoPubStaticNativeAdRenderer(viewBinder);
        moPubNative.registerAdRenderer(moPubStaticNativeAdRenderer);

        moPubNative.makeRequest();

    }

  View view = nativeAd.createAdView(context, null);
        nativeAd.renderAdView(view);
        return view;
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_marginRight="8dp"
        android:background="@color/colorBlueText">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:background="@color/colorBlackText">

            <ImageView
                android:id="@+id/native_ad_icon_image"
                android:layout_width="40dp"
                android:layout_height="40dp" />

            <TextView
                android:id="@+id/native_ad_title"
                android:layout_width="2dp"
                android:layout_height="29dp"
                android:layout_marginBottom="0dp"
                android:layout_marginLeft="0dp"
                android:layout_marginTop="8dp"
                android:text="Title" />

            <TextView
                android:id="@+id/native_ad_text"
                android:layout_width="20dp"
                android:layout_height="49dp"
                android:layout_marginBottom="-1dp"
                android:layout_marginLeft="0dp"
                android:layout_marginRight="8dp"
                android:text="AdText" />

        </RelativeLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

and this is what I get:


#2

@ragrazila, the structure and distribution of elements in your layout causes the overlapping you are seeing. You are using a RelativeLayout and all of its children are not positioned relative to each other, which is how the distribution should be in RelativeLayouts. If you check the XML, they are all positioned over each other.

We have a layout available here that you can use with your ViewBinder. As a reminder, you will need a main image as well.

You can find MoPub’s native ad best practices here when you design your native ad.

Let us know if you continue seeing the issue!