Jetpack Compose Interoperability: XML + Jetpack Compose for AdMob Implementation

So you wanted to create an app using Jetpack Compose with AdMob. What’s the easiest way?

Prerequisite:

  1. Setup your AdMob account https://developers.google.com/admob/android/quick-start
  2. Setup AdMob dependencies in your Android app project
  1. Create an empty activity (eg. MainActivity.kt & activity_main.xml)
  2. Implement this layout in your XML file:
  • In activity_main.xml we put the ComposeView inside the ConstraintLayout that matches the parent’s width and height with the bottom constraint above the AdView.
  1. Implement this in your MainActivity.kt

2. Do your Compose layout :)

  1. Since we used the XML file, it will follow the declarations in values (colors, strings, themes) in your res folder.
  2. This is an easier approach if you want to put the ad banner for every screen since you will only have to declare it once.
  3. This will give you an idea if you want to implement Jetpack Compose in your existing project that uses XMLs for layouts.

If you followed this simple tutorial until the end, thank you so much! I hope you learned something awesome. I am still learning, so if you have any suggestions or opinions, please let me know so I can improve my work. Thanks ✨

Follow me on Twitter: @mjmanaog

Android Developer | Newbie