Aesthetic difference between MIT AI2 Companion app and the build .apk project

MIT App Inventor Help
1

Hello to everyone!

I have one question to do:

Why if i do a project, the shapes and fonts of that i see from MIT AI2 Companion app are different from when i build .apk it?

MIT AI2 Companion app:

Screenshot_20200204-021516
Screenshot_20200204-0215161080×2220 198 KB

From my own build app (the same project of MIT AI2 Companion):

Screenshot_20200204-175824
Screenshot_20200204-1758241080×2220 191 KB

NB: See the shapes of buttons/checkboxes for example…

  1. This behaviour is normal or is it a bug?
  2. How can i do for avoid this estetic differences?

Please, see the attached images for understend better what i mean.

Thank you in advance.

Grettings,

Kowa92

2

Where's the problem if you know how it looks with the compiled app?
But you can (temporarily) switch to the "Classic" theme to look the same with Companion.

3

The problem is that i would like the compiled app to look aesthetically equal to that of the Companion app (this one is aesthetically better).

So the question is: is it possible to do it?

Thank you

4

2 posts were split to a new topic: After building app, everything is smaller

6

None of you ran into this problem ??

Any possible solution about it?

Thanks

7

Beauty is in the eyes of the beholder. What you can do with App Inventor has been described. The Designer is not wysiwyg technology. MIT tells us that what you see building on the Designer is an approximation of what the compiled app will look like.

Solutions:

  1. Use the Classic Theme. Using it is more or less consistent when displayed on various versions of Android. Possibly also use Fixed ScreenSizing.
  2. If you use DeviceDefault, expect the app to look different on various versions of Android hardware. Why? Because Google uses different libraries to represent standard components on their various versions of Android (to provide an incentive of users to upgrade to use new features of the operating system) they build the controls to standards they believe are aesthetic..
  3. Do not use Companion to develop your app in live development. Simply create the apk, load it on your device as you develop and when the result is aesthetically pleasing, be happy.
  4. If this is a serious issue for you, abandon AI2 as a development tool. Then use a professional compiler like Android Studio, B4A or Delphi Community Edition. These compilers make available a wysiwyg designer and emulator.
  5. The issue you described has been reported to MIT. **If you provide an aia of your app (or a similar example) and post it here, the developers might be able to make some adjustments if the response you see is a bug. So far, you have not done that. Your images show differences but they might be due to your hardware or other issues. Without something to test, they can't reproduce the conditions you coded. ** Don't hold your breath..this evaluation will take a while (this is an educational institution and MIT is on spring break 'vacation' at the moment. The result of their analysis might be you see the intended response for the operating system version your device uses.

Hope this helps you to understand.

2 Likes
8

Hello SteveJG,

thank you for the very clear and comprehensive answer! I understand what you are saying and in the next few days i will test it to see if the app’s aesthetics changes by playing with the settings of Sizing and Theme.

Attached to this message i upload my .aia project related to the photos i posted above… So the MIT guys will be able to view the project and make all their necessary checks/evaluation.

PS: The photos i posted above come from a Galaxy S8.

Thanks.

ESP8266_Controller_v1.7.aia (188.7 KB)

9

I forgot … I have Android 9.