Huawei Ads Kit — Banner Ads - Huawei Developers

In this article, I will try to explain how you can easily implement Huawei Banner Ads to your project and monetize your application right away!
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
What is Banner Ad
Banner ads are rectangular images that can be placed to the top, middle, or bottom of your app’s screen. Banner ads refresh automatically at regular intervals. When a user taps a banner ad, the user is redirected to the advertiser’s page in most cases.
To implement banner ads, you need to implement Huawei Ads Kit dependency to your project which I explained below.
How to Implement Ads Kit
Things you need to have
1) A Huawei Developer Account (It needs to be Enterprise Level account for monetization)
2) A Huawei phone with HMS 4.0.0.300 or later
3) A computer with Android Studio , Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
Things Need To Be Done Before Implementation
First things first HMS Core needs to be implemented to the your project. To see how to implement HMS Core please refer this link.
After HMS Core implementation, Ads Kit dependency needs to be added in app level “build.gradle” file
Code:
dependencies {
...
//Huawei Ads Kit Dependency
implementation 'com.huawei.hms:ads-lite:13.4.32.300'
...
}
4) Configure obfuscation scripts to prevent HUAWEI Ads kit from being obfuscated. Add the following two lines of code to the app/proguard-rules.pro
Code:
-keep class com.huawei.openalliance.ad.** { *; }
-keep class com.huawei.hms.ads.** { *; }
After Completing the steps above. All you need to do is initialize Huwei Ads by calling HwAds.init() method in your application. Then the application is ready to implement all kind of various ad types which I will show below.
Code:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
...
// Initialize the HUAWEI Ads SDK.
HwAds.init(this);
...
}
Implementing Banner Ads
To implement Banner Ad, BannerView object needs to be initialized either with XML or directly in code.
Adding Banner Ads Through XML
Create BannerView in your XML
Code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:hwads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BannerAdsActivity">
...
<!--Adding BannerView Through XML-->
<com.huawei.hms.ads.banner.BannerView
android:id="@+id/hwBannerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
hwads:adId="testw6vs28auh3"
hwads:layout_constraintEnd_toEndOf="parent"
hwads:layout_constraintStart_toStartOf="parent"
hwads:layout_constraintTop_toTopOf="parent"
hwads:bannerSize="BANNER_SIZE_360_57"
/>
...
</androidx.constraintlayout.widget.ConstraintLayout>
Call it from your class & load the add.
Code:
override fun onCreate(savedInstanceState: Bundle?) {
....
// Obtain BannerView based on the configuration in XML layout.
val adParam = AdParam.Builder().build();
hwBannerView.loadAd(adParam);
...
}
Run the application and the result will be like below.
Adding Banner Ads Programmatically Without XML
Lets create another Banner ad at the bottom of our view without using XML. All you need to do is creating & initializing banner ad , adding it to the specific layout, then loading the ad as below.
Code:
override fun onCreate(savedInstanceState: Bundle?) {
...
val adParam = AdParam.Builder().build();
val bannerView = BannerView(this);
// "testw6vs28auh3" is a dedicated test ad slot ID. To get real one, you need to have an enterprise level Huawei developer account.
bannerView.setAdId("testw6vs28auh3");
bannerView.setBannerAdSize(BannerAdSize.BANNER_SIZE_320_50);
val parentLayout = findViewById<ConstraintLayout>(R.id.clBannerMain);
val set = ConstraintSet();
// set view id, else getId() returns -1
bannerView.id = View.generateViewId()
parentLayout.addView(bannerView,0)
set.clone(parentLayout)
set.connect(bannerView.id, ConstraintSet.BOTTOM, parentLayout.id, ConstraintSet.BOTTOM, 0);
set.applyTo(parentLayout);
bannerView.loadAd(adParam)
...
}
As shown above, we have successfully added second banner ad to our program without touching the xml.
Optional: Adding Ad Listener
After implementing banner ads to your project, if you want to proceed further, you can add Ad listener to listen ad events like is AdLoaded is AdFailed is AdClicked etc.
Code:
override fun onCreate(savedInstanceState: Bundle?) {
...
val adListener = object : AdListener() {
override fun onAdImpression() {
super.onAdImpression()
}
override fun onAdFailed(p0: Int) {
super.onAdFailed(p0)
}
override fun onAdLeave() {
super.onAdLeave()
}
override fun onAdClicked() {
super.onAdClicked()
}
override fun onAdClosed() {
super.onAdClosed()
}
override fun onAdOpened() {
super.onAdOpened()
}
override fun onAdLoaded() {
super.onAdLoaded()
}
}
//Add Ad Listener to which ad you want to listen.
bannerView.adListener = adListener
....
}
As you can see, it is really easy to implement banner ads to your android application with Huawei Ads Kit. Stay tuned for other ad types. You can find the github project below.
Resources
https://github.com/Disav0wed/Huawei_Banner_Ads_Demo
https://developer.huawei.com/consumer/en/doc/development/HMS-Guides/ads-sdk-guide-banner
https://developer.huawei.com/consumer/en/codelab/HUAWEIAdsSDK-BannerAds/index.html#2
Related Links
Thanks to Ibrahim R. Serpici for this article.
Original post: https://medium.com/huawei-developers/huawei-ads-kit-banner-ads-1130da8d40da