Hey there, Android dev! 🎉 Have you jumped on the Jetpack Compose train yet? If not, now’s the perfect time! But what if you’re wondering how to integrate those trusty old Android Views like AdView into your shiny new Compose layouts? Don’t worry! It’s easier than you might think. Let’s break it down with some fun, everyday analogies and simple steps. Ready? Let’s go!

What is Jetpack Compose?

Imagine Jetpack Compose as a sleek, modern smartphone with all the latest features. It makes creating UIs a breeze compared to the classic way with XML. But what if you still love your old-school, flip phone features? You don’t have to give them up! You can mix and match, using both new and old features together.

Step-by-Step Guide to Using Android Views in Jetpack Compose

Step 1: Set Up Your Project

First, make sure your project is ready to use Jetpack Compose and your old Android Views. Add the necessary dependencies to your build.gradle file.

dependencies {
    implementation "androidx.compose.ui:ui:1.2.0"
    implementation "androidx.compose.material:material:1.2.0"
    implementation "androidx.compose.ui:ui-tooling:1.2.0"
    implementation "androidx.compose.runtime:runtime-livedata:1.2.0"
    implementation "androidx.activity:activity-compose:1.3.1"
    implementation "com.google.android.gms:play-services-ads:20.6.0" // For AdView
    // Other dependencies...
}

Step 2: Create Your Compose Layout

Think of Jetpack Compose as a new notebook. It’s fresh and easy to write in. But sometimes, you need to clip an important note from your old notepad into your new one. Here, we’ll create a Compose layout and embed an Android View (AdView) into it.

Here’s a simple Compose layout:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.example.composeadview.ui.theme.ComposeAdViewTheme
import com.google.android.gms.ads.AdRequest
import com.google.android.gms.ads.AdView
import com.google.android.gms.ads.MobileAds

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        MobileAds.initialize(this) {}
        setContent {
            ComposeAdViewTheme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    Column(
                        modifier = Modifier.padding(16.dp)
                    ) {
                        Text("Hello, Jetpack Compose!")
                        Spacer(modifier = Modifier.height(16.dp))
                        AndroidViewAdView() // Adding AdView in Compose
                    }
                }
            }
        }
    }
}

Step 3: Embed an Android View (AdView) in Compose

Embedding an AdView is like pinning your favorite old photo onto a page in your new notebook. We use the AndroidView composable to include the AdView in our Compose layout.

Here’s how you do it:

import android.view.ViewGroup
import androidx.compose.runtime.Composable
import androidx.compose.ui.viewinterop.AndroidView
import com.google.android.gms.ads.AdRequest

@Composable
fun AndroidViewAdView() {
    val context = LocalContext.current
    AndroidView(
        factory = {
            AdView(context).apply {
                setAdSize(com.google.android.gms.ads.AdSize.BANNER)
                adUnitId = "ca-app-pub-3940256099942544/6300978111"
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                )
                loadAd(AdRequest.Builder().build())
            }
        }
    )
}

In this code:

• AndroidView is like a pin that holds the AdView to our Compose layout.
• factory creates the AdView.
• AdRequest.Builder().build() loads an ad into the AdView.

Final Touches

Now, when you run your app, you’ll see a modern Jetpack Compose layout with an integrated AdView. It’s like having the latest smartphone features with a touch of your beloved old-school elements.

Analogies to Help You Understand

1. Notebooks and Clippings: Think of Jetpack Compose as a new notebook. You can still clip and paste important notes from your old notepad (Android Views) into it.
2. New Gadgets with Old Features: Using Jetpack Compose is like using a modern smartphone. Embedding old Android Views is like keeping some features from your trusty old flip phone.
3. Pinning Photos: Embedding an AdView in Compose is like pinning a cherished photo onto a new page in your notebook.

Wrapping Up

Mixing Jetpack Compose with classic Android Views like AdView allows you to enjoy the best of both worlds. You get the sleek, modern UI development experience of Compose while still leveraging the powerful and familiar Android Views.

So next time you’re crafting your Android app, remember you don’t have to choose between new and old. Blend them together for a harmonious development experience. Happy coding! 🎨📱

This article is previously published on proandroiddev.com