Kotlin Practice # 9 Compose 建立 Admob Banner 橫幅廣告

上一篇完成了簡單的Todo List與DataStore的練習。

Kotlin Practice #8 Compose 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的程式碼不多。又多學到一個東西了，持續加油！！

學習資源：

App Open Ads | Android | Google Developers

AdMob Banner & Interstitial in Jetpack Compose