[Huawei Developers] Efnan Akkus:
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!

[IMG="im1"]https://miro.medium.com/max/1050/1*-33Sz0QHC_DC5Xo3lAvULg.png[/IMG]

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.

[IMG="im2"]https://miro.medium.com/max/570/0*pbMsYAUf4Ztdaz7x[/IMG]

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

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

-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.

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

<?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.

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.

[IMG="im3"]https://miro.medium.com/max/810/1*ORvP2fIzWWbI3GJyyHa5RA.png[/IMG]

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.

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)

...

}

[IMG="im4"]https://miro.medium.com/max/690/1*YDO6BCBtxqtmhYehoULydw.png[/IMG]

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.

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