Issues upgrading a Cordova android project

I recently had to update a cordova project, that hadn’t been touched for a while. The iOS port updated fine, however I had a number of difficulties updating the android project.

This included a number of issues:

  • Unable to build project through bash
  • Unable to build project in Android Studio
  • Links, images to external sources no longer working
  • An image being chopped weirdly on older android devices

Upgrade Cordova

I had previously imported the project into Android Studio and had managed to build and export an APK file fine. This time however on returning, I was unable to do so. After reading about a new Cordova release that resolved the building process on android, I decided to just upgrade Cordova (5.0) and the project.

Building the project

I then selected ‘Import Project’ and selected the Cordova android folder. After it successfully imported, I tried to build the project, however received another error.

It was regarding an issue for languages. I added the following within “android {}” in “/platforms/android/build.gradle”.

lintOptions { abortOnError false
}

This seemed to resolve the build error and I could now build and run the app on an android device.

Whitelist Content

Unfortunately whilst the project did successfully build, data linked with external sources (images and data from the app’s API) were no longer being shown. This was due to a stricter security model and requires you to specifically whitelist content that is allowed.


I put this into the root config.xml file and performed the build again and content from the API started to appear (please put exact website locations where possible). To allow emails and phone numbers to work I needed to add the following to the config.xml file too.


This resolved the content loading issues I had.

Resolving chopped images

I use a carousel on a particular page and for some reason on older android devices only, only half the image was showing. It would briefly show the full image and then chop it in half.

I added the following to the image’s parent container (li) and the slider (ul) to be certain.

-webkit-backface-visibility: hidden;

This seemed to resolve the issue.

Finally

Everything seemed fine after this. It was annoying at the time, since what I assumed would take under an hour to do eventually took a lot longer. The following resources helped:

  • http://stackoverflow.com/questions/30345879/error-when-running-cordova-build-release-android
  • https://quickleft.com/blog/4-steps-to-minimizing-rendering-issues-in-cordova-applications/
  • https://cordova.apache.org/docs/en/4.0.0/guide_appdev_whitelist_index.md.html