Android App Bundles in MIT App Inventor

I’ve run a few tests with an icon in the button, and this may be the one that I like more:

image

The button gains attention thanks to the icon, and it is not as big to “saturate” the interface. Also, it has text, which makes it easier for the user to know what they are downloading, rather than having to wait for the title to appear. See also the title changed from “Download .apk for $appName” to “Android App for $appName”.
There’s also an alternative layout below with a vertical alignment inside the button.

Click to show alternative layouts

I have tried to set a button with the same height as the QR code, but it feels like the QR code has more importance because it has more black area than the button, so it seems like the button is just a static icon, that users have to click the link to download.
All layouts without the text in button have the HTML attribute title="Download .apk now" that appears when hovering, but I felt like it was not intuitive for mobile devices

  • Text below in big button | Warning in container panel | Updated title
    This one seems to be fine, but I personally preferred the horizontal layout rather than the vertical one
    image

  • No text in small button | Warning in left panel | Original title
    This one seems to have a too-small button
    image

  • No text in big button | Warning in container panel | Original title
    This one seems like the button is static, just a plain icon, that users have to click the link to download the app. It seems like the link gains more attention for being blue, and the download button pointing there
    image

4 Likes

Since the button and the link effectively serve the same purpose, couldn’t we just combine them? For example, if the button were actually an <a> tag styled to look like a button, you’d still get all of the benefit of the link (shift+click to open, right click to copy the URL, etc.) without needing to have two elements that duplicate the interaction?

Right now my preference visually is for the button with the icon and text arranged vertically. Possibly add a vertical bar as a divider between the button and QR code with the text or vertically centered, and under the QR code add the text “Scan with barcode scanner to install” underneath to mirror the download text.

2 Likes

I’m dropping here the latest layout:

image

Now, both button and image have the same dimensions. Well, the same “visible” dimensions because the image actually has a big white area around it. :sweat_smile:
There is also a vertical thin line as a separator between the download button and the barcode download link.
Also, now there is no <button> element. Instead, it is an anchor <a> tag with the same styles as a button, so you can actually right-click the fake button to get a download link:

image

As it can be seen as well, there is no link. Instead, users should get this link by using the right-click (or long-click in mobile devices), as it is easier for someone to get a text link rather than an image with a link which they cannot copy-paste into the browser. Moreover, now the layout gets more symmetric as there are the same elements on both sides.
And finally, the “warning” label gets updated by adding bold text with information on how to use the dialog.

8 Likes

Nice work @Diego. This looks really good.

1 Like

It seems like some predictions went true :sweat_smile:

6 Likes

Hi! It's been a while, but I have some updates on this project. :blush:
I got a working version of AAB support in MIT App Inventor 2.

During these past weeks, I worked in unifying both current export options and then researched the procedure to build an AAB. After some versions and commits, this branch, forked from MIT sources, is capable of building these Android App Bundles.
You can find some Pull Requests with changes of the project on that same fork.

You can go to this test server I just set-up to test by yourselves the AAB export feature. Just click in "Export", and the Android App Bundle choice:

https://aab.appinventor.barreiro.xyz

Disclaimer

It has a very cheap buildserver, so please don't force it too much. :sweat_smile:


Android App Bundles work in a different way than normal APK. It basically changes how an MIT App Inventor project is distributed through Google Play Store. I have written this little developer document explaining how to work with Android App Bundles in MIT AI2:

I strongly encourage to read it so you can get more relevant info about AAB as an App Developer, specifically regarding signing both AAB and generated APKs with App Signing.
In addition, I will also make a tutorial for MIT Reference, so everybody can see with all details how to upload an AAB to Play Store using MIT App Inventor.


I would really like to know all your thoughts on this and get some input. If you encounter any issues when using it, some usability changes, questions about using AAB, possible concerns, etc.
Thanks!

16 Likes

Nice work @Diego. :+1: :+1: :+1:

2 Likes

thank you for the great work i've been waiting for such a great achievement
i have a question
can i apply those changes here https://github.com/barreeeiroo/appinventor-sources/tree/gsoc20/build-aab i my source ?
or it still under testing ?

so after testing it i faced a problem
with empty project the app built successfully
but with my other projects i got this error in aapt2 link step

error: unexpected element <permission> found in <manifest><application>
how to fix this ?

Can you please send the AIA?

fixed i was adding as a child of the <application> element while it needs to be a child of the root <manifest>

but im now facing another problem
look

[BT:0.15.0] Error: Files under dex/ must have .dex extension, found 'dex/module-info.class'.
com.android.tools.build.bundletool.model.exceptions.BundleFileTypesException$InvalidFileExtensionInDirectoryException: Files under dex/ must have .dex extension, found 'dex/module-info.class'.
        at com.android.tools.build.bundletool.validation.BundleFilesValidator.validateModuleFile(BundleFilesValidator.java:76)
        at com.android.tools.build.bundletool.validation.ValidatorRunner.validateBundleModulesUsingSubValidator(ValidatorRunner.java:81)
        at com.android.tools.build.bundletool.validation.ValidatorRunner.lambda$validateBundleModules$4(ValidatorRunner.java:64)
        at com.google.common.collect.ImmutableList.forEach(ImmutableList.java:406)
        at com.android.tools.build.bundletool.validation.ValidatorRunner.validateBundleModules(ValidatorRunner.java:63)
        at com.android.tools.build.bundletool.validation.BundleModulesValidator.validate(BundleModulesValidator.java:82)
        at com.android.tools.build.bundletool.commands.BuildBundleCommand.execute(BuildBundleCommand.java:217)
        at com.android.tools.build.bundletool.BundleToolMain.main(BundleToolMain.java:71)
        at com.android.tools.build.bundletool.BundleToolMain.main(BundleToolMain.java:47)
Jul 10, 2020 7:17:48 PM com.google.appinventor.buildserver.BuildServer build

Are you using the raw branch of AAB, or have you added some extra modifications...?

1 Like

I applied everything here


by the way im using R8 for dexing and optimizing not Dx
empty projects built normally
big ones with many libs can't be built
the problem here with classes.dex right ?

here it is

im using this With some modifications instead of DX

Are you using Java 9 or newer? If yes, then you have to install Java 8 which is the version AI is compatible with.

1 Like

thanks for your reply but this wasn't the problem
the problem was that R8 included module-info.class from gson-2.1.jar in dex folder while it should include only dex files
i fixed it by delete module-info.class from the library

And can u add more features

1 Like

@Diego Your Build Server is not working
image

1 Like

I edited my app. already published on the play store with the .apk file
In the new version of appinvetor2 I find myself downloading two files 1) ".apk" and the other ".aab"
When I have to publish the changes, which of the two files should I upload to the play store?

I would suggest to Google to indicate in the tab entitled (App Bundle) "Upload app" as per the attached image, to indicate which of the two files to upload ".apk" or ".aab"
or both?