Android 4.3 and earlier are

Michel_K_ · ‎07-24-2015

I got a serious display problem which delays the publishing time of my app. It is not likely to come from the XDK but might be caused by incompatibilities between some software components. I nevertheless describe it here in case of one of you had encountered such an issue.

My app works well in the emulator and on an iPad. The problem arises only on an Androïd real device, through the App Preview or in a built version : in my case it’s a tablet Samsung Tab 2 10.1, running the 4.1.2 Androïd version.

I attach 4 screenshots showing the differences between normal displays on iOS (A1 and B1) and the damaged displays (A2 and B2) on Androïd : in the first example, a white rectangle appears in the right bottom corner of the screen ; some of the blue listview items have an incorrect appearance as well as some of the yellow listview buttons (these listview items are programmatically built).

This app is based on Jquery mobile. The main part is a multi-page ; the first page uses geolocation (Google Maps).

I would be very thankful if somebody can help me.

Amrita_C_Intel · ‎07-24-2015

Hi Michael,

Can you send your project? So that I can test on my side.

Amrita_C_Intel · ‎07-24-2015

Also are you building for android or android crosswalk?

PaulF_IntelCorp · ‎07-24-2015

Android 4.3 and earlier are very difficult webviews to work with. That is why we recommend you ALWAYS use Crosswalk for Android (as Amrita is suggesting). See these articles for some background:

Rebuild your app with Crosswalk and it should fix the issues.

PaulF_IntelCorp · ‎07-27-2015

I send you a message as I can't send comments on the forum. They are all blocked by the word verification !

Thank you ! I carefully read these two documents. The issue isn't there as I built my app using Crosswalk for Androïd, as is stated in the mails I received after the build processes.

Here is the last one :

The Crosswalk build on Android for MVBD was successful.

You can download your application for both architectures in a zip file with this secure link

You can download your application for the x86 architecture with this secure link

You can download your application for the ARM architecture with this secure link

For your Crosswalk application on Android you may:

Submit the application to the Android Marketplace.
NOTE: Follow this guide for submitting both APKs to Google Play.

If you are reading this email on an Android device, you may be able to download and install directly using the appropriate link above if you have enabled installation from unknown sources on your device. Be sure to download and install the APK that matches the processor architecture of your device. If you are unsure of your device's processor architecture, install and run the free CPU-Z application from the Android Play Store (see the "Kernel Architecture" field on the "System" tab).

I'm very sorry about the word verification issues, we recently had a spam storm against our site and had to tighten the posting requirements to eliminate that problem.

So are you saying that you still see the odd issues regarding your layout even when you use the Crosswalk build? Do you see these when you use the Debug tab? Did you try using Crosswalk 14?

I highly recommend you debug this issue using the Debug tab and set your Crosswalk build option to 14. From the debug tab you can inspect and modify the CSS and layout to determine what is causing the problem, just as you would with a browser.

PaulF_IntelCorp · ‎07-27-2015

Hello Michel,

Amrita asked me to checkout your app because she is out this week on vacation. I downloaded your app and tried it on two different tablets: Nexus 7 and Galaxy Tab. I ran it using the Debug tab, which is identical to building with Crosswalk. I tried with Crosswalk 11 and Crosswalk 14 in the build settings. Both worked as expected, there were no artifacts like those you showed in your images in the first post to this thread: https://software.intel.com/en-us/forums/topic/563246

I then ran the app using the Test tab, which uses the "native" webview (it does NOT use Crosswalk). It also worked there on both tablets.

One final observation, the first several pages of the app were badly formatted in Crosswalk on both devices and on the Nexus when using the native webview (via Test tab). The Nexus 7 is running Android 5.1.1, which is currently using a Chrome 44 webview (Android 5 webviews are updated regularly by the Google store). The Crosswalk 14 option uses a Chrome 43 webview. The Samsung Galaxy Tab is running Android 4.4 and is using a "native" Chrome 30 webview. Android devices that run Android 4.3 and less use a non-Chrome webview that is very old and does not work well.

My suspicion is that you are using an Android 4.4 or less device for testing and are testing in the native webview using the Test tab. Please use the Debug tab so you are testing against Crosswalk and please build and install for Android-Crosswalk -- it is going to be very difficult to make your app work well across a variety of Android devices if you are using the native webview. See my previous post for additional details: https://software.intel.com/en-us/forums/topic/563246#comment-1833007

Note that this webview problem is an Android problem, not an XDK problem. We provide the Crosswalk solution to address that Android problem. This is the only way we can fix this Android problem for you. The XDK builds standard Cordova apps, so using Cordova or PhoneGap will result in the same issues.

Paul

What I saw on Nexus 7 and Samsung Tab using Debug tab (Crosswalk):

What I saw on Nexus 7 and Samsung Tab using Debug tab (Crosswalk) and on Nexus 7 using Test tab (native Android 5.1.1):

Display issue on an Androïd real device