Pangle

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

• pangle_native_ad_unit_layout.xml 샘플

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/pangle_native_title"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:singleLine="true"
        android:textColor="@color/black"
        android:text="pangle_native_title"
        android:textSize="14sp" />

    <FrameLayout
        android:id="@+id/pangle_native_media_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@id/pangle_native_title"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:background="@color/ads_blue_600"
        android:scaleType="centerCrop" />

    <ImageView
        android:id="@+id/pangle_native_icon_image"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_below="@id/pangle_native_media_view"
        android:layout_marginLeft="10dp"
        android:layout_marginStart="10dp" />

    <TextView
        android:id="@+id/pangle_native_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/pangle_native_media_view"
        android:layout_toRightOf="@id/pangle_native_icon_image"
        android:layout_toEndOf="@id/pangle_native_icon_image"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="5dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="15dp"
        android:ellipsize="end"
        android:singleLine="true"
        android:textColor="@color/black"
        android:text="pangle_native_text"
        android:textSize="14sp" />

    <Button
        android:id="@+id/pangle_native_cta"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="3dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginRight="14dp"
        android:layout_marginEnd="14dp"
        android:text="pangle_native_cta"
        android:background="@null"
        android:layout_alignTop="@+id/pangle_native_text"
        android:textSize="10sp"
        />
</RelativeLayout>

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

PangleViewBinder pangleViewBinder = new PangleViewBinder.Builder(R.id.pangle_native_ad_view, R.layout.pangle_native_ad_unit_layout)
        .titleViewId(R.id.pangle_native_title)
        .descriptionViewId(R.id.pangle_native_text)
        .iconViewId(R.id.pangle_native_icon_image)
        .mediaViewId(R.id.pangle_native_media_view)
        .creativeButtonViewId(R.id.pangle_native_cta)
        .build();
adPopcornSSPNativeAd.setPangleViewBinder(pangleViewBinder);

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