Native Ad Layout Setting Guide

BidmadSDK를 이용하여 Native Ad 레이아웃을 구성하려면 아래 5가지 구성 요소가 필요합니다.

• mediaView : 네트워크에서 받은 광고 이미지를 출력할 뷰
• img_icon : 네트워크에서 받은 광고 아이콘을 출력할 뷰
• txt_body : 본문 노출을 위한 텍스트 뷰
• txt_title : 타이틀 노출을 위한 텍스트 뷰
• adCallToActionButton : 액션 수행을 위한 버튼 뷰

아래는 Sample에 첨부된 Native Ad Layout 입니다.

*native_large_ad(Sample)

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff">

	<RelativeLayout
		android:layout_width="match_parent"
		android:layout_height="wrap_content">


		<FrameLayout
			android:id="@+id/imageGroup"
			android:layout_alignParentTop="true"
			android:layout_width="match_parent"
			android:layout_height="200dp"
			android:layout_centerVertical="true">

			<ImageView
				android:id="@+id/mediaView"
				android:layout_width="match_parent"
				android:layout_height="match_parent"/>

		</FrameLayout>

		<RelativeLayout
			android:layout_width="match_parent"
			android:layout_height="70dp"
			android:layout_below="@id/imageGroup">
			<FrameLayout
				android:id="@+id/iconGroup"
				android:layout_width="55dp"
				android:layout_height="55dp"
				android:layout_centerVertical="true"
				android:layout_marginLeft="10dp"
				android:layout_marginRight="10dp">
				<ImageView
					android:id="@+id/img_icon"
					android:layout_width="match_parent"
					android:layout_height="match_parent"/>


			</FrameLayout>

			<Button
				android:id="@+id/adCallToActionButton"
				android:layout_width="50dp"
				android:layout_height="wrap_content"
				android:layout_alignParentRight="true"
				android:layout_centerVertical="true"
				android:background="@drawable/activity_btn"
				android:layout_marginRight="10dp"
				android:clickable="false"
				android:text=""
				android:textColor="@android:color/white"
				android:textSize="11dp" />

			<TextView
				android:id="@+id/txt_title"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_toLeftOf="@id/adCallToActionButton"
				android:layout_toRightOf="@id/iconGroup"
				android:ellipsize="end"
				android:maxLines="1"
				android:layout_marginTop="10dp"
				android:textColor="#000000"
				android:textSize="15dp"
				android:textStyle="bold" />

			<TextView
				android:id="@+id/txt_body"
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:layout_below="@id/txt_title"
				android:layout_toLeftOf="@id/adCallToActionButton"
				android:layout_toRightOf="@id/iconGroup"
				android:ellipsize="end"
				android:maxLines="2"
				android:textColor="#777777"
				android:textSize="12dp" />

		</RelativeLayout>
	</RelativeLayout>
</FrameLayout>

마지막으로 실제 Native Ad가 노출될 View에 Container Layout을 생성하는 것으로 Layout 구성은 작업은 완료 됩니다.

*activity_native(Sample)

<FrameLayout
    android:id="@+id/native_ad_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

구성한 Native Ad Layout을 Bidmad에 등록하여 광고 요청을 수행하세요. 광고가 로드 되었다면 BidmadNativeAd에서 getNativeLayout 완성된 Layout가져와 native_ad_container에 Addview 하세요.

nativeAd = new BidmadNativeAd(this, "YOUR ZONE ID");

nativeAd.setViewForInteraction(
        R.layout.native_large_ad,
        R.id.mediaView,
        R.id.img_icon,
        R.id.txt_body,
        R.id.txt_title,
        R.id.adCallToActionButton
);

nativeAd.setNativeListener(new NativeListener() {
    @Override
    public void onLoadAd() {
        layoutNative.removeAllViews();
        layoutNative.addView(nativeAd.getNativeLayout());
        callbackStatus.append("onLoadAd() Called\n");
    }

    @Override
    public void onFailedAd() {
        callbackStatus.append("onFailedAd() Called\n");
    }

    @Override
    public void onClickAd(){
        callbackStatus.append("onClickAd() Called\n");
    }
});


nativeAd.load();