Native Ads

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.

Four Required Elements for Native AdsNative 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.

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.
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. When using Manual Implementation(XML), you can pick the corner via DaroNativeAdBinder.Builder.setAdChoicePlacement() (see the 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).
Title: The ad title must be displayed.
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.

Integrating Ads

Initialize the SDK as described in Get started. Replace YOUR_AD_UNIT_ID in the examples with the dashboard Ad Unit Key for this format.

Xml
Compose

Create adBinder

Create an adBinder needed to render native ads.

Manual implementation(xml)
Use Template

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()

val view = View()

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

Show Example

layout_native.xml

<?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>

Use your app module’s R to reference the layout_native.xml and view IDs added to your app.

MainActivity.kt

val adBinder = DaroNativeAdBinder.Builder(this, R.layout.layout_native)
  .setIconViewId(R.id.view_icon)
  .setBodyTextViewId(R.id.view_body)
  .setCallToActionViewId(R.id.button_cta)
  .setMediaViewGroupId(R.id.view_media)
  .setTitleViewId(R.id.view_title)
  .build()

val adBinder = DaroNativeAdBinder.fromTemplate(
    context,
    DaroNativeAdTemplate.Banner(
      ...
    )
  )

Create adUnit

  val adUnit = DaroNativeAdUnit(
    key = "YOUR_AD_UNIT_ID",
  )

Create adView and add to view

val adView = DaroNativeAdView(
  context = context,
  adUnit = adUnit
)

binding.adViewContainer.addView(adView)

Set adBinder on adView

adView.setAdBinder(adBinder)

Set listener

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: DaroError) {}
})

Load ad

adView.loadAd()

You must set adBinder before calling loadAd().

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.

DaroNative is provided by daro-sdk. A separate daro-compose-util dependency is not required.
See Get started for Compose requirements and how to replace the previous dependency.

DaroNative(
  adUnit = DaroNativeAdUnit(
    key = "YOUR_AD_UNIT_ID",
  ),
  listener = object : DaroAdViewListener {
    override fun onAdImpression(adInfo: DaroAdInfo) {}
    override fun onAdClicked(adInfo: DaroAdInfo) {}
    override fun onAdLoadSuccess(ad: DaroViewAd, adInfo: DaroAdInfo) {}
    override fun onAdLoadFail(err: DaroError) {}
  },
  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
}

DaroNative(
  adUnit = DaroNativeAdUnit(
    key = "YOUR_AD_UNIT_ID",
  ),
  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: DaroError) {}
  },
  template = DaroNativeAdTemplate.Line(
    ...
  )
)

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.

Set your preferred position when using Manual Implementation(XML). Templates use the default position.

The actual icon position may vary by ad. Leave enough space around all four corners so other UI elements do not obscure the ad indicator.

Template

The DARO SDK provides the following templates.

Show Line

Int

Overall background color

Int

Content text color

Int

Ad mark background color

Int

Ad mark text color

Show LineCenter

Int

Overall background color

Int

Content text color

Int

Ad mark background color

Int

Ad mark text color

Show Banner

Int

Overall background color

Int

Title text color

Int

Description text color

Int

CTA (button) background color

Int

CTA (button) text color

Int

Bottom ad mark text color

Display the advertiser name

To display the advertiser name, add a TextView to your custom native ad layout and bind it with .setAdvertiserViewId(R.id.view_advertiser) on DaroNativeAdBinder.Builder. Replace R.id.view_advertiser with the view ID declared in your app layout. The SDK hides this view when the ad does not provide an advertiser name. Adding this view is optional for existing integrations.

Adapt the UI to received assets

Override onNativeAdAssetLoaded in DaroAdLoadListener to handle missing assets.

Value	Meaning
`TITLE`	Ad title
`BODY`	Ad body text
`ICON`	Ad icon
`MEDIA`	Ad image or video
`CALL_TO_ACTION`	Call-to-action button text (e.g., Install)
`ADVERTISER`	Advertiser name, when supplied by the ad

import android.view.View
import droom.daro.core.model.NativeAdAssetType

override fun onNativeAdAssetLoaded(assetTypes: Set<NativeAdAssetType>) {
    mediaContainer.visibility =
        if (assetTypes.contains(NativeAdAssetType.MEDIA)) View.VISIBLE else View.GONE
    iconView.visibility =
        if (assetTypes.contains(NativeAdAssetType.ICON)) View.VISIBLE else View.GONE
}

Do not hide the AD label or AdChoices based on this asset list.

DARO 2.0 SDK Migration

Getting Started

SDK Integration

How to Use DARO

FAQ

Legacy SDK

Native Ad Format

Integrating Ads

AdChoices placement

Template

Display the advertiser name

Adapt the UI to received assets

​Native Ad Format

​Integrating Ads

​AdChoices placement

​Template

​Display the advertiser name

​Adapt the UI to received assets

Native Ad Format

Integrating Ads

AdChoices placement

Template

Display the advertiser name

Adapt the UI to received assets