【Android】Jetpack ComposeでAdMobのバナー広告を表示する

Jetpack Composeを使ったアプリで、AdMobのバナー広告を表示する方法です。

↓のような感じで、画面下部にバナーを表示します。

コード

現時点（2021/08/13）では、Jetpack Compose用に用意されたAdMobのバナー広告（ AdView ）はなさそうなので、 AndroidView を使って対応しています。
（既存のViewも使えるので AndroidView 便利ですね ）

@Composable
fun SampleScreen() {
    Scaffold {
        Column {
            // 適当にリストを作成
            LazyColumn(
                modifier = Modifier.weight(1F),
            ) {
                items(100) { item ->
                    Text("item: $item")
                    Divider(thickness = 0.8.dp)
                }
            }

            AndroidView(
                modifier = Modifier.fillMaxWidth(),
                factory = { context ->
                    val adView = AdView(context)
                    adView.adSize = AdSize.BANNER
                    adView.adUnitId = "ca-app-pub-3940256099942544/6300978111" // テストID
                    adView.loadAd(AdRequest.Builder().build())
                    adView
                },
            )
        }
    }
}

ポイント

1. AndroidView の modifier に Modifier.fillMaxWidth() を指定することで、横幅いっぱいになるようにします。（ AdSize.Banner の場合は余白が出来てしまいます。）
2. AndroidView の factory で AdView を生成します。 AdView には Context が必要ですが、 factory で Context が渡ってくるので、それを使えばOKでした。

※ factory の部分は、 apply を使うとちょっとスッキリ書けそうな感じはあります。

AndroidView(
    modifier = Modifier.fillMaxWidth(),
    factory = { context ->
        AdView(context).apply {
            adSize = AdSize.BANNER
            adUnitId = "ca-app-pub-3940256099942544/6300978111" // テストID
            loadAd(AdRequest.Builder().build())
        }
    },
)

その他

アダプティブ バナーを表示することも可能でした。（アダプティブ バナーなら左右の余白がなくなりました。）

AndroidView(
    modifier = Modifier.fillMaxWidth(),
    factory = { context ->
        val adView = AdView(context)
        val displayMetrics = Resources.getSystem().displayMetrics
        val width = (displayMetrics.widthPixels / displayMetrics.density).toInt()
        adView.adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width)
        adView.adUnitId = "ca-app-pub-3940256099942544/6300978111" // テストID
        adView.loadAd(AdRequest.Builder().build())
        adView
    },
)

DisplayMetrics から width を計算して、AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize メソッドを使ってサイズを取得している感じです。