DEV Community

Cover image for Guide to integrate Huawei Ads Kit in Banking app (Kotlin)
Ribhav
Ribhav

Posted on

Guide to integrate Huawei Ads Kit in Banking app (Kotlin)

Introduction
In this article, I will be integrating Huawei Ads Kit in an Application. I will be using Banner Ads. Banner Ads are rectangular ad images located at the top, middle or bottom of an application’s layout that are automatically refreshed at intervals and guides to the advertiser’s page when clicked.

Ads Kit
Huawei Ads Kit leverages the vast user base of Huawei devices and Huawei's extensive data capabilities to provide you with the Publisher Service, helping you to monetize traffic.
HMS Ads Kit has 7 types of Ads kits. Now we can implement Banner Ads in this application.

Use Case
The Ads Kit will be used to display Banner Ads in a Banking Application which can perform basic functions such as Enter Pin, Withdraw Money, Deposit Money and Check Balance.

Requirements

  1. Any operating system (MacOS, Linux and Windows).
  2. Must have a Huawei phone with HMS 4.0.2.300 or later.
  3. Must have a laptop or desktop with Android Studio, Jdk 1.8, SDK platform 26 and Gradle 4.6 installed.
  4. Minimum API Level 21 is required.
  5. Required EMUI 9.0.0 and later version devices.

Integrate HMS Dependencies

  1. First register as Huawei developer and complete identity verification in Huawei developers website, refer to register a Huawei ID.
  2. Create a project in android studio, refer Creating an Android Studio Project.
  3. Generate a SHA-256 certificate fingerprint.
  4. To generate SHA-256 certificate fingerprint. Choose View > Tool Windows > Gradle > Signingreport > SHA256 code. Or use cmd as explained in SHA256 CODE
  5. Create an App in AppGallery Connect.
  6. Download the agconnect-services.json file from App information, copy and paste in android Project under app directory, as follows.
  7. Enter SHA-256 certificate fingerprint and click Save, as follows.
  8. Add the below maven URL in build.gradle(Project) file under the repositories of buildscript, dependencies and allprojects, refer Add Configuration.
maven { url 'http://developer.huawei.com/repo/' }
classpath 'com.huawei.agconnect:agcp:1.6.0.300'
Enter fullscreen mode Exit fullscreen mode
  1. Add the below plugin and dependencies in build.gradle(Module) file.
apply plugin: 'com.huawei.agconnect'
Enter fullscreen mode Exit fullscreen mode

// Huawei AGC

implementation 'com.huawei.agconnect:agconnect-core:1.6.0.300'
Enter fullscreen mode Exit fullscreen mode

// Ads Kit

Implementation 'com.huawei.hms:ads-lite:13.4.40.301'
Enter fullscreen mode Exit fullscreen mode
  1. Now Sync the gradle.
  2. Add the required permission to the Manifestfile.xml file.
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<!--check wifi state--> 
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
Enter fullscreen mode Exit fullscreen mode

Development

  1. Adding Banner view to activity_main.xml

<com.huawei.hms.ads.banner.BannerView
     android:id="@+id/banner_ADview"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:layout_marginTop="10dp"
     android:layout_marginBottom="10dp"
     hwads:adId="@string/banner_ADid"
     hwads:bannerSize="BANNER_SIZE_360_57" />
Enter fullscreen mode Exit fullscreen mode
  1. Add this code to implement Banner Ads
//Initialize the Huawei Ads SDK
  HwAds.init(this)

  // To get Banner view from the activity_main.xml. It will display at bottom of the page.
  val bottomBannerView = findViewById<BannerView>(R.id.banner_ADview)
  val adParam = AdParam.Builder().build()
  bottomBannerView.adId = getString(R.string.banner_ADid)
  bottomBannerView.bannerAdSize = BannerAdSize.BANNER_SIZE_SMART
  bottomBannerView.loadAd(adParam)

// Call new BannerView to create a BannerView class. It will display at top of the page.
 val topBannerView = BannerView(this)
 topBannerView.adId = getString(R.string.banner_ADid)
 topBannerView.bannerAdSize = BannerAdSize.BANNER_SIZE_SMART
 topBannerView.loadAd(adParam)
 val rootView = findViewById<RelativeLayout>(R.id.root_view)
 rootView.addView(topBannerView)
Enter fullscreen mode Exit fullscreen mode

Cloud Debugging
Use Cloud Debugging in HMS Toolkit to debug the app on a real device.
To use Cloud Debugging, you need to sign in using a HUAWEI ID, complete identity verification, and then authorize the sign-in.

  1. Choose HMS > CloudDebugging.
  2. You can use Available Devices. Select a device and click RUN.

Result

Image description

Tips and Tricks

  1. Set minSDK version to 24 or later, otherwise you will get AndriodManifest merge issue.
  2. Make sure you have added the agconnect-services.json file to app folder.
  3. Make sure you have added SHA-256 fingerprint without fail.
  4. Make sure all the dependencies are added properly.

Conclusion
In this article, we have learnt integration of Ads Kit in Banking application. It provides developers different capabilities to deliver good quality ads content to users.
Reference
Ads Kit: Documentation

Top comments (0)