> For the complete documentation index, see [llms.txt](https://docs.bidapp.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bidapp.io/integration/android/jetpack-compose.md).

# Jetpack Compose

Integrating Banner Ads using Jetpack Compose

First, you need to create an instance of the **banner ad**. You can do this by initializing **BannerView** with the desired ad format. Here's how you can do it:

```kotlin
val banner = BannerView(this).apply { 
    banner(AdFormat.banner_320x50) 
} 
```

Also, you will need to create a **delegate** class to handle various ad events. This class should implement the **BIDBannerViewDelegate** interface:

```kotlin
class BannerViewDelegate : BIDBannerViewDelegate { 

     override fun adViewDidLoadAd(adView: BannerView, adInfo: AdInfo?) {		
          println("App - adViewDidLoadAd. AdView: $adView, AdInfo: $adInfo")
     }
 
     override fun adViewDidDisplayAd(adView: BannerView, adInfo: AdInfo?) {
          println("App - didDisplayAd. AdView: $adView, AdInfo: $adInfo")
     }

     override fun adViewDidFailToDisplayAd(adView: BannerView, adInfo: AdInfo?, errors: Error) {
          println("App - didFailToDisplayAd. AdView: $adView, Error:${errors.localizedMessage}")
     }

     override fun adViewClicked(adView: BannerView, adInfo: AdInfo?) {
          println("App - didClicked. AdView: $adView, AdInfo: $adInfo")
     }
     
     override fun allNetworksFailedToDisplayAd(adView: BannerView) {
         print("Banner - allNetworksFailedToDisplayAd")
     }
}
```

After creating your delegate class, set it as the delegate for the banner view:

```kotlin
val bannerShowDelegate = BannerViewDelegate() 
banner.setBannerViewDelegate(bannerShowDelegate)
```

Finally, incorporate the banner into your Composable UI. You can use **AndroidView** to integrate the traditional Android view with Jetpack Compose:

```kotlin
Box( 
    modifier = Modifier 
      .width(320.dp)
      .height(50.dp)
      .fillMaxWidth()
   ) {
       AndroidView(
           factory = { context -> 
               FrameLayout(context).apply { 
                   removeAllViews()
                   addView(banner) 
               } 
           }
      )
}
```

This code creates a **Box** with specified dimensions and uses **AndroidView** to host the banner. Make sure that the banner is properly initialized and the delegate is set before this Composable function is called in the UI.