> 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-1.md).

# 네이티브 동영상 레이아웃 가이드

애드팝콘 v3.9.4 버전부터 동영상 광고를 지원합니다. 현재 지원 및 지원 예정인 업체는 아래와 같습니다.

* NAM
* AdFit
* AdMob, GAM
* Pangle
* Vungle(v3.10.6 버전 부터 지원 시작)
* AdPopcornSSP(지원 예정)

## 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) — 본문
  * callToActionViewId (Button) — CTA 버튼
  * iconViewId (ImageView) — 아이콘
  * mediaContainerViewId (FrameLayout) — 미디어 영역 컨테이너

* 옵셔널  (미디에이션 별 지원이 다름)
  * advertiserViewId (TextView) — Admob, GAM
  * starRatingViewId (RatingBar 또는 TextView) — Admob, GAM, Vungle
  * priceViewId (TextView) — Admob, GAM
  * sponsoredViewId (TextView) — Vungle
  * socialContextViewId (TextView) — NAM
  * adChoiceContainerViewId (FrameLayout) — NAM
  * storeViewId (TextView) — Admob, GAM

{% hint style="info" %}
업체마다 필수 구성 asset 정보가 조금씩 다르나, 공통 항목은 모두 세팅하면 정상적으로 광고가 노출됩니다.
{% endhint %}

## 3. 네이티브 동영상 샘플

### 3.1 전체 레이아웃 샘플

<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="wrap_content"
        android:minHeight="200dp"
        android:layout_marginTop="8dp">

        <ImageView
            android:id="@+id/main_image"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            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)          // 공통
                .advertiserViewId(R.id.advertiser)                   // 옵션 (Admob/GAM/NAM)
                .starRatingViewId(R.id.star_rating)                  // 옵션 (Admob/GAM/Vungle)
                .priceViewId(R.id.price)                             // 옵션 (Admob/GAM)
                .sponsoredViewId(R.id.sponsored)                     // 옵션 (Vungle
                .socialContextViewId(R.id.social_context)            // 옵션 (NAM)
                .adChoiceContainerViewId(R.id.ad_choice_container)   // 옵션 (NAM)
                .build();
                
    NativeAdConfig config = new NativeAdConfig.Builder()
                .privacyIconVisibility(true)
                .privacyIconPosition(NativeAdConfig.PrivacyIconPosition.TOP_RIGHT)
                .build();
    
    adPopcornSSPNativeAd.setNativeAdConfig(config);
    adPopcornSSPNativeAd.loadAd();                    
}
```

</details>

#### 3.1.1 네이티브 동영상 전체 샘플 스크린샷

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

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

### 3.2 심플 레이아웃 샘플

아래 설정은 다음 2가지 기본 값을 가지고 네이티브 동영상을 구성하고자 할 때 바로 사용 가능한 샘플입니다.

* MediaView
* CTA

<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"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    android:background="#FFFFFF">

    <!-- 공통 항목 -->
    <ImageView
        android:id="@+id/poc_icon"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone" />

    <TextView
        android:id="@+id/poc_title"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone" />

    <TextView
        android:id="@+id/poc_body"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="gone" />

    <!-- 미디어 컨테이너 (전체 영역) -->
    <FrameLayout
        android:id="@+id/poc_media_container"
        android:layout_width="match_parent"
        android:layout_height="250dp">
    </FrameLayout>

    <!-- CTA 버튼 (미디어 위 우측 하단 오버레이) -->
    <Button
        android:id="@+id/poc_cta"
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:layout_gravity="bottom|end"
        android:layout_margin="8dp"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:background="#4CAF50"
        android:textColor="#FFFFFF"
        android:textSize="13sp" />

</FrameLayout>

```

</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)          // 공통
                .build();
                
    adPopcornSSPNativeAd.setNativeAdConfig(config);
    adPopcornSSPNativeAd.loadAd();                    
}
```

</details>

#### 3.2.1 네이티브 동영상 전체 샘플 스크린샷

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

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