👨🏼‍💻Combining Native Ads with Jetpack Compose Lazy Grid
Hi there! In this blog, we’ll explore the seamless integration of Huawei Ads Kit with Jetpack Compose’s Lazy Grid Layout. So let’s dive in!
Introduction
HMS Ads Kit is a powerful ad platform developed by Huawei that provides various ad formats, including native ads. On the other hand, Jetpack Compose is a new tool in the Android development toolkit that simplifies the creation of complex UI layouts.
In this blog, we’ll discuss how to use HMS Ads Kit native ads with Jetpack Compose Lazy Grid. We’ll explore the benefits of using native ads, how to integrate HMS Ads Kit native ads into your app, and how to create a Lazy Grid layout using Jetpack Compose.
Ads Kit
Huawei Ads Kit is a comprehensive mobile advertising platform designed to help app developers and advertisers connect with their target audience. It offers a range of ad formats and tools, including banner, native, and video ads, as well as audience targeting and analytics features.
Jetpack Compose
Jetpack Compose is a modern toolkit for building native Android UIs developed by Google. It simplifies the process of creating beautiful and responsive UIs with a declarative approach that allows developers to write less code. With Jetpack Compose, developers can build UIs faster and with fewer bugs, resulting in better user experiences.
Integration Process
- Integrate HMS Core
- Add require dependencies
- Coding
- Result
1. HMS Core Integration
HMS Core is Huawei’s mobile service framework that provides basic services like HUAWEI ID, payments, and Notifications for Huawei users.
To simplify the article, we’ll skip some integration steps. For more information, see the References.
IMPORTANT: To use Jetpack Compose, select “Empty Compose Activity” when creating an Android Studio project.
IMPORTANT: Android devices require SIM card to use HMS ads kit.
2. Add require dependencies
Retrofit, Simplifies network requests and JSON parsing for Android apps.
Coil Compose library, which provides utilities for loading and displaying images in Compose-based apps.
3. Coding
You can access the API that I used for game data shown in the list from here.
The FeedViewModel class is responsible for managing the list of games and ads that will be displayed in a feed UI component. It defines a LiveData object to hold the list of FeedItem objects and exposes it as an immutable value to UI components. It uses Retrofit to load games from a backend API and Huawei Ads to load native ads. The class includes a position variable to keep track of where the next ad should be displayed and uses coroutines to perform asynchronous operations.
FeedScreen is a Jetpack Compose function that defines the UI for a feed of games and ads
The LaunchedEffect composable is used to launch a coroutine when the viewModel changes. In this case, it calls the loadGames function on the viewModel to load the list of games and ads asynchronously.
The list variable is then obtained using the observeAsState extension function on the viewModel.items LiveData. This variable represents the current list of items in the feed and is updated whenever the items value changes in the FeedViewModel.
The UI is defined using the Column and LazyVerticalGrid composable from Jetpack Compose. The Column composable is used to display a title for the feed, while the LazyVerticalGrid composable is used to display the items in a grid layout.
The items function of the LazyVerticalGrid takes the list variable as its parameter and iterates over each FeedItem object in the list. The when statement is used to differentiate between Ad and Feed items and display the appropriate UI using the AdCard and GameCard composable functions.
The AdCard composable function is responsible for displaying a single native ad. It takes a NativeAd object as a parameter and creates a Card with a specific layout. The ad's image, title, and ad source are displayed along with an "Ad" flag in the bottom right corner. The ad's NativeView is added as a child view to a ComposeView, which allows the ad to be displayed alongside other composable. The AndroidView composable is used to integrate the NativeView into the Compose layout.
MainActivity displays FeedScreen using FeedViewModel.
4. Results
Conclusion
This blog post provides a example of how to integrate native ads in Jetpack Compose. Lazy grid layout in Jetpack Compose provides easy and efficient way to display dynamic content. Additionally, integrating native ads into the layout allows for a seamless user experience while generating revenue or app. You can find sample code under the References title.
