Android’s Jetpack Compose and Admob ads

BannerAds.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    MobileAds.initialize(this) {}
    setContent {
        JetpackAdmobDemoTheme {
            // A surface container using the 'background' color from the theme
            Column(
                Modifier
                    .fillMaxSize()
                    .background(color = Color.LightGray),
            ) {
                TopAppBar(
                    title = {
                        Text(
                            getString(R.string.admob_demo),
                            maxLines = 1,
                            overflow = TextOverflow.Ellipsis,
                            color = Color.White
                        )
                    },
                    colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = MaterialTheme.colorScheme.primary)
                )
                AdmobBanner(modifier = Modifier.fillMaxWidth())
            }
        }
    }
}

@Composable
fun AdmobBanner(modifier: Modifier = Modifier) {
    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = { context ->
            // on below line specifying ad view.
            AdView(context).apply {
                // on below line specifying ad size
                //adSize = AdSize.BANNER
                // on below line specifying ad unit id
                // currently added a test ad unit id.
                setAdSize(AdSize.BANNER)
                adUnitId = "ca-app-pub-3940256099942544/6300978111"
                // calling load ad to load our ad.
                loadAd(AdRequest.Builder().build())
            }
        }
    )
}

BannerAdsInsideList.kt

// Display banner ad’s inside a list

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        MobileAds.initialize(this) {}
        setContent {
            JetpackAdmobDemoTheme {
                // A surface container using the 'background' color from the theme
                Column(
                    Modifier
                        .fillMaxSize()
                        .background(color = Color.LightGray),
                ) {
                    TopAppBar(
                        title = {
                            Text(
                                getString(R.string.admob_demo),
                                maxLines = 1,
                                overflow = TextOverflow.Ellipsis,
                                color = Color.White
                            )
                        },
                        colors = TopAppBarDefaults.smallTopAppBarColors(containerColor = MaterialTheme.colorScheme.primary)
                    )
                    AdmobBanner(modifier = Modifier.fillMaxWidth())
                    val data = generateData()
                    MyComposeList(
                        data = data, modifier = Modifier
                            .fillMaxWidth()
                            .weight(1f)
                    )

                }

            }
        }
    }

    fun generateData(): MutableList<Any> {
        val data = mutableListOf<Any>()
        data.add(
            DataItem(
                "Tesla Model S",
                "https://stimg.cardekho.com/images/carexteriorimages/930x620/Tesla/Model-S/5252/1611840999494/front-left-side-47.jpg"
            )
        )
        data.add(AdDataItem("Test 1"))
        data.add(
            DataItem(
                "Testla Model 3",
                "https://images.91wheels.com//assets/c_images/gallery/tesla/model-3/tesla-model-3-0-1626249225.jpg"
            )
        )
        data.add(AdDataItem("Test 2"))
        data.add(
            DataItem(
                "Tesla CyberTruck",
                "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Tesla_Cybertruck_outside_unveil_modified_by_Smnt.jpg/640px-Tesla_Cybertruck_outside_unveil_modified_by_Smnt.jpg"
            )
        )
        return data;
    }
    
// Data Class
    
data class AdDataItem(val title: String)

data class DataItem(
    val text: String?,
    val image: String?,
)

// List Item UI
@Composable
fun MyComposeList(
    modifier: Modifier = Modifier,
    data: List<Any>,
) {
    LazyColumn(state = rememberLazyListState()) {
        items(data.size) {
            val item = data[it]
            if (item is DataItem) {
                MySimpleListItem(item = item)
            } else {
                AdmobBanner(modifier)
            }
        }
    }

}

@Composable
fun MySimpleListItem(item: DataItem) {
    Box(
        Modifier
            .padding(16.dp)
    ) {
        Card {
            Image(
                painter = rememberAsyncImagePainter(item.image),
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .fillMaxWidth()
                    .aspectRatio(1.8f)
            )
            item.text?.let {
                Text(
                    text = it,
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color.Black.copy(0.4f))
                        .padding(8.dp, 4.dp, 8.dp, 4.dp),
                    fontSize = 18.sp,
                    color = Color.White,
                )
            }
        }
    }
}

@Composable
fun AdmobBanner(modifier: Modifier = Modifier) {
    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = { context ->
            // on below line specifying ad view.
            AdView(context).apply {
                // on below line specifying ad size
                //adSize = AdSize.BANNER
                // on below line specifying ad unit id
                // currently added a test ad unit id.
                setAdSize(AdSize.BANNER)
                adUnitId = "ca-app-pub-3940256099942544/6300978111"
                // calling load ad to load our ad.
                loadAd(AdRequest.Builder().build())
            }
        }
    )
}

// I have used the Coil gradle dependency to load the images.
implementation("io.coil-kt:coil-compose:2.4.0")

InitAdmob.kt

// Integrate AdMob SDK:

// TODO: Add the following dependency to your app’s build.gradle file
implementation 'com.google.android.gms:play-services-ads:22.4.0'


<!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-3940256099942544~3347511713" />


class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        MobileAds.initialize(this) {}
        MobileAds.setRequestConfiguration(
            RequestConfiguration.Builder().setTestDeviceIds(listOf("ABCDEF012345")).build()
    }
}