Vungle (LiftOff)

Android 네이티브 광고 미디에이션 레이아웃 가이드 입니다.

• vungle_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/native_ad_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal"
            android:padding="5dp"
            android:weightSum="1">

            <ImageView
                android:id="@+id/imgAdIcon"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:contentDescription="@string/empty" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:orientation="vertical">

                <TextView
                    android:id="@+id/lbAdTitle"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:hint="Title"
                    android:lines="1"
                    android:textColor="@android:color/black"
                    android:textSize="15sp" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <TextView
                        android:id="@+id/lbAdRating"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginRight="10dp"
                        android:hint="rate" />

                    <TextView
                        android:id="@+id/lbAdBody"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:gravity="center_vertical"
                        android:hint="asdasdsadasd"
                        android:lines="2"
                        android:textColor="@android:color/black"
                        android:textSize="12sp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <com.vungle.ads.internal.ui.view.MediaView
            android:id="@+id/pnlVideoAd"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:gravity="center" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp">

            <Button
                android:id="@+id/btnAdCta"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:layout_alignParentRight="true"
                android:background="#4286F4"
                android:paddingLeft="3dp"
                android:paddingRight="3dp"
                android:textColor="@android:color/white"
                android:textSize="12sp"
                android:visibility="visible" />

            <TextView
                android:id="@+id/lbAdSponsor"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:hint="sponsored"
                android:textSize="12sp" />
        </RelativeLayout>
    </LinearLayout>
</FrameLayout>

xml에서 생성한 ui component를 sdk에서 제공하는 setVungleViewBinder API를 이용해 아래와 같이 설정해 줍니다.

VungleViewBinder vungleViewBinder = new VungleViewBinder.Builder(R.id.vungle_native_ad_view, R.layout.vungle_native_ad_layout)
                .titleViewId(R.id.lbAdTitle)
                .bodyViewId(R.id.lbAdBody)
                .iconViewId(R.id.imgAdIcon)
                .ctaViewId(R.id.btnAdCta)
                .sponsoredByViewId(R.id.lbAdSponsor)
                .mediaViewId(R.id.pnlVideoAd)
                .ratingViewId(R.id.lbAdRating)
                .build();
adPopcornSSPNativeAd.setVungleViewBinder(vungleViewBinder);

VungleViewBinder Builder 생성 시, view id(R.id.vungle_native_ad_view)와 layout id(R.layout.vungle_native_ad_layout)는 필수로 넘겨주어야 하며, 그 외 ui component에 대해서는 사용하는 리소스에 대해서만 설정해 주면 됩니다.