Including an AdMob Anchored Adaptive Banner in Jetpack Compose

As of now there’s still no native support for Jetpack Compose in the official AdMob SDK by Google.

Therefore when it comes to adding Ad banners to our Jetpack Compose project we necessarily need to get back to the classic Android View system.

Fotunately there’s a composable which comes in handy, the AndroidView composable.

It is designed to include an Android View hierarchy in a Compose UI.

This makes pretty straightforward to include a classic BANNER size Ad in a Compose UI

AndroidView(
  modifier = Modifier.fillMaxWidth(),
  factory = { context ->
      AdView(context).apply {
          // Set the banner size          
          setAdSize(AdSize.BANNER)

          // Set the Ad unit ID
          adUnitId = "ca-app-pub-3940256099942544/6300978111"
          
          // Load the Ad
          loadAd(AdRequest.Builder().build())
      }
  }
)

Basically we can

• add the AndroidView composable to the UI definition
• create a new instace of the AdMob AdView class in the “factory” block of the AndroidView composable
• set the AdSize
• set the adUnit ID
• load the Ad