Kotlin Practice # 9 Compose 建立 Admob Banner 橫幅廣告
4 min readMar 9, 2023
上一篇完成了簡單的Todo List與DataStore的練習。
這一篇則要來練習如何在Jetpack Compose內加入Google Admob的橫幅廣告。原本以為會很困難,但理解後發現沒有想像的那麼困難。
Gradle加入套件:
首先引入套件,於build.gradle內加入Admob的套件,加入完成記得要Sync。
implementation 'com.google.android.gms:play-services-ads:21.5.0'
Manifests加入Admob:
在application內加入下列程式碼,
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-3940256099942544~3347511713"/>
ca-app-pub-3940256099942544~3347511713
上方為測試ID,實際可替換成自己的ID,
程式碼:
首先於onCreate內加入
MobileAds.initialize(this)
初始化Admob。
接續透過Composable建立Admob的View,
@Composable
fun BannerView() {
AndroidView(
modifier = Modifier
.fillMaxWidth(),
factory = { context ->
AdView(context).apply {
setAdSize(AdSize.BANNER)
// 加入申請的Banner廣告ID,可先使用測試ID驗證功能
adUnitId = "ca-app-pub-3940256099942544/6300978111"
loadAd(AdRequest.Builder().build())
}
}
)
}
接著在MainActivity內加入剛剛建立的BannerView
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
MobileAds.initialize(this)
setContent {
KP9AdmobBannerTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column() {
Greeting("ADMOB")
BannerView()
}
}
}
}
}
}
結果測試:
記得使用真機進行測試,模擬器可能無法叫出廣告頁面。
從上圖結果可以看到成功在真機上顯示出橫幅廣告,從上述的流程來看,橫幅廣告在Jetpack Compose的程式碼不多。又多學到一個東西了,持續加油!!