AdMob Collapsible Banner Format to Increase Revenue
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