> ## 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.

# Banner & MREC Ads

> Implement Banner and MREC ads in your Android app.

## Banner & MREC Ad Formats

### Banner Ad

Rectangular format (320x50) that occupies part of app layout. Supported by most ad demand sources.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/banner-example.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=3aa2e622942800824207a2261e062053" alt="Banner Example Pn" title="Banner Example Pn" style={{ width:"39%" }} width="972" height="2160" data-path="sdk-integration/common-img/ad-formats-en/banner-example.png" />

### MREC Ad

Medium Rectangle format (300x250) with similar characteristics to banner ads.

<img src="https://mintcdn.com/delightroom-5a71a6a8/j3-znW7LKrbpP3mb/sdk-integration/common-img/ad-formats-en/mrec-example.png?fit=max&auto=format&n=j3-znW7LKrbpP3mb&q=85&s=fa808a03d2e5a55975c680cae400660d" alt="Mrec Example Pn" title="Mrec Example Pn" style={{ width:"40%" }} width="972" height="2160" data-path="sdk-integration/common-img/ad-formats-en/mrec-example.png" />

***

## Integrate Ads

<Tabs>
  <Tab title="Xml">
    <Steps>
      <Step title="Create adUnit">
        <CodeGroup>
          ```kotlin Banner theme={null}
          val adUnit = DaroBannerAdUnit(
            key = ${AdUnitId},
            placement = ${placement}, //Name to be shown in logs. Can be empty.
            bannerSize = DaroBannerSize.Banner,
          )
          ```

          ```kotlin Mrec theme={null}
          val adUnit = DaroBannerAdUnit(
            key = ${AdUnitId},
            placement = ${placement}, //Name to be shown in logs. Can be empty.
            bannerSize = DaroBannerSize.MREC,
          )
          ```
        </CodeGroup>
      </Step>

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

        binding.adViewContainer.addView(adView)
        ```
      </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()
        ```
      </Step>
    </Steps>

    <Tip>
      * View automatically finds and manages lifecycle for the screen. No need to call `resume`, `pause`, or `destroy` separately.
      * If `autoDetectLifecycle` is false (default: true), call `resume`, `pause`, and `destroy` directly.
    </Tip>
  </Tab>

  <Tab title="Compose">
    <CodeGroup>
      ```kotlin Banner theme={null}
      DaroBanner(
        adUnit = DaroBannerAdUnit(
          key = ${AdUnitId},
          placement = ${placement}
          bannerSize = DaroBannerSize.Banner,
        ),
        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
      )
      ```

      ```kotlin Mrec theme={null}
      DaroBanner(
        adUnit = DaroBannerAdUnit(
          key = ${AdUnitId},
          placement = ${placement}
          bannerSize = DaroBannerSize.MREC,
        ),
        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
      )
      ```
    </CodeGroup>
  </Tab>
</Tabs>

<Tip>
  Preload ads without creating a view using `DaroBannerAdView.requestPreload()`.

  ```kotlin theme={null}
  DaroBannerAdView.requestPreload(
    this,
    DaroBannerAdUnit(
      key = ${AdUnitId},
      placement = ${placement},
      bannerSize = ${bannerSize}
    )
  )
  ```

  `AdUnitId`, `placement`, and `bannerSize` must match in the DaroBannerAdUnit to use preloaded ad immediately.
</Tip>