How to display Native ads via Jetpack compose?

Question

I've been finding sample apps on how to display native ads on compose, but i couldn't find one. Any solutions?

Answer 1

Use AndroidViewBinding to wrap NativeAdView.

// build.gradle.kts
dependencies {
    implementation("androidx.compose.ui:ui-viewbinding:1.2.0-beta03")
}

Create ViewBinding which contains NativeAdView.

@Composable
fun NativeMediumAd() {
    AndroidViewBinding(factory = LayoutNativeAdBinding::inflate) {
        // Initialize NativeAdView
        val adView = root.also { adView ->
            adView.advertiserView = tvAdvertiser
            adView.bodyView = tvBody
            adView.callToActionView = btnCta
            adView.headlineView = tvHeadline
            adView.iconView = ivAppIcon
            adView.priceView = tvPrice
            adView.starRatingView = rtbStars
            adView.storeView = tvStore
            adView.mediaView = mvContent
        }

        // Request Ad
        val adLoader = AdLoader.Builder(adView.context, "NATIVE_AD_KEY")
            .forNativeAd { nativeAd ->
                nativeAd.advertiser?.let { advertiser ->
                    tvAdvertiser.text = advertiser
                }

                nativeAd.body?.let { body ->
                    tvBody.text = body
                }

                nativeAd.callToAction?.let { cta ->
                    btnCta.text = cta
                }

                nativeAd.headline?.let { headline ->
                    tvHeadline.text = headline
                }

                nativeAd.icon?.let { icon ->
                    ivAppIcon.setImageDrawable(icon.drawable)
                }

                nativeAd.price?.let { price ->
                    tvPrice.text = price
                }

                nativeAd.starRating?.let { rating ->
                    rtbStars.rating = rating.toFloat()
                }

                nativeAd.store?.let { store ->
                    tvStore.text = store
                }

                adView.setNativeAd(nativeAd)
            })
            .withNativeAdOptions(NativeAdOptions.Builder().build())
            .build()
        adLoader.loadAd(AdRequest.Builder().build())
    }
}

Full source code:

• layout_native_ad.xml
• NativeAd.kt
• Usage

Answer 2

You should use AndroidView to wrap AdMob AdView

From the docs:

To include a view element or hierarchy, use the AndroidView composable. AndroidView is passed a lambda that returns a View. AndroidView also provides an update callback that is called when the view is inflated. The AndroidView recomposes whenever a State read within the callback changes.

AndroidView(
    factory = { context: Context ->
        AdView(context).apply {
            // config AdView 
        }
    },
    update = { adview ->
    }
)