> For the complete documentation index, see [llms.txt](https://adpopcornssp.gitbook.io/ssp-sdk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adpopcornssp.gitbook.io/ssp-sdk/sdk/android/undefined-7/undefined.md).

# 네이티브 레이아웃 가이드

## 1. 네이티브 레이아웃 기본 설정

네이티브 구성을 위한 기본 AdPopcornSSPNativeAdView 을 생성합니다.

```xml
<?xml version="1.0" encoding="utf-8"?>
<com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/adpopcorn_native_ad"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
</com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAd>
```

## 2. 네이티브 미디에이션 레이아웃 설정

AdPopcornSSPNativeAdView에 의해 관리될 네이티브 실제 광고 영역을 연동해 줍니다.

아래 공통, 옵셔널 정보를 기반으로 레이아웃을 구성해 주세요.

#### 지원 Asset 정보

* 공통(모든 미디에이션 업체 지원되는 Asset)

  * layoutResId (int) — 네이티브 광고 레이아웃 리소스 ID
  * titleViewId (TextView) — 제목
  * bodyViewId (TextView) — 본문 (CoupangCPM 제외)
  * callToActionViewId (Button) — CTA 버튼
  * iconViewId (ImageView) — 아이콘
  * mediaContainerViewId (FrameLayout) — 미디어 영역 컨테이너

* 옵셔널  (미디에이션 별 지원이 다름)
  * advertiserViewId (TextView) — Admob, GAM, ADOP, AdForus, NAM
  * starRatingViewId (RatingBar 또는 TextView) — Admob, GAM, ADOP, AdForus, CoupangCPM, Mintegral, Vungle, Fyber, InMobi
  * priceViewId (TextView) — Admob, GAM, ADOP, AdForus, CoupangCPM
  * logoViewId (ImageView) — CoupangCPM
  * sponsoredViewId (TextView) — FAN, Vungle, Fyber, InMobi, Moloco
  * socialContextViewId (TextView) — FAN, NAM
  * adChoiceContainerViewId (FrameLayout) — FAN, NAM, CoupangCPM, Mintegral, InMobi
  * storeViewId (TextView) — Admob, GAM, ADOP, AdForus
  * mainImageViewId (ImageView) — MobWith (공통 항목 mediaContainer 내부에 배치)

{% hint style="danger" %}
업체마다 필수 구성 asset 정보가 조금씩 다르나, 공통 항목은 모두 세팅하면 정상적으로 광고가 노출됩니다.\
&#x20;단, NAM 노출을 위해서는 옵셔널인 adChoiceContainerView가 반드시 설정되어야 합니다.
{% endhint %}

## 3. 네이티브 샘플

위 코드 기반으로 작성한 샘플입니다.

<details>

<summary>메인 XML (main_activity.xml)</summary>

```xml
<?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="match_parent"
    android:background="#ffffff"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="NativeAdView 통합"
        android:textSize="18sp"
        android:textStyle="bold"
        android:padding="12dp" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.igaworks.ssp.part.nativead.AdPopcornSSPNativeAdView
            android:id="@+id/native_ad_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="12dp" />
    </ScrollView>
</LinearLayout>
```

</details>

<details>

<summary>미디에이션 레이아웃 XML(native_ad_layout.xml)</summary>

```xml
<?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:orientation="vertical"
    android:padding="10dp"
    android:background="#FFFFFF">

    <!-- 상단: 아이콘 + 제목/본문/광고주 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical">

        <ImageView
            android:id="@+id/icon"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginEnd="10dp" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:textStyle="bold"
                android:textColor="#000000" />

            <TextView
                android:id="@+id/body"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="12sp"
                android:maxLines="2"
                android:textColor="#666666" />

            <TextView
                android:id="@+id/social_context"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="11sp"
                android:textColor="#999999"
                android:ellipsize="end"
                android:maxLines="1"
                android:visibility="gone" />

            <TextView
                android:id="@+id/advertiser"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="11sp"
                android:textColor="#999999"
                android:visibility="gone" />
        </LinearLayout>

        <ImageView
            android:id="@+id/logo"
            android:layout_width="24dp"
            android:layout_height="24dp" />

        <TextView
            android:id="@+id/sponsored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="11sp"
            android:textColor="#999999"
            android:layout_marginStart="4dp"
            android:visibility="gone" />

        <!-- AdChoice 컨테이너 -->
        <FrameLayout
            android:id="@+id/ad_choice_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:visibility="gone" />
    </LinearLayout>

    <!-- 미디어 컨테이너 -->
    <FrameLayout
        android:id="@+id/media_container"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:minHeight="200dp"
        android:layout_marginTop="8dp">

        <ImageView
            android:id="@+id/main_image"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:scaleType="centerCrop" />

    </FrameLayout>

    <!-- 하단: 별점 + 가격 + 스폰서 -->
    <LinearLayout
        android:id="@+id/optional_row"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:layout_marginTop="4dp">

        <RatingBar
            android:id="@+id/star_rating"
            style="?android:attr/ratingBarStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:numStars="5"
            android:isIndicator="true"
            android:visibility="gone" />

        <TextView
            android:id="@+id/price"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:textColor="#333333"
            android:layout_marginStart="8dp"
            android:visibility="gone" />
    </LinearLayout>

    <!-- CTA 버튼 -->
    <Button
        android:id="@+id/cta"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginTop="8dp"
        android:background="#4CAF50"
        android:textColor="#FFFFFF"
        android:textSize="14sp" />

</LinearLayout>
```

</details>

<details>

<summary>Code 샘플</summary>

```java
private void sampleNativeView(){
    AdPopcornSSPNativeAdView adPopcornSSPNativeAd = findViewById(R.id.native_ad_view);
    adPopcornSSPNativeAd.setPlacementId("Native_PlacementID");
    MediationViewBinder viewBinder = 
                new MediationViewBinder.Builder(R.layout.native_ad_layout)
                .titleViewId(R.id.title)                             // 공통
                .bodyViewId(R.id.body)                               // 공통
                .callToActionViewId(R.id.cta)                        // 공통
                .iconViewId(R.id.icon)                               // 공통
                .mediaContainerViewId(R.id.media_container)          // 공통
                .adChoiceContainerViewId(R.id.ad_choice_container)   // 옵션 (FAN/NAM/CoupangCPM/Mintegral/InMobi)
                .mainImageViewId(R.id.main_image)                    // 옵션 (MobWith 전용 - mediaContainer 내 ImageView)
                .advertiserViewId(R.id.advertiser)                   // 옵션 (Admob/GAM/ADOP/AdForus/NAM)
                .starRatingViewId(R.id.star_rating)                  // 옵션 (Admob/GAM/ADOP/AdForus/CoupangCPM/Mintegral/Vungle/Fyber/InMobi)
                .priceViewId(R.id.price)                             // 옵션 (Admob/GAM/ADOP/AdForus/CoupangCPM)
                .logoViewId(R.id.logo)                               // 옵션 (CoupangCPM)
                .sponsoredViewId(R.id.sponsored)                     // 옵션 (FAN/Vungle/Fyber/InMobi/Moloco)
                .socialContextViewId(R.id.social_context)            // 옵션 (FAN/NAM)
                .build();
                
    NativeAdConfig config = new NativeAdConfig.Builder()
                .privacyIconVisibility(true)
                .privacyIconPosition(NativeAdConfig.PrivacyIconPosition.TOP_RIGHT)
                .build();
    
    adPopcornSSPNativeAd.setNativeAdConfig(config);
    adPopcornSSPNativeAd.loadAd();                    
}
```

</details>

#### 네이티브 샘플 스크린샷

위 샘플 기반으로 광고 요청 시, 표출되는 광고입니다.

<figure><img src="/files/wxNybMWawsrVQULwFGlk" alt="" width="375"><figcaption></figcaption></figure>