> ## Documentation Index
> Fetch the complete documentation index at: https://guide.daro.so/llms.txt
> Use this file to discover all available pages before exploring further.

# Native Ads

> Implement native ads in your Android app.

## Native Ad Format

Native ads provide individual ad components that you implement directly in your app's layout, unlike other formats where the SDK provides the complete ad view.

**Advantages**: Customize the layout to match your UI/UX and minimize visual disruption.

**Requirements**: Include an ad indicator and maintain visual differentiation to prevent users from confusing ads with content.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/native-example-elements-en.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=7dfe02cf46c122df9347226cbd560e38" alt="Native Example Elements En Pn" width="1960" height="2928" data-path="sdk-integration/common-img/ad-formats-en/native-example-elements-en.png" />

<Info>
  **Four Required Elements for Native Ads**

  Native ads can be designed to complement the content and look of your app. However, **the following four required elements must be included.** These elements are necessary to clearly mark native ads as advertisements so that users don't mistake them for content, and to ensure the minimum advertising effectiveness expected by advertisers.

  1. Ad attribution: You must clearly display ad attribution text such as "Ad", "Advertisement", or "Sponsored" (localized appropriately) in the ad area so users can clearly identify the content as advertising.
  2. AdChoices icon: The AdChoices overlay icon enables users to identify and control ads, typically displayed as an 'ⓘ' icon. This icon is automatically added by the DARO SDK, so no separate implementation is required. It is placed in one of the four corners of the ad view (top-left, top-right, bottom-right, bottom-left), with bottom-right as the default. For Non-Reward apps using Manual Implementation(XML), you can pick the corner via `DaroNativeAdBinder.Builder.setAdChoicePlacement()` (see the [AdChoices placement](#adchoices-placement) section below). Please lay out your ad view so the selected corner is not overlapped or obscured by other UI elements. The icon's appearance and behavior may vary depending on the ad source (demand).
  3. Title: The ad title must be displayed.
  4. CTA (Call to action): A CTA button with text such as "Install", "Open", or "Download" must be included. The size and format of the button can be freely configured, and it can be replaced with a text field depending on the situation. Since the ad source (demand) provides the CTA text, there is no need to specify fixed wording.
</Info>

***

## Integrating Ads

<Tabs>
  <Tab title="Xml">
    <Steps>
      <Step title="Create adBinder">
        * Create an adBinder needed to render native ads.

        <Tabs>
          <Tab title="Manual implementation(xml)">
            <CodeGroup>
              ```kotlin xml theme={null}
              val adBinder = DaroNativeAdBinder.Builder(context, ${layoutId})
                .setIconViewId(${iconViewId})
                .setBodyTextViewId(${bodyViewId})
                .setCallToActionViewId(${callToActionViewId})
                .setMediaViewGroupId(${mediaViewGroupId})
                .setTitleViewId(${titleViewId})
                .setAdChoicePlacement(DaroNativeAdChoicePlacement.BOTTOM_RIGHT) // optional, defaults to BOTTOM_RIGHT
                .build()
              ```

              ```kotlin programmatic theme={null}
              val view = View()

              val adBinder = DaroNativeAdBinder.Builder(view)
                .setIconViewId(${iconViewId})
                .setBodyTextViewId(${bodyViewId})
                .setCallToActionViewId(${callToActionViewId})
                .setMediaViewGroupId(${mediaViewGroupId})
                .setTitleViewId(${titleViewId})
                .build()
              ```
            </CodeGroup>

            <Expandable title="Example">
              <img src="https://mintcdn.com/delightroom-5a71a6a8/zubkjN5vMaM7lt41/sdk-integration/android/ad-formats/img/native-banner-example.png?fit=max&auto=format&n=zubkjN5vMaM7lt41&q=85&s=a178e2c367e51b7a032ee3ce384965aa" alt="template-line" width="80%" data-path="sdk-integration/android/ad-formats/img/native-banner-example.png" />

              ```xml layout_native.xml expandable theme={null}
              <?xml version="1.0" encoding="utf-8"?>
              <androidx.constraintlayout.widget.ConstraintLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingStart="24dp"
                android:paddingTop="16dp"
                android:paddingEnd="24dp"
                android:paddingBottom="12dp">

                <ImageView
                  android:id="@+id/view_icon"
                  android:layout_width="48dp"
                  android:layout_height="48dp"
                  android:layout_marginEnd="8dp"
                  app:layout_constraintBottom_toBottomOf="@id/view_body"
                  app:layout_constraintEnd_toStartOf="@id/view_title"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintTop_toTopOf="@id/view_title" />

                <TextView
                  android:id="@+id/view_title"
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:ellipsize="end"
                  android:maxLines="1"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toEndOf="@id/view_icon"
                  app:layout_constraintTop_toTopOf="parent"
                  tools:text="Title is limited to 1 line maximum." />

                <TextView
                  android:id="@+id/view_body"
                  android:layout_width="0dp"
                  android:layout_height="wrap_content"
                  android:layout_marginTop="4dp"
                  android:ellipsize="end"
                  android:lines="2"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintStart_toStartOf="@id/view_title"
                  app:layout_constraintTop_toBottomOf="@id/view_title"
                  tools:text="Description is also limited to 2 lines. Lines exceeding.." />

                <TextView
                  android:id="@+id/button_cta"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:gravity="center"
                  android:paddingStart="8dp"
                  android:paddingTop="4dp"
                  android:paddingEnd="8dp"
                  android:paddingBottom="4dp"
                  app:layout_constraintBottom_toTopOf="@+id/view_media"
                  app:layout_constraintEnd_toEndOf="parent"
                  tools:text="Open" />

                <FrameLayout
                  android:id="@+id/view_media"
                  android:layout_width="match_parent"
                  android:layout_height="100dp"
                  android:layout_marginTop="20dp"
                  app:layout_constraintBottom_toBottomOf="parent"
                  app:layout_constraintTop_toBottomOf="@id/view_body" />
              </androidx.constraintlayout.widget.ConstraintLayout>
              ```

              ```kotlin MainActivity.kt theme={null}
              val adBinder = DaroNativeAdBinder.Builder(this, droom.daro.m.R.layout.layout_native)
                .setIconViewId(droom.daro.m.R.id.view_icon)
                .setBodyTextViewId(droom.daro.m.R.id.view_body)
                .setCallToActionViewId(droom.daro.m.R.id.button_cta)
                .setMediaViewGroupId(droom.daro.m.R.id.view_media)
                .setTitleViewId(droom.daro.m.R.id.view_title)
                .build()
              ```
            </Expandable>
          </Tab>

          <Tab title="Use Template">
            ```kotlin theme={null}
            val adBinder = DaroNativeAdBinder.fromTemplate(
                context,
                DaroNativeAdTemplate.Banner(
                  ...
                )
              )
            ```
          </Tab>
        </Tabs>
      </Step>

      <Step title="Create adUnit">
        ```kotlin theme={null}
          val adUnit = DaroNativeAdUnit(
            key = ${AdUnitId},
            placement = ${placement}, //Name displayed in logs. Can be left empty.
          )
        ```
      </Step>

      <Step title="Create adView and add to view">
        ```kotlin theme={null}
        val adView = DaroNativeAdView(
          context = context,
          adUnit = adUnit
        )

        binding.adViewContainer.addView(adView)
        ```
      </Step>

      <Step title="Set adBinder on adView">
        ```kotlin theme={null}
        adView.setAdBinder(adBinder)
        ```
      </Step>

      <Step title="Set listener">
        ```kotlin theme={null}
        adView.setListener(object : DaroAdViewListener {
          override fun onAdImpression(adInfo: DaroAdInfo) {}
          override fun onAdClicked(adInfo: DaroAdInfo) {}
          override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
          override fun onAdLoadFail(err: DaroAdLoadError) {}
        })
        ```
      </Step>

      <Step title="Load ad">
        ```kotlin theme={null}
        adView.loadAd()
        ```

        <Warning>
          You must set `adBinder` before calling `loadAd()`.
        </Warning>
      </Step>
    </Steps>

    <Tip>
      * When you declare a view, it automatically detects the appropriate lifecycle for the screen and manages its behavior. You don't need to manually call `resume`, `pause`, or `destroy`.
      * If you set `autoDetectLifecycle` to false (default: true), you must manually call `resume`, `pause`, and `destroy`.
    </Tip>
  </Tab>

  <Tab title="Compose">
    <CodeGroup>
      ```kotlin Manual implementation(Compose) theme={null}
      DaroNative(
        adUnit = DaroNativeAdUnit(
          key = ${AdUnitId},
          placement = ${placement}
        ),
        listener = object : DaroAdViewListener {
          override fun onAdImpression(adInfo: DaroAdInfo) {}
          override fun onAdClicked(adInfo: DaroAdInfo) {}
          override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
          override fun onAdLoadFail(err: DaroAdLoadError) {}
        },
        modifier = Modifier
      ) {
        DaroNativeAdTitle { title -> Text(title) } // for title
        DaroNativeAdBody { body -> Text(body) } // for body
        DaroNativeCallToAction { callToAction -> Text(callToAction) } // for callToAction
        DaroNativeIcon(modifier = Modifier.size(40.dp)) // for ImageView
        DaroNativeMedia(modifier = Modifier.size(100.dp)) // for MedaiView
      }
      ```

      ```kotlin Use Template theme={null}
      DaroNative(
        adUnit = DaroNativeAdUnit(
          key = ${AdUnitId},
          placement = ${placement}
        ),
        modifier = Modifier,
        listener = object : DaroAdViewListener {
          override fun onAdImpression(adInfo: DaroAdInfo) {}
          override fun onAdClicked(adInfo: DaroAdInfo) {}
          override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
          override fun onAdLoadFail(err: DaroAdLoadError) {}
        },
        template = DaroNativeAdTemplate.Line(
          ...
        )
      )
      ```
    </CodeGroup>
  </Tab>
</Tabs>

<Tip>
  You can preload ads without creating an ad view using the `DaroNativeAdView.requestPreload()` method.

  ```kotlin theme={null}
  DaroNativeAdView.requestPreload(
    this,
    DaroNativeAdUnit(
      key = ${AdUnitId},
      placement = ${placement},
    )
  )
  ```

  To use the preloaded ad immediately, both the `AdUnitId` and `placement` of the DaroNativeAdUnit used in the view must match.
</Tip>

***

## AdChoices placement

* Use `DaroNativeAdBinder.Builder.setAdChoicePlacement()` to control where the AdChoices icon is rendered.
* If unset, it defaults to the bottom-right corner (`BOTTOM_RIGHT`).
* Supported values: `TOP_LEFT`, `TOP_RIGHT`, `BOTTOM_LEFT`, `BOTTOM_RIGHT`.

This option is only available for Non-Reward apps via the Manual Implementation(XML). Template and Reward apps use the default value.

<Note>
  For Reward apps, calling `setAdChoicePlacement()` does not actually change the AdChoices icon position.
</Note>

<Warning>
  **Behavior varies by demand source (preferred, not guaranteed)**

  `setAdChoicePlacement()` asks the demand source to place the AdChoices icon at the specified position. However, where it actually appears is decided by each demand source, so the requested position is not always honored.

  Demand sources may respond differently:

  * Some demand sources honor the requested position as-is.
  * Some demand sources ignore the request and use their own fixed position.
  * Some demand sources replace the AdChoices icon with their own ad indicator (such as an ad badge).

  In every case, the relevant ad compliance requirements are satisfied.

  Therefore, when designing your ad layout, **assume the AdChoices icon or ad badge can appear in any of the four corners** and reserve sufficient padding around each corner.
</Warning>

***

## Template

* The Daro SDK provides the following templates.

<Expandable title="Line">
  <img src="https://mintcdn.com/delightroom-5a71a6a8/zubkjN5vMaM7lt41/sdk-integration/android/ad-formats/img/native-template-line.png?fit=max&auto=format&n=zubkjN5vMaM7lt41&q=85&s=cd5d01cad05270bb33463ddd1c519a6d" alt="template-line" width="80%" data-path="sdk-integration/android/ad-formats/img/native-template-line.png" />

  <ResponseField name="backgroundColor" type="Int">
    Overall background color
  </ResponseField>

  <ResponseField name="contentColor" type="Int">
    Content text color
  </ResponseField>

  <ResponseField name="adMarkLabelBackgroundColor" type="Int">
    Ad mark background color
  </ResponseField>

  <ResponseField name="adMarkLabelTextColor" type="Int">
    Ad mark text color
  </ResponseField>
</Expandable>

<Expandable title="LineCenter">
  <img src="https://mintcdn.com/delightroom-5a71a6a8/zubkjN5vMaM7lt41/sdk-integration/android/ad-formats/img/native-template-line-center.png?fit=max&auto=format&n=zubkjN5vMaM7lt41&q=85&s=9896214d551b78c8a63612585d40fbae" alt="template-line" width="80%" data-path="sdk-integration/android/ad-formats/img/native-template-line-center.png" />

  <ResponseField name="backgroundColor" type="Int">
    Overall background color
  </ResponseField>

  <ResponseField name="contentColor" type="Int">
    Content text color
  </ResponseField>

  <ResponseField name="adMarkLabelBackgroundColor" type="Int">
    Ad mark background color
  </ResponseField>

  <ResponseField name="adMarkLabelTextColor" type="Int">
    Ad mark text color
  </ResponseField>
</Expandable>

<Expandable title="Banner">
  <img src="https://mintcdn.com/delightroom-5a71a6a8/zubkjN5vMaM7lt41/sdk-integration/android/ad-formats/img/native-template-banner.png?fit=max&auto=format&n=zubkjN5vMaM7lt41&q=85&s=a6f1f5de901d65fb65265a85b9219918" alt="template-line" width="80%" data-path="sdk-integration/android/ad-formats/img/native-template-banner.png" />

  <ResponseField name="backgroundColor" type="Int">
    Overall background color
  </ResponseField>

  <ResponseField name="titleColor" type="Int">
    Title text color
  </ResponseField>

  <ResponseField name="descriptionColor" type="Int">
    Description text color
  </ResponseField>

  <ResponseField name="ctaBackgroundColor" type="Int">
    CTA (button) background color
  </ResponseField>

  <ResponseField name="ctaTextColor" type="Int">
    CTA (button) text color
  </ResponseField>

  <ResponseField name="adMarkLabelTextColor" type="Int">
    Bottom ad mark text color
  </ResponseField>
</Expandable>