Tablet Screen size issues since new release

[Meg]

Hi,

I've been using Appinventor ( classic and then AI2) for the past few years to create apps for research purposes - ie they only need to run on the tablets we have for this purpose (Samsung tabs 10.1 - tab2 tab3 and tab4 have all been used). For this reason I have always edited the images to the appropriate pixel size for our screens and have not had any difficulties*.

The games have been displaying properly on our tablets until the recent new release and I'm having difficulty narrowing down what the problem now is in order to fix it. I first noticed the problem when I was working on a new app and tried downloading it - the screen does not display properly.  The app downloads, installs, and opens - but the screen is displaying oddly.

I then did a test by comparing an app that I installed a few months ago via ai2 (see attached screenshot image "before new release") with the exact same app downloaded more recently onto the same tablet (see attached image "since new release").  NB I have not edited the app in any way between the two downloads.  But now, apps that were previously working only work if I use the old downloaded code, saved on my computer. If I download them again from appinventor I get similar display issues.  

This is causing grief as I cannot make any updates/create new items as any new download has the same problem.

The responsiveness is still set to fixed - I literally have made no changes my end - but obviously there is a problem that is now causing them to display oddly.  Any ideas?

I have tried a couple of other things and these may or may not be relevant to the problem:

SPARE PARTS:Initially ( in AI classic) I had difficulty getting the apps to display on tablet screens so spare parts was installed according to instructions found here and this solved the problem for all of the tablets.  I have tried turning compatibility mode on and off ( restarting as required) to see if that helps - no joy.

APP2MARKET: The old Tab2s allowed me to download directly from app inventor to the tablet. Doing so now causes the problem described above.

The Tab3 and Tab4s would not download and display correctly in the same way.  So for any apps developed for these tablets I used app2market. New downloads with or without app2market continue to have the same problem.  The suggested fixes of removing/replacing the screen support tags by editing also have failed to rectify the problem.

I'll add a disclaimer here that I am a psych - not a programmer... so my technical knowledge is not as good as many on here. But I have been trying to find a solution before posting. I have been scouring the forums over the past few weeks hoping to find someone with a similar issue.  I have also tried to systematically test a bunch of different factors ( as described above) but I think I may be at the end of my knowledge and thus stuck for ideas of what to try next.

Does anyone have any ideas - or can point me in the direction of other things to trial?

I have a bunch of kids with hearing loss mid-intervention at the moment and inability to create anything/fix anything is starting to be problematic!

Meg

[SteveJG]

Sorry you are having issues adjusting to App Inventor since version 145.   The first thing to do is make sure you are using the most recent Companion.  Using a 'stale' Companion can cause may different issues.  Currently Companion is version 2.35.

Version 145 introduced (with options of Fixed versus Responsive Screen mode ) was necessitated when Google discontinued support of software that permitted MIT apps to run similarly on small phone versus Tablet screens.  Essentially MIT took advantage of code that allowed them to 'scale up' an app designed for a 320x480 pixel screen to Tablet size.  That allowed AI2 apps to run on tablets with a noticeable deterioration of image quality (that most users never noticed).  Otherwise it worked reasonably well though developers with special Tablet requirements had to use additional coding to get some apps to run on Tablets with a pretty screen.  Google announced it discontinuing the features used by MIT effective ((Aug/Sept 2015?).   MIT had to come up with a solution to be compliant with the new coding requirements for Android.  That solution is Fixed mode; Fixed mode attempts to "reproduce" the pre-Version 145 Tablet response....it almost does that but not quite perfect with apps that have lots of Layouts.  Fixed/Responsive is here to stay. That means AI2 apps that are no longer perfect on Tablets need to have their layouts 'tweaked' using the standard tools  ... Automatic, Fill Parent and Fixed Pixels along with spacers using Labels/Buttons/etc.

AppToMarket ... your example Meg, appears to be a problem with AppToMarket re-scaling of a post 145 version of an app made withAI2.  The discussion here  https://groups.google.com/forum/#!searchin/mitappinventortest/apptomarket%7Csort:date/mitappinventortest/ot3eZSCnswk/8PeotNfsBwAJ   talks about issues using AppToMarket and the effect it has on screen appearance.   Re-posting your note showing your issues on AppToMarket's blog might get you a solution to the AppToMarket issue.  Alternatively you might try one of the other tools mentioned in the Forum post  that might make your screens behave.  Post to AppToMarket forum HERE. The issues  you have  may very well be with this third party tool.  The strange screen issue in your two posted images appears to be with AppToMarket.  The strange probably happens as a result of your app processed by AppToMarket.  What does the program screen look like with clean AI2 code without AppToMarket processing?

To get specific help with any of your affected apps,  post screen captures of the relevant blocks  and / or   an aia .  Why?  Because other than the image which seems to show an app modified by AppToMarket, we have no idea what may be wrong.  There are too many variables and all of the issues mentioned seem to be related to AI2's Layout controls (which are the compilers worst feature).  Most developers get the pretty screens they want with a lot of fiddling with the layout controls, automatic, Fill Parent etc .  Because of the required change to the way AI2 apps display using Fixed screen, fiddling is probably what you will have to do..

We sympathize with your problem.  A solution is probably possible but might be painful.  I develop primarily for a Tab II ...all my pre-145 apps run reasonably well in Fixed mode; a few I modified slightly to get a slightly better display. Without  an aia (of the apps that are not modified with AppToMarket) to work with, there is very little advice we can give you other than mentioned above.  Your eventual solution is to re-code using Responsive (which is still experimental but  is what you may have to do to get the screens to behave the way you wan.  It may be lots of work.  Rely on your existing apk apps that work.   If you must modify the apps to continue you work, realize they have to be 145+ compliant

Are all your apps basket cases?  We hope not.  Forum members can help with those apps that are not modified with AppToMarket.

Regards,

Steve

[Meg]

Thanks for the speedy reply!

I can see the need for the update - and I would be excited about what it represents generally - if I wasn't having this problem! lol

As I have 50+ apps that will need updating I was hoping to find a solution that I could implement across the board rather than having to re-write everything.   I already have lost a chunk of time re-writing many of them into AI2 from classic code last year - the conversion tool came too late for that project - so, yep, I'm looking for other options ;-)

Yes, I'm running companion 2.35.  Although I very rarely use the companion these days as I tend to download to computer and email .aias to the tablet

So, as I mentioned I DON'T think the problem is all with app2market.  I have problems if I download an app directly to the tablet with OR WITHOUT using app2market*.  This problem also persists regardless of whether I could previously download "direct" to the tablet (as I could for the Tab 2s).  Now if I download directly I get this sizing problem.  And yes, unfortunately it is happening with every app - or at least the 10 or so I have tried thus far - all regardless of whether I put it through app2market or not.

The images remain the same even in so called clean AI2 code.

When I initially developed them I worked pretty hard fiddling with "pixel sizes".  I edited all of my images to to the exact pixel size I wanted it to display on the screen, and sized up tables/blank labels etc. Being somewhat anal about all of that seemed to make it work at the time.... but obviously is not helping me out now.

I guess I just figured that if all of the .aia worked before the update and now they don't work...so maybe there was something obvious to people with more experience than me about what I was doing wrong!

The blocks themselves don't make any reference to layout features so I'm not sure if that would help matters?  Would that .aia code help more?

Meg 

*As an aside, I have already trialled the suggestions in the app2market threads to see if they brought joy , but unfortunately no joy there either

[SteveJG]

Unfortunately there is no panacea Meg.   

AppToMarket does create huge issues for some developers Discussions are here https://groups.google.com/forum/#!forum/apptomarket   . You said  I DON'T think the problem is all with app2market."  based on the images you sent, I believe app2market IS a MAJOR issue.

" if all of the .aia worked before the update and now they don't work...so maybe there was something obvious" ... read the posts in the Forum for the past month.  145/146 were major releases of this entry level Android compiler primarily intended for teaching purposes.  There were some serious bugs in the releases, it appears MIT has fixed most of them within the past few days.  Try your apps again?

The aia code is most useful for debugging.  You have very many apps.  Someone might help you fix one of them ... and through that you might learn what might be at issue with the others.  What need to get fixed depends on exactly what you coded ... and we have no idea except for your general description.   An aia of an app fiddled with AppToMarket probably would be impossible for most users to debug...this is the MIT Forum, not AppToMarket.

You might query Hossein with respect to his third party AliveComplete.  There is a free version...you have to run the server on your computer..what you would want is to find out if he has a version of AliveComplete that runs on version 1.44.    If he has one, get it and use it to develop.

Using this solution:    you would never be able to use MIT App Inventor on the Cloud again;

                                you would never get updates that make AI2 more exciting for other devices

                                you could probably update your existing apps using the tools available to that AI2 version (see below) and they should run on at least some of your devices. I do not know,                                            you would have to try.

Continuing to use MIT AI2 would be like like riding down a country road to the freeway (live with the bumps to get to the pavement), using an old version of AliveComplete would be like riding down a country road that ends in a swamp but stop short of the bog and you might be happy.

There appear to be older versions of AliveComplete here   http://sourceforge.net/projects/ailivecomplete/files/      

So, to get out of your mire, you could try an older version of AliveComplete (learn to use it) and might get some JOY.    You could post an aia of an example of an unmodified app ...no AtoM and someone might look at it.   You can start the painful process of modifying all your apps and layouts as might be necessary.

Based on your description and without an aia to play to to understand your issues.

Perhaps someone will have more ideas Meg... check back here frequently to find out ..many regulars are on vacation at the moment.  When you do get a satisfactory solution; please let us know and we will celebrate with you.

Regards,

Steve

[Meg]

Hi Steve.

I will first try again to see if the latest debugs have solved the problem. 

I am curious why you think app2market is a "MAJOR issue".  This problem happens when I download clean apps from ai2 WITHOUT intervention from app2market.  How could app2market be causing a problem on apps that  have never been modified by that software?

Meg

[SteveJG]

OK .... you said..."So for any apps developed for these tablets I used app2market."   ...there is a known issue at the moment with screen sizing apps that have had AtoM intervention and are 145/146 apps. AtoM worked fine with pre version 145 apps.   I do not use AtoM so I am not sure that AtoM influences any of your previous saved aia's (if the Project has ever been modified with AtoM, the modifications might be persistent from saved aia to aia or it might not ..sorry I do not know).    I imagine the reason you used AtoM in the first place is your app may have had screen size issues prior to version 145 and you used AtoM to 'fix' them.  "How could app2market be causing a problem on apps that  have never been modified by that software?"--- well, perhaps the apps were modified previously and/or they never worked correctly unless and you used App to Market to get the correct screen.   Is that  possible?    That would explain why you get the 'bad' screen.

Your more recent labels do not fit the screen as an artifact of the AtoM intervention.   Perhaps it is not.  What I do know is that many AI2 apps that use lots of text in labels formatted with Layouts behave in both 145/146 Fixed and and previous versions.   Your apps do not.  2 + 2 seems to = 4 

Regardless or the reason, your apps do not fit the Tablet screen correctly.  If you want to continue making modifications to the apps, you have to use Fixed and modify the layouts and tweak them to fit without the help of AtoM or wait for AtoM to get fixed and use it hopefully fix the screen or  attempt to learn to use Responsive mode (just like everyone else who uses AI2)  or use a tool like AliveComplete versions compiled in mid 2015.  MIT's advice to developers is to use Responsive for new projects and use Fixed perhaps for existing Projects (unless Fixed does not provide the desired response).  Sorry, I can't offer any easy ways to 'fix' your apps.  There is no magic tool.    

Why not attach the aia of the project in the image?   or ...make a copy of the Project, delete all the screens on the project except the screen in the image (you are working with a copy and can not hurt it).  With an aia in hand to see exactly what your screen layout does, someone might be able to offer suggestions.

Regards,

Steve

[Meg]

I appreciate your assistance - but am now wondering whether my attempts at full disclosure are actually confusing matters.

 I was only including the information about app2m as an aside - as noted throughout my messages, The problem I am writing about happens regardless of whether I am using that software or not. Its just that when I started having problems I started trying every combination to try to see if there was an obvious stage where things fell over. The fact that noone else seems to be reporting this issues points to a mistake I may have made - and thus I might be able to rectify

This summary may be belpful?

 I have been writing the apps in ai2, and building/downloading the .apk to my computer (I rarely use the companion) .  From there I send the .apk to the tablets to install directly onto our devices. The project uses multiple tablet versions.

Previously (i.e.prior to the new release)

On the tab 2 - I could send any downloaded .apk direct to the tablet, open it and run it without modification

On the tab3 -  I needed to first run through apptomarket,. before opening/running.

So if we focus on the tab 2 situation we remove the possibility of apptomarket interference as I don't use it for these apps.

As at today:

1) I have grabbed a .clean apk file I  built/downloaded from ai2 a couple of months back (saved on my computer) and I have sent it to the tab 2 without modification. It installs/runs/displays on the tab 2 directly without difficulty like it always did.

2) I have gone to ai2 and downloaded the same app's .apk ( without making any changes) and sent it to the tablet, again without modification.  When I try to install it, it installs and "runs"  -  but displays with the problem noted.

I have this .aia downloaded today (attached) for one of the apps, but I think I only have .apk not .aia for the pre-release versions

I am also open to the idea that it may have nothing to do with the new release - the timing may be coincidental - but I can't think what else has changed from then to now which may a be causing grief.

Meg

[Boban Stojmenovic]

Seems to work well if you change to sizing responsive, Samsung Tab4.

[SteveJG]

Working with your nice app .. I note the following:

You set the dimensions of  the Game Menu Horizontal Layout to fixed pixels of 1280.

Each of the layouts for rhyming, strtsound and blending 1 and 2 (the vertical arrangements) are set to 250 pixels ...x 4 = 1000  at the same time you set the widths of images15,16,17 &18 to 15 and dthe other column of 210 pixesl for a total longest dimension  of 127 and have other layout issues.  this exceeds the longest pixel dimension of a Tab II

the screen long dimension of a Tab II 7" is 1024 pixels   ... problem #1  , setting these bounds by fixed pixels.  I do not know if all your tablets are 7" or 10" mixed ..this article explains that depending on which tablet you use, the screen  https://en.wikipedia.org/wiki/Samsung_Galaxy_Tab_series  and show how they vary.

This particular app displays in Landscape mode.  I believe setting the one item to  a dimension 1280 makes it impossible for Fixed to render the app correctly.  Switch to Responsive  and 

changing  the 1280 pixels  to   Fill Parent      and changing each of the columns (vertical arrangements) from 250 to  23 percent and setting the dividing images from 15 pixels to 1%  each and the one from 210 to  18% largely corrects a 7" Tab II

I also note that the A1+btn is 100x100 pixels but the image you stuff into it is 146 x 150.  AI2 can handle this resizing, however if the image for this and the other buttons were exactly 100 x 100, the size of the button; the app would load and render more quickly on the device...

Regards,

Steve

[Toni Schuh]

@steve as a side note:
With AppToMarket you can only modify apks, not aias. As apks cannot be turned back to aias there is no possibility of corrupting an aia with AppToMarket.

[SteveJG]

@Toni ... thanks for the information about AtoM... I'll remember that the tool only affects the apk, not the aia.  Meg always built the apk, said she did not use Companion, so it appears her apps ran as intended on all her Tablets prior to version 145 because she processed the apk.   I suspect that processing allowed the non-wysiwyg AI2 screens to snap to size on her Tablets.  Unfortunately, I can not run her app on a pre 145 version to confirm that.  

@ Boban ... you changed Meg's app to Responsive.  Did you do anything else to get it to run on the Tab4?    I had to change several Vertical Layouts from fixed pixels to percentage of screen to properly fill the screen of a Tab II.

--Steve

[Boban Stojmenovic]

@ Steve ... just changed to responsive from fixed.

[SteveJG]

@ Boban   ... Thank you, that is remarkable.   I wonder why that worked.   Merely changing to Responsive would not show all Meg's Vertical Layouts on my Tab II.   You may have discovered a simple fix to run this on some of her tablets.  What version of Android does the Tab4 use and is yours a 7" or 10"   ... I would guess you might have the 10".

--Steve

[SteveJG]

@ Meg     I discovered another huge issue with this app.  Most of the 43 images in Media are slightly larger (in pixels) than the blocks you place them with fixed pixels, however two of the images are huge.    I could not understand why your app took so long to load; the problem is these two images

 and base700w.png is not used in the app but including this image makes the app significantly larger (unless it is used in another part of the app you do not show... since you have the smaller image, you should possibly delete this from the Media resources and your app will load quicker.

which is 700x1008 pixels and 1.06 MB    and  1.05 MB ...You need to use smaller images...especially for the background image.  These two cause your app to compile and load slowly.  You could use a  30 x 50 'screen' and have it size automatically to the background with as good an effect with about a 26 kb image.     Something to think about?

Here is a smaller image that should work as well and it is only 42kb in size

Attached is a new Responsive aia ....it is 652kb versus  2.5 MB for what you sent. The aia includes a reduced 'quality'   base700w image called base700wNew and a small version base700wNEWsmall that might be appropriate and removes the two huge images.

--Steve

 

[Boban Stojmenovic]

I would guess you might have the 10".

 

 Yes 10" tablet and Lollipop 5.0.2

[Scott Ferguson]

You can use any service such as TinyPNG to compress your png files.

---

sf

[SteveJG]

@ Boban ... Great, the 10inch size explains the difference.   I do not know if Meg is using all 7" tablets or some 10" ones.. if they are all 10 ...just changing to Responsive may fix many of her issues.   Thank you.

[Boban Stojmenovic]

Samsung Tab2 10" android version 4.1.1

[Meg]

Perfect - I've just tried a couple of different apps and this fix seem to be working on both the tab3 and tab4s we use.  No other changes needed.  I'm happy  (although a little embarrassed) that it was something so easy.  I did try changing between responsive and fixed a month ago with no joy - maybe the minor updates/fixes since then have made a difference.  Regardless now feeling a lot happier :-)

[Meg]

And thanks to everyone else for their help/patience as well:

@SteveJG - yes we're only using 10" tablets for this project so the fix seems to hold for all the apps I've tried so far <fingers crossed>.  I'm also the first to admit that my code is a bit of a mess - bad combination of time constraints for getting stuff out in the field on the fly and letting someone with no programming experience (ie me) near programming software!  I've also been very spoilt that we're downloading/installing everything very much inhouse - so my cleaning up/image sizing protocols are not what you'd call strict!

Like everything I'll take your suggestions on board as I develop new things  but I confess timing dictates that I often don't go back and spend time fixing old stuff that is working.

ie My new apps are much better than the old ones - but if the old ones work I don't mess with them ! ;-)