AdMob Collapsible Banner Format to Increase Revenue

by

Use the newly introduced AdMob ad format known as collapsible banners in order to boost average revenue per user (ARPU).

How to make Banner a collapsible Banner

When I caught one app with this type of app I wondered which ad network provides such types of ads after a lot of searches found it provided by AdMob. Then started for finding the code and how to make it possible. but you don’t need to give a time here is a full example in Jetpack Compose

Let’s Start Coding

Add dependency (I’m using Gradle Version Catalogue)

libs.verions.toml

[versions]
...
gms-play-services-ads = "22.1.0"
...
[libraries]
...
gms-play-services-ads = { group = "com.google.android.gms", name = "play-services-ads", version.ref = "gms-play-services-ads" }
...
[plugins]
...

[bundles]
...

build.gradle(app-level)

implementation(libs.gms.play.services.ads)

AndroidManifest.xml

<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-XXX~XXX" />

Compose Function To Show Banner Ad






@Composable
fun BannerAds(
    modifier: Modifier,
    adListener: AdListener? = null
) {

    var containerWidth by remember { mutableStateOf<Int?>(null) }
    val adUnitId = remember {
        mutableStateOf("YOUR_AD_ID")
    }

    Column {
        androidx.compose.material3.Divider(thickness = 4.dp)
        Box(
            modifier = Modifier
                .height(60.dp)
                .fillMaxWidth()
                .background(color = Color.White)
                .onSizeChanged {
                    containerWidth = it.width
                },
            contentAlignment = Alignment.Center
        ) {
            Text(text = stringResource(R.string.showing_ad))
            AndroidView(factory = { context ->
                val adView = AdView(context)
                val displayMetrics = context.resources.displayMetrics;
                val currentOrientationAnchoredAdaptiveBannerAdSize =
                    AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
                        context, (displayMetrics.widthPixels / displayMetrics.density).toInt()
                    )

                adView.setAdSize(
                    currentOrientationAnchoredAdaptiveBannerAdSize
                )
                if (adListener != null)
                    adView.adListener = adListener
                adView
            }, modifier = modifier, update = { adView ->

                if (adView.isLoading)
                    return@AndroidView
                try {
                    adView.adUnitId = adUnitId.value //Can only be set once
                } catch (e: Exception) {
                    e.printStackTrace()
                }
                adView.doOnLayout {
                    val bundle = Bundle()
                    bundle.putString("collapsible", "bottom")
                    adView.loadAd(
                        AdRequest.Builder()
                            .addNetworkExtrasBundle(AdMobAdapter::class.java, bundle)
                            .build()
                    )
                }
            })
        }
    }
}





We have also implemented Adaptive Banner So which will fill the spaces available to give a good user experience.










@Composable
fun BannerDemo() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .imePadding()
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .weight(1f, fill = true)
        ) {
            //Your Content
        }
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(unbounded = true)
        ) {
            BannerAds(modifier = Modifier)
        }
    }
}





Note : Final Result Depended On What type of inventory you get from Admob. And This Might Not Show Sometime in Testing Mode.





Hope you like this code. Happy Coding. Don’t forget to Clap If it works for you.





Thank You






		


				
			




			

				


		

		
Leave a Comment