Huawei Map Kit & Native Ads (Track Corona App)
I coded an Android app which uses Huawei Map Kit and Huawei Native Ads Kit together. The app has a single screen, this screen has a fullscreen Map and Bottom Sheet Dialog. Users can select “World Wide” for see all countries’ Corona information or users can select specific country from list for same purpose. The information shows in custom InfoWindow.
The purpose of this article is how to use Huawei Native Ads in RecyclerView, how to use Huawei Map Kit and marker operations. So I will not mention parts such as MVP, binding, UI.
Huawei App Gallery
Offical permission is required to publish apps containing Coronavirus data on Huawei App Gallery. Track Corona is my personal app and I don’t have any permission so the app is not available on the Huawei App Gallery. But you can download APK on bottom of this article.
About the data?
I used 2 API on this app.
You can access the API I used to get country list and country flags here
You can access the API I used to get current Coronavirus data here
HMS & Map Kit & Native Ads Kit Integrations
First of all you must integrate HMS to project. I am not explain this steps because it will take too much time. You can look at this story.
I added two lines to build.gradle for integrate Map Kit and Ads Kit.
There are required permissions on Manifest.
Using Native Ads as RecyclerView Item
I want to show a Native Ads in 40 country rows. When mapping from response class to RecyclerView Adapter class, I set isCountry flag as false so that it will be 1 in 40 items. I willl give more details later in the article about this case.
Different scenarios can be produced for this case. The main purpose is using Native Ads in RecyclerView as item, so I continue with this scenario.
In the code block above, when if(i % 40 == 0) adding a new AdapterItem with isCountry = false to the adapterItems list. This item will be displaying as NativeAds in the CountryAdapter.
In getItemViewType() function, according to the isCountry() value, it is decided whether to show country data or an advertisement in the relevant line.
I will not add layout code blocks there. There are 2 layout. One for call country information layout and another one for Native Ads layout.
You can access the github repository with the source codes from the references at the bottom of the page.
Huawei Native Ads Kit returns ad informations as NativeAd object. I get the NativeAd object in MainActivity and pass the object to CountryAdapter in constructer. So, I set the ads data to the components ad_title, ad_media, ad_source, ad_call_to_action in adapter.
After the standard Huawei Native Ads configuration is finished, the NativeAd object is now available. It is possible to customize the ad with the ChoisePosition feature. There are other possible ChoisePosition tags below.
There is no other action left on the Native Ads side.
Map Kit Process
Calling initHuaweiMap() function in onCreate. When the binding.mapView.getMapAsync(this) line is completed, the overridden onMapReady(HuaweiMap huaweiMap) function is called. The OnMapReadyCallback must be implemented in the activiy for this procedure. As a result of these actions, the map is now available and presenter.mapReady() function is called.
In the mapReady() function, an API request is sent to get country data.
An adapter definition is made for the popup that opens when the markers shown on the map are clicked with the huaweiMap.setInfoWindowAdapter(new InfoWindowAdapter(this)) line.
In getInfoContents() function, setting values for title, deaths, patients, recovered, updated components in custom_marker_info layout. As a result of this process, the InfoWindow that opens when the markers are clicked has been customized. country = (Country) marker.getTag() line is used to get the detailed information of the clicked marker. I will give a little more detail about this process later in the article.
When the user wants to see the data of a country or “World Wide” item selected from the list, the API request is prepared and sent. And then calling mapCoronaData() function with the response returned from the API. After the mapping operation in mapCoronaData() function, the functions clearHuaweiMap(), bottomSheetSetCollapsed(), setMarker() are calling.
In the clearHuaweMap() function, the markers on the map, if any are removed.
The setMarker() function takes the country list data as parameters and displays the country list data as a marker on the map. After creating the MarkerOptions object, the marker position is set with position(), the marker text with title(), the marker icon is set with icon(), also a little transparency is added to the markers with alpha(). The data used in the InfoWindowAdapter class I explained at the beginning of the article is set with the marker.setTag(country) line.
I use the setMarker() function to show data for all countries. Also, I use same function to show a marker when a single country is selected from the list. This is the reason to use the if block at the end.
The bottomSheetSetCollapsed() function is used to set the maximizing list as Collapsed.
When click the country, in addition to the above functions the moveCamera() function is calling and The position for the huaweiMap.animateCamera() function is centered on the map.
You can access the source code of the application from the GitHub link below. Also, If you want to try the Track Corona for testing purposes, the link of the APK is below.
https://onebox.huawei.com/p/10b83d37e2fcac817ccfe59560f66220
