Jetpack composeでAdMobを表示する

割と雑に書いてます。
書いたはいいけど半年くらい公開忘れていたので最新バージョンと乖離はあるかもしれません。

AdMob はまだ Jetpack compose 非対応

https://developers.google.com/admob/android/banner

方法

AndroidView で表示します。

サンプルコード

@Composable
fun App() {
    Scaffold(
        bottomBar = {
            AdBanner(
                modifier = Modifier
                    .fillMaxWidth()
                    // パンチホールなどを回避
                    .windowInsetsPadding(insets = WindowInsets.safeDrawing.only(sides = WindowInsetsSides.Horizontal))
                    .navigationBarsPadding(),
            )
        },
    ) {
        // content...
    }
}

@Composable
private fun AdBanner(modifier: Modifier = Modifier) {
    // アダプティブバナーで表示するために端末の横幅を取得
    val adWidth = LocalConfiguration.current.screenWidthDp

    AndroidView(
        factory = { context ->
            AdView(context).apply {
                adUnitId = "ca-app-pub-3940256099942544/6300978111" // Test id
                setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, adWidth))
                loadAd(AdRequest.Builder().build())
            }
        },
        modifier = modifier,
    )
}

細かな点

アダプティブバナー

アダプティブバナーで表示したいので端末の横幅を取得して AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, adWidth) を設定しています。

LocalConfiguration.current.screenWidthDp

2 pane とかにしている場合は、このままだと突き抜けたりすると思うので適宜変更が必要。

Jetpack compose 1.8.0 より LocalConfiguration.current.screenWidthDp は Lint で指摘されるようになりました。
マルチプラットフォームのため代わりに LocalWindowInfo.current.containerSize を使用する必要がある場合があります。
ですが、パンチホールなどを考慮していない純粋な Window サイズが返ってくるので無邪気に LocalWindowInfo.current.containerSize に変更するには注意が必要です。
気力があれば記事にしたいと思います。

Added a lint check to warn against calls to Configuration#screenWidth/heightDp - LocalWindowInfo.current.containerSize can be used instead to retrieve the current window size.

1.8.0-beta02 より

スクリーンショット

縦表示

横表示

かんそう 🤔

AndroidView は便利だけど、Jetpack compose のコードと View のコードで割と読み方が変わって脳内が忙しくなるので、できれば公式で対応してくれると嬉しい。