This is a really quick post to give you some tips on how to use Google AdMob banner ads in the Android Jetpack Compose display layout.
Right at the door I want to say two things:
1- The AdMob team has not updated its library (in terms of writing support), so it will always be a bit of a hack to use AdMob with writing
2- The section below feels like a hack, because we’re loading the ad from the writing hierarchy, it works! But this is not the “ideal” solution. However, even though we have this interoperability, it may be the best way.
Below are the official documents for embedding an AdMob banner ad in the Android app, the examples show you how to do this programmatically or using an XML layout (remember these? :-)). Quick start Then Banner ad implementation.
This is where the compose ‘hack’ is different (and you can probably improve it), so let’s start here. The documents say that in order to load your ad on onCreate:
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) MobileAds.initialize(this) {} mAdView = findViewById(R.id.adView) val adRequest = AdRequest.Builder().build() mAdView.loadAd(adRequest) }
You can also do this with compose, after the vehicle calls loadAd from onCreate. But let’s do it another way:
import androidx.compose.foundation.background import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.platform.LocalInspectionMode import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.viewinterop.AndroidView import com.blundell.tut.R import com.google.android.gms.ads.AdRequest import com.google.android.gms.ads.AdSize import com.google.android.gms.ads.AdView @Composable fun AdvertView(modifier: Modifier = Modifier) { val isInEditMode = LocalInspectionMode.current if (isInEditMode) { Text( modifier = modifier .fillMaxWidth() .background(Color.Red) .padding(horizontal = 2.dp, vertical = 6.dp), textAlign = TextAlign.Center, color = Color.White, text = "Advert Here", ) } else { AndroidView( modifier = modifier.fillMaxWidth(), factory = { context -> AdView(context).apply { adSize = AdSize.BANNER adUnitId = context.getString(R.string.ad_id_banner) loadAd(AdRequest.Builder().build()) } } ) } } @Preview(showBackground = true) @Composable fun AdvertPreview() { AdvertView() }
Create a new component, use the provided AdMob AdView
Wrap it in the provided connection AndroidView
And wrap both in the components you created AdvertView
.
Preview Writing Dislikes AdView Processing in such Usage, so we verify AdMob AdView
For the equivalent use of isInEditMode
For connection, called LocalInspectionMode.current
. This allows our preview to display a red banner, instead of the ad in the preview.
Official documentation for AndroidView
Explains it:
An Android deployment resource component in the presence
ViewBinding
. The cover is obtained fromfactory
Block, to be called once exactly to achieve theViewBinding
Assemble, and it is guaranteed that it will also be run in the user interface thread. Therefore, in addition to creatingViewBinding
, The block can also be used to make one-time and bootView
Fixed definition of properties. Godupdate
You can run a block several times (also in the user interface thread) due to re-composition, which is the right place to setView
Properties by country. When the situation changes, the block will be redone to set the new properties. Note that the block will also be activated once immediately after thefactory
The block ends.https://developer.android.com/reference/kotlin/androidx/compose/ui/viewinterop/package-summary#AndroidView(kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function1)
This explanation seems to suggest that we can use either of the two characteristics: factory
(What we do) or update
To load our ad. Both run on the user interface chaining (same as running loadAd
M onCreate
.) As a judgment for the reader, you need to think about whether you want the loadAd
A method that will be read in any composition or on a one-time basis when the display is turned on.
and that’s it! Remember, call loadAd
This way is not recommended by anyone, but because it uses factory
of AndroidView
This feels OK 🙂 (If you used update
, I bet the internal library takes care of us calling it out several times anyway). This example is just to start with AdMob And compose.
If anyone wants a more complete example, please contact me on Twitter and I can create a sample project.
have a nice time!
If you liked this post, you might like: Training Your Gradual Dependence: Just Because!