Tag Archives: android api 31

Compiling Old Ionic Cordova Projects for Android API 32 and Google Billing Client 4.0

You have developed a good and nice project with Cordova a few years back and now need to publish an update then chances are you are stuck like me.

My project was just 2 years old and now while trying to update Google wanted support for API level 31 and Google Billing Client 4.0.0 at minimum. I expected this would be a piece of cake – update the Android platform and the libraries. But, no, I was welcomed by the perils of  community driven softwares with frequent core updates.

While trying to update I found that most libraries had never been updated in the past few years. And there started the first problem – library incompatibility.

After spending a lot of time in finding and troubleshooting the API level compatibility was achieved. I must mention that it was only with help of Android Studio it was possible to  understand what was going wrong. Android Studio’s logcat was more verbose and showed proper errors (Ionic cordova verbose mode was showing errors being thrown from core – and didn’t have any useful information).

And then came the second problem – the Billing library update. Which needed an update of the Purchase plugin also. Now the guide links mentioned in the plugin’s page on NPMJS takes to guides that has least to none to irrelevant information. After searching around got the actual useful guides.

And after all that I was happy that all issues are solved now time to publish the update. But no, there was more hurdles 🙂 . The splash screen icon changed back to Cordova default. That was my fault I missed the point that the splash screen policy changed. I thought – no problem – let me regenerate the splash and the icons using the cordova-res command. But the plan didn’t work  – cordova-res command didn’t generate the proper splash and icons required for Android 31+
Tried to generate through Android Studio ( https://developer.android.com/studio/write/image-asset-studio ), that generated the icons properly but it somehow broke the application (added configs in AndroidManifest which didn’t work). But I believe with a little time and analysis that could be solved.
As I was in a hurry, I created the icons manually following Google’s guide on splash ( https://developer.android.com/develop/ui/views/launch/splash-screen ) and little trial and error.
Also needed to add the below line under ‘<platform name=”android”>‘. The color needs to be what you want

<preference name="AndroidWindowSplashScreenBackground" value="#ffffff" />

Below are some of the strange issues I encountered and what I did:

First I needed to find the appropriate Cordova version that supports API level 31 and 32 and install it. Here this guide helped
https://cordova.apache.org/docs/en/11.x/guide/platforms/android/
After updating the Cordova version and other plugins. I tried to build the app but it failed. Tried building using Android Studio and found that "GradlePluginGoogleServicesVersion" need an updated version - Android Studio suggested the min version and I used that. I added the following in config.xml

<preference name="GradlePluginGoogleServicesVersion" value="4.3.14" />

also needed to do the below. Even after adding the above there were errors. Someone suggested to set that false. I did and there was no problem. 

<preference name="GradlePluginGoogleServicesEnabled" value="false" />
I needed the app to run full screen and hide the navigation bar. The internet is full of some weird solution - changing the color and transparency of the navigation bar. Albeit that didn't work. 
I tried some native codes - modifying the generated native codes in Android studio and that did work. But that was little cumbersome process. On more and more searching for a simpler and better way found this - 

Add this to config.xml
<preference name="Fullscreen" value="true" />
For the icons and the splash I did this

Created a square frame/layer of 288x288px with the same background colour as the page your loading the icon on and put your logo in the middle of this square. Your logo needs to fit within 192px or 160px as the case maybe. (https://developer.android.com/develop/ui/views/launch/splash-screen)

This website can help - https://easyappicon.com/
Was having problems with Native audio. Found that initialization at proper point is important. Initializing in the constructor and within platform.ready is working best

this.platform.ready().then(() => {

});
Talking about Native Audio - the first was I was getting the error - "Native Audio Plugin is not installed or added". But it was. 

This issue of plugin not found while the plugin is installed and added to code is due to version incompatibility. Wished the message was appropriate - the message with respect to the problem is complete haywire.
Needed to add the following to config.xml

<preference name="AndroidXEnabled" value="true" />
<preference name="enableJetifier" value="true" />
Started getting Annotation error at one point. Solved by adding the following 

ionic cordova plugin add cordova-plugin-androidx-adapter
ionic cordova plugin add cordova-plugin-androidx
After adding cordova in-app purchase plugins started getting Lint errors. Needed to add the following to build.gradle in the app folder

android {
   lintOptions {
      checkReleaseBuilds false
   }
}
This guide helped in implementing in-app purchase. But this doesn't have a direct link in the plugin page. 
https://ionicframework.com/docs/v5/native/in-app-purchase-2

This has the methods but all haven't been implemented
https://github.com/j3k0/cordova-plugin-purchase/tree/master/api
I am very thankful to Damian Tarnawsky The author of https://ionic.zendesk.com/hc/en-us/articles/7891143965975-Migrating-to-Cordova-Android-11

In summary the main things to work on

  1. Plugin versions update
  2. Appropriate Gradle and JAVA versions
  3. Appropriate Cordova and android versions
  4. Proper logo and splash sizes
  5. Appropriate entries in config.xml

And most importantly if Ionic and Cordova is throwing errors that doesn’t make sense – try building in Android Studio.