Presenting GUI and Animation Extension

2,210 views
Skip to first unread message

Tomislav Tomšić

unread,
May 6, 2018, 4:59:00 PM5/6/18
to MIT App Inventor Forum
I thought it would be useful to have margins, paddings as well as ability to set them as different, for several different cases, so I made extension that provides us with that functionality. Here it is its complete code, aix file, so that you can immediately use it, as well as a simple demo application that showcases its use: https://github.com/Tomislav-Tomsic/GUI-Extension

Code license is Apache one, which means, as much as I can bother with it to understand, you can use its code for whatever you like, except that one has to be polite about it, say where it is from etc. (At least, that is how I understand it).

Problem is, it might have too much functionality, it might have been wiser to separate it in several different extensions. For instance, one can put all visible components (that is, a subclasses of AndroidViewComponent) into a list, which one can than manipulate as one wants or can. One can also have choices in putting visible components of same type and thus "unlock" additional feature. For example, ensuring that all members of such lists, buttons or label for example, have same width, height, font color etc. Like I said, it might have been wiser to separate it into several extensions.

Animation extension on the other hand, is comparative breeze. It is simple and straightforward. One can now animate one's view, move them (translate I mean), scale them, rotate, as well as combine those as well. Hence, we now can play with the user interface more broadly. Naturally, I didn't test it for all imaginable use cases, I hope others will jump in with their own ideas, but for what I did, it works.

Only problem that I see with it, which actually is the one that GUI also shares, is in the method and argument names. I am not an English native speaker, and I simply couldn't think of more meaningful, shorter ones. I hope others will have better ideas.

In any case, here it is: https://github.com/Tomislav-Tomsic/AnimationExtension

Again, its full code is available, under the same Apache 2 license, and again you will find its aix file, and the same simple demo app, built with MIT App Inventor 2, and then tried on my Android devices.

I hope you will find them both useful and enjoyable.

Best regards

Tomislav Tomšić

unread,
May 7, 2018, 11:14:24 AM5/7/18
to MIT App Inventor Forum
A small update. It occurred to me that one can have more than one extensions in a project (I know, I know, I truly am an archetype of absent minded professor ). So I've made a simplified version of GUI extension, it is in the same git repository as indicated above.

Now one can have several GUI extensions, for various parts of GUI, presumably, appropriately renamed. Beside its complete code and aix file, I also put an aia file for new demo app, a "Dancing GUI".

I always have trouble with designing GUI, so, why not leave total liberty to users? Let them choose size of GUI parts, its margins,text size, color(s) and so on?
Well, now it is easier to do that, as I have shown with said app.

I also left out some features that some might find useful, namely Simpler GUI extensions is able to work with only precise int values for width and height of Visible Components, no percentages as in GUI extension.

I hope you will find it useful and enjoyable.

Best regards

Angelo Angius

unread,
May 7, 2018, 2:27:31 PM5/7/18
to MIT App Inventor Forum
Good extension.Very useful

Pablo Bertu

unread,
May 8, 2018, 10:25:57 AM5/8/18
to MIT App Inventor Forum
Tomislav, 

Congratulations for the excellent job (the potential of these extensions is huge!), and many thanks for sharing it with the AI2 community!

Best regards from Argentina,

Bertu

Tomislav Tomšić

unread,
May 8, 2018, 10:56:54 AM5/8/18
to MIT App Inventor Forum
Thank you Pablo, one often wonders in Open Source development, as majority of us would say (I, on the other hand prefer using Peer-Reviewed software, because I prefer clarity, and want to pretend that I live in a world where even the worst ignoramus understands why peer-review process is important), was all that work and effort in vain, so any kind of support and encouragement is more than welcome :).

Once again, thank you Pablo, I hope you don't mind call you by the first name.

Best regards

Pablo Bertu

unread,
May 15, 2018, 2:49:20 PM5/15/18
to MIT App Inventor Forum
Hello Tomislav, I am using the GUI Animation extension to simulate a GIF in my opening splash screen. I´ve set up a two-cycle procedure: first my logo grows from a very small initial size, and then it decreases a bit:

It works well, but I cannot reset the arrangement (and the image) to its original size. This is a problem if I need to use the same splash screen more than once.

I´ve tried setting up the arrangement Width and Height to their original values (56 x 13 px) but nothing happens in the screen.

I hope you can give it a try and send me some advice.

Best regards and thanks in advance,

Pablo



Tomislav Tomšić

unread,
May 17, 2018, 7:21:59 PM5/17/18
to MIT App Inventor Forum
I see now that Pablo and I continued our discussion over mails, instead of here, as I assumed. I am currently in London, and I was using a mobile instead my PC, so I hope you will forgive me.

Anyway, a short summary is in order.

For resetting app to default, or other values, I tend to use two tricks. First one is to use block open another screen found in controls, where screen name is "Screen1" (meaning, currently active screen that needs to go "back" to default values), and second one is to use clock control. I think I showed one, or both, approaches in demo apps for these GUI and Animation extensions. If I am not, I am sure there are numerous examples how that works.

I can not guarantee that app roach will work in all conceivable cases.

Furthermore, transparency animation doesn't seem to work, and to tell you the truth, I didn't tested it extensively, probably because a workaround is readily present, one just uses set background block for a view in question to set as transparent color as one wants. I think I solved that transparency problem, and I'll upload it as soon as I tested it adequately (this time ;) ).

Pablo's idea/suggestion to provide a reset method gave me a lot to think about, and I am not sure what are the all features that should entail. I wonder, maybe all those features are already present too?

I am referring to list iterations blocks which should allow building of (very) complex view animations. I would appreciate if someone would try to see if that does, or could, work.

Best regards
Reply all
Reply to author
Forward
0 new messages