AdMob adaptive banner is not showing in Jetpack Compose

Issue

I have an AdMob regular banner and an adaptive banner on a composable. The regular banner is showing alright, but the adaptive banner is not. Can anyone please help resolve this?

AdMob Reference

@Composable
fun AdNetworkApp() {
    val deviceCurrentWidth = LocalConfiguration.current.screenWidthDp.toInt()

    Column(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Adaptive Banner")

        // shows an Adaptive banner test ad
        AndroidView(
            factory = { context ->
                AdView(context).apply {
                    adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
                        context,
                        deviceCurrentWidth
                    )
                    adUnitId = context.getString(R.string.ad_id_adaptive_banner)
                    loadAd(AdRequest.Builder().build())
                }
            }
        )

        Text("Regular Banner")

        // shows a banner test ad
        AndroidView(
            factory = { context ->
                AdView(context).apply {
                    adSize = AdSize.BANNER
                    adUnitId = context.getString(R.string.ad_id_banner)
                    loadAd(AdRequest.Builder().build())
                }
            }
        )
        ...

Thanks!

Solution

First thing you need to check when your banner is not showing is adUnitId.

Also it can be not shown if the width passed to adSize is too big. But in your case, your padding applied to Column stops it from showing full width.

I suggest you not using unknown constants like 40. When you're sure that current view is top one, you can calculate width inside column like screenWidthDp - 2 * padding

The most "accurate" is to get width of column with onSizeChanged.

I've made a sample to test AdView with different widths, and none seems working good. But I suggest you check out on a real adUnitId instead of the test one, maybe there situation is better.

val deviceCurrentWidth = LocalConfiguration.current.screenWidthDp
val padding = 16
var i by remember { mutableStateOf(0) }
var containerWidth by remember { mutableStateOf<Int?>(null) }
Column(
    horizontalAlignment = Alignment.CenterHorizontally,

    modifier = Modifier
        .padding(padding.dp)
        .fillMaxWidth()
        .onSizeChanged {
            containerWidth = it.width
        }
) {
    val items =
        listOf(
            "deviceCurrentWidth - 40" to deviceCurrentWidth - 40,
            "deviceCurrentWidth - padding * 2" to deviceCurrentWidth - padding * 2,
            "AdSize.FULL_WIDTH" to AdSize.FULL_WIDTH,
            "onSizeChanged" to with(LocalDensity.current) {
                containerWidth?.let { containerWidth ->
                    (containerWidth / density).roundToInt()
                }
            }
        )
    items.forEach {
        val (title, width) = it
        if (width == null) {
            return@forEach
        }

        Text(title)
        AndroidView(
            factory = { context ->
                AdView(context).apply {
                    adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
                        context,
                        width
                    )
                    adUnitId = "ca-app-pub-3940256099942544/6300978111"
                    loadAd(AdRequest.Builder().build())
                }
            },
            update = { adView ->
                adView.loadAd(AdRequest.Builder().build())
                i // needed to update view on i change
            },
        )
    }
    LaunchedEffect(Unit) {
        while (true) {
            delay(1000)
            i++
        }
    }
}

Result:

p.s. Also a little tip: use a modifier as the last argument: in this case you do not need to use a comma, so it becomes much easier to add and delete lines

Column(
    horizontalAlignment = Alignment.CenterHorizontally,
    modifier = Modifier
        .fillMaxWidth()
)

Answered By - Philip Dukhov