Bug with WebView, Buttons and Update to the new Play Store SDK Requirements.

[Daniel Fitzgerald]

Hey guys, I'm having a few issues.

Now, I've had to update my apps for this new MinDSK Thing that Google Requires... and well.... Multiple things aren't right anymore.

First up is a minor annoyance, Button sizes have all screwed up.

Here's a Before and After Image....

BEFORE: (App Version 5.4) (Compiled September 2017)

AFTER: (App Version 5.5) (Compiled for Google Play - September 2018)

Note: I did not touch any settings for any buttons between the old and new versions., but as you can see, the buttons are much taller and stretched out of proportion.

Also, For reference, here's how that page appears in the AppInventor UI:

In the AppInventor, the buttons appear correctly.

===============================================

Problem #2. This is the Major Issue:

WEBVIEW seems to be broken.

I use a lot of WebView in this app because I am completley at a loss as to work out any other way to add a lot of formatted text into an app at once, so i simply add the HTML file to the app, then get the app to load the webview with the URL as:

file:///android_asset/icarus.html

Now, All HTML Files in Webview in all screens of the app that were added to it A YEAR AGO, all work fine.

But any New Page, or the update of any existing .html file causes webview to take up to 30 minutes to load on those pages.

Basically, Here's what happens, say i downloaded icarus.html from AppInventor, made a small change in my code editing program (I removed one line of text), then i re-uploaded it to Appinventor and Overwrote the original.
Now, that WebView sits at a slim little white bar for anywhere between 5 and 30 minutes before it loads.

Screenshots:

BEFORE: (App Version 5.4) (Compiled September 2017)

AFTER: (App Version 5.5)  (Compiled for Google Play - September 2018)

You can see the Thin White Line where the WebView should appear and load.

When it finally loads, it appears normally like the old version, just it takes FOREVER (Between 5 and 30 minutes) to load.

So, What's wrong with my WebView, Why is it working fine on everything added to the app a year ago, but on anything recently updated (Last Night) it takes up to 30 minutes to load.

If you wish to test it yourself, here's the Play Store Link:
https://play.google.com/store/apps/details?id=appinventor.ai_dazzajay85.STO_Guides

The pages with the affected WebView are:
Screen1 (The first thing that appears when the app loads, should have a WebView at the bottom)
App Patch Notes (Where i list every change the app gets in every update)
Join Our Fleet (Where i recruit other players of the game to join my team)

Every other page that i have not updated the HTML files in still work fine.
Examples:
Everything in... Pretty much every other page of the app.

[Chris Ward]

Hello Daniel

The thoroughness of your report is much appreciated - helps a lot.

1) Concerning the button sizing, your before and after images appear to be on different devices - so possibly the way you have defined the button sizes and positions is contributing to the problem. If we are really lucky, a quick fix would be on Screen1, Properties Palette, set sizing to "Responsive". If that fails, we need to see your Project File to help more. Note that there are known bugs in App Inventors' build of API 26 Apps (For Google Play). MIT is working on fixes for the next release. Also, some Android components have been updated by Google - WebView could well be one of them, I don't know for sure.

The App Inventor Designer View is only a rough guide to the appearance - it's more concerned with building the GUI, showing what components have been used rather than the finished display, which can never be rendered accurately on a computer because Android devices (like smartphones) have completely different aspect ratios and resolution (pixel density).

2)

any New Page, or the update of any existing .html file causes webview to take up to 30 minutes to load on those pages. 

 My gut feeling is that the new/modified HTML files have something critically different to the originals.

1. How are you creating the HTML files - has that method (or creation software) changed since last year?
2. Can you attach an example "good" HTML file and an example "bad" HTML file to this Post for us to study?

 

[Daniel Fitzgerald]

Although the devices that took the screenshots are different in the ones i posted above, the affected button sizes is the same on devices that are the same before & After.

So, here's screenshot from an Asus Nexus7 (2013 Model) before and after:

The width of the buttons is correct, the height isn't.

Before, Version 5.4, September 2017.

After, Version 5.5, September 2018.

Sizing is already set to Responsive.

2.

The software hasn't changed that I use for HTML. It's MS Frontpage 2003

Attached are two files, Before and After has been added to the file names for reference.

================================

EDIT


Apparently Admuncher SOMEHOW inserted an entire line of code into the HTML File when it was saved by FrontPage 2003

Literally, Admuncher put this into all the affected HTML Files at line 1:

<!-- Ad Muncher content start --><head><script type="text/javascript" src="http://interceptedby.admuncher.com/C9E7CF6711E60698/helper.js#0.16760.0" id="XwZy_MainScript"></script><link rel="stylesheet" href="http://interceptedby.admuncher.com/C9E7CF6711E60698/helper.css" type="text/css" media="all" /></head><!-- Ad Muncher content end -->

I will Uninstall that from my PC and try again and report back if it works.

[Chris Ward]

Hi again

Yeah, that Ad Muncher line could be the culprit.....hopefully it is.

However, both old and new HTML files are not properly formatted, crucially the Header is missing, and generally the structure is inefficient.

For example, without the header, zooming-resizing cannot be done by the User. 

If you are happy that the HTML files (minus Ad Muncher) work as intended on Smartphones old and new, big and small, all is well. I think however that FrontPage 2003 is getting too old!

Concerning button sizes, I agree that it looks like API 26 has changed something, but it does have much to do with how you are defining the buttons size and position too. Can you give MIT permission to take a look at your Project file Server-side?

[Daniel Fitzgerald]

Not too fussed about the header or the old version of Frontpage, as the use of it is extremley basic.

Here's some screenshots of the entire use of HTML. It's just for White text on a black background, sometimes in a table, and sometimes with a bit of colour and an <img>

so, it's ultra basic, and seems to do just fine for what it's used for.

and all the tables and text word-wraps for smaller screens.

Still not sure why AdMuncher was treating FrontPage as a Browser and injecting it's code into HTML Files that were open in it. (Bad move by Admuncher It's only supposed to do that to Browsers!, and it's been uninstalled)

Yeah, what's this about permission for MIT to look at my buttons andhow do i go about that?

[Chris Ward]

...if you can just give your permission here, I can assign your post to a MIT Guru who can study your Project File to determine the cause of the issue.

The outcome would hopefully be a fix for the next App Inventor release and maybe a work-around for now.

[Daniel Fitzgerald]

Sounds good, lets do that. Do you need any App ID Numbers or anything like that?

[Chris Ward]

Hi Daniel

Only the exact name of the Project, assuming your App Inventor User is the same gMail as your Forum User.

However, I have just been looking at the button definition in your screenshot. both Height and Width are set at "automatic". That is like telling Android "do what you like, I don't care". The font style is also undefined - style affects the text height, even though the font height is specified. Also, font size 13? An even number would scale better in most cases because the decimal result of scaling has to be rounded to an integer (number of pixels).

Out of the two screenshots, I would personally prefer the "new" buttons because my fingers are fat and bigger buttons are easier for me to tap - ergonomics are very important in GUI design. It is difficult to get the button height right because there is such a huge difference in screen resolution across Smartphones https://www.professorcad.co.uk/smartphonescreensizes

Try experimenting to get more control of the buttons:

Here is a starting point: Button Width 82%; Button Height 10%: Font Size 14, Font Typeface sans serif. 

You could also try setting button height in pixels. Minimum 44 pixels.

[Daniel Fitzgerald]

Exact Name of the Project is STO_Guides

And yeah, it is on the same account i'm using here.

Also, just updated it on Google Play to Version 5.6. The AdMuncher line was definitley causing WebView to freak out.

As for the unspecified button sises, when i made them, i made them at 150 x 32 for the small ones, and 300 x 32 for the big ones, and App Inventor seemed to load them exactly as i wanted them to appear. so i didn't need to scale them.

These were made a LONG time ago. AppInventor didn't even have the Large Device Preview Option back then!

In fact.... it was back on AppInventor V1.

And even after converting to AI2, they still worked fine until recently.

Here's some of the actual buttons:

Font size of 13 was selected because on 14 some the lables were often longer than the buttons by a character or two..... and 12 was too small.

And here is the APK for the old version (5.4) where the buttons appear how they used to last year, with the same images and all that, just compiled a year ago.

--- posting apk files and direct links to apk files is prohibited in this Forum ----  

The new version (5.6) with the current odd button sises is on the Play Store, (and probably accessableby the serverside)

[Chris Ward]

Hi Daniel

As for the unspecified button sises, when i made them, i made them at 150 x 32 for the small ones, and 300 x 32 for the big ones

You are referring to the images for your buttons rather than the Button Components themselves. However, I think you are right to expect the "automatic" option to size the button component to the image. It probably does, but with all dimensions defined in pixels, you have "hard" sizes that will be too small in some phones, just right in some and too large in others. That scenario has probably been avoided by setting Sizing to "responsive". We can't have our cake and eat it - if we are leaving everything to Android, there surely will be differences in different versions of Android as things move on. That was also my point about your use of HTML - The HTML standard has moved on considerably. If you don't move with it, don't be surprised if you find your files to be incompatible in the future.......

[Daniel Fitzgerald]

ok, i now have a much bigger issue than before. (Only just found out when it was reported by a user of the app, and my testing does confirm it)

All my main Test devices all run Android 6, and the app seems fine (apart from Button sises)

HOWEVER, WebView is not loading in the ap AT ALL on ANY PAGE, on Android 8 Devices. on the newest build.

The old version, compiled September Last Year, works fine on Android 8.

How it looks on Android 6: (Motorola MotoG3)

Here's how it looks on Android 8: (Nokia 6)

And on some kind of Samsung running Android 8:

I can confirm that the old version (5.4) compiled September 2017, works on Android 8.

Here's The old version compiled September 2017 running on the same Nokia6 (Running Android 8) seen above:

And i have not changed the HTML or WebView seen since then.

Just the new version, compiled for Play Store doesn't show WebView on android 8 devices. but the old version, compiled last year works fine.

[Chris Ward]

Hi Daniel

Try using the attached file.

[Daniel Fitzgerald]

Same issue occours. only on Android 8.

[BodyMindPower]

I had a similar issue when I'm compiling some of my apps with Build: Apps for Google Play.

Which Theme do you use? I assume Theme: Dark.

In this case, targetSdkVersion = 26 might have visibility issues with some components that affect "@android:color/ ..." at the xml files in \res\drawable.
Post your aia file or a relevant part of it and we'll see how to fix it.

Anke

[Daniel Fitzgerald]

Theme is set to classic (I've never changed it)

.aia file as requested: https://drive.google.com/file/d/1EygvxhL4-xqM2uJmaUEaNOod5h92YIIU/view?usp=sharing

[BodyMindPower]

You should change it on targetSdkVersion = 26. Try Device Default or Dark.

Theme: Classic does not work properly under API 26 anymore.

Your aia contains more than 170 files. I can not import the aia. Rename your aia and try to import it on your machine ... does it work?
I had to remove 15 files of your aia to open your aia on AI2.

And now I see that you are using more than 50 Screens, I never saw this before ...

[Daniel Fitzgerald]

A different screen for every guide in the app.

For example, there's 29 different screens, one for each answer to the "Path to 2409" lore.
another 13 screens for "The Cheat Sheet"

That's just two particular guides. there's more in the app.

===================

I will change the modes between device default and dark, and see what happens.

i will report back in 30 minutes or so, as it does take about 10 minutes for AppInventor to even load the project.

[Daniel Fitzgerald]

Switching theme from Classic to Device Default and Dark resulted in the same issue.

All settings have worked as intended on Android 6.

No settings have made any effect to WebView not appearing on Android 8.

It's looking like an issue in the compiling, that's triggering some kind of bug in webView in newer versions of android, but not older ones. (At a guess)

[Chris Ward]

Hi Daniel

Most of those screens are each displaying an HTML file in a WebView?

[Daniel Fitzgerald]

Yeah, check it out on a device running Android 4 through 6 on the play store.

Basically, the way i've done it is:

Screen 1; Select an option. we will select the answers to the "Path to 2401 Lore" Quiz answers.

That button takes you to a screen with 29 Options, for each of the 29 chapters of the lore quiz.

Selecting one of those takes the user to a screen with a WebView filled with the answers for that specific chapter.

[Chris Ward]

...well, what should happen is: User selects, single screen is loaded with the appropriate HTML file. 1 Screen instead of 29.

I think 61 screens is probably a World Record :)

I know the app works with earlier Android Versions, probably because the Assets, though large in number, have many smaller-sized files. Nevertheless, having so many Screens, so many WebView components - that is like a bright light to moths.

Let's wait and see what Evan can find.

 

[Evan Patton]

Hi Daniel,

These are both known issues. We had to implement a fast hack to get the Classic theme to remotely work when we bumped the target SDK to 26 for the Google Play build. A side effect is that the look and feel isn't quite right, especially for the buttons and sliders. Luckily, I think I have put together a solution that will resolve this issue for those builds. Once we get that tested and deployed I will post a general message to the forum.

Regarding the web viewer, there seems to be a change in Android 8.0 whereby the underlying Android WebView no longer expands to fit its content like it did prior to 8.0. The view is there, it just has 0 height if it is set to automatic sizing. You can provide an actual height and it should appear on Android 8+. We don't yet have a solution for this bug.

Regards,

Evan

[Daniel Fitzgerald]

Chris, i did once have that page as one Screen with one HUGE HTML file instead of 29. Screens all with small ones... but it took forever for a user to scroll to the answers they wanted, thats why we split it into individual pages. (And WebView on older devices as well as older versions of AppInventor created Apps, webview was extremley laggy. so removing all scrolling and splitting the html into many individual pages was pretty much a requirement.

Evan, Thanks for the reply, i will add a manual height into the webviews for the moment as a workaround (I will report back if it works in about 5 hours, the Mrs is at work, and her phone is the only Android 8 device i can test with)

Also, is there any way i can get on some kind of mailing list that notify's about AppInventor updates?

And somewhat offtopic: the reason why i use so much WebView is so that i can easially import a lot of text (sometimes with small icons) into the app,  the only thing i've found in AppInventor for adding text is "Labels" but it doesn't automatically word wrap when the text hits the edge of screen, or allow for icons, or allow individual words to be formatted differently to other words in the same line.

Could some kind of "Text Block" system be added into AppInventor, so that formatting large blocks of text that auto word wrap and stuff like that could be done without the need of webview?

[Chris Ward]

Hi Daniel

Chris, i did once have that page as one Screen with one HUGE HTML file instead of 29. 

Nearly there - keep the 29 HTML files, have 1 screen with 1 WebView to display them on demand. So, instead of changing screen to see a different HTML page, just change the HTML page.

Instead of having the WebViewer sized automatic-automatic, try fillparent-fillparent. I don't know if it will be good in Android 8 - it does of course work fine in Android 4.

I think introducing a TextBlock would be re-inventing the wheel. HTML + CSS is very flexible. As of 2018, it's estimated that there are over 1.8 billion websites, so HTML + CSS is hear to stay.

There are a lot of User-friendly HTML editors available. One of the best is the free BlueGriffon: http://bluegriffon.org

[Daniel Fitzgerald]

Ok, here's what i have come up with in testing for WebView:

Automatic: Does not work.

Fill Parent: Does not Work.

100%: Works, BUT if the HTML is taller than the screen, you cannot scroll it. (You can't see anything below a certian point) - (I seem to remember there used to be an option to allow webview to be "scrollable" or not, has this been removed?)

Setting an actual pixel value: Works, BUT, the sise of the height you need is different per screen.

Example: If i set 500 Pixels High, and i can see all the text on a 10" Tablet, On smaller screens, words get wrapped down to extra lines, and on smaller screens the text past that point gets cut off.

Example 2: If i set 1000 Pixels High, and i can see all the text on a 5" Phone, on Larger screens i get a large blank black area at the bottom.

So, i CAN get it to display, but i hope that Automatic will work again in the future.

[BodyMindPower]

Put webView (hight: auto) into a VerticalScrollArrangement, set hight of the VerticalScrollArrangement f. i. to 90% and disable Scrollable.

That's it; tested on a device (Android 8.1)

Note: This issue with the webView does not only appear on Android 8.x but also on Android 7.0.

Anke

[Chris Ward]

Hi Anke, Daniel

Good work-around Anke.

I was hoping that, at the very least, WebView height/width 100% would work with Screen Scroll disabled.

Another potential solution would be to Set the WebView in a Horizontal Arrangement, Fill Parent Height and Width, Screen Scroll enabled.

No shying away from the fact that this is a mess - thanks Google.....

[BodyMindPower]

It is not a work-around. Should be the standard for arraging screens: non-scrollable. This should be your prefered solution.

[Chris Ward]

That's a bold statement Anke - why should it be the preferred solution?

[BodyMindPower]

Hi Chris,

There are a lot of advantages:

http://www.appinventor.org/content/howDoYou/UIModules/Scroll

Anke

[Chris Ward]

Hi Anke

I could have written that article myself, I agree with all it's observations, but it doesn't mean that using a Scroll Arrangement should be the preferred solution. In the case of Daniels Screens, where only the WebView component is required, that should absolutely be the only component.

A GUI should be designed with ergonomics to the fore, using the components necessary to deliver the best possible User experience, but still using the least number of components possible to preserve the memory. 

[BodyMindPower]

Ok, thanks for the explanation.

[Boban Stojmenovic]

edit..

Y'all it seems to be due to title visible true/false..

Screen

The webpage looks as it should on Samsung Note8, Android 8.0..

/Boban

[Daniel Fitzgerald]

Is there a place where i can watch a thread of App Inventor Updates or Bug Fixes?

As in... like a "here's what was changed/updated this week" sort of thing?

if there is such a thing, could i get the link please.

[Taifun]

the release notes are here http://appinventor.mit.edu/ai2/ReleaseNotes.html

Taifun

---

Trying to push the limits of App Inventor! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun.