Support for building apps on API Level 4 in App Inventor - Better Tablet Support

We've been working to take App Inventor out of screen compatibility mode, and that work has now been merged. This hasn't made it to a release yet, but it will soon. We will announce the changes in the forums when this happens.

What does it all mean though?
For starters, App Inventor will not support Android 1.5 (API level 3 - Cupcake) anymore, but we are compiling against Android 1.6 (API level 4 - Donut). We know there aren't a lot of devices out there still working at this level, but the change from level 3 to 4 was a rather large step to take, mainly because of the already mentioned screen compatibility mode.

Up to now, all App Inventor apps would be automatically scaled by the system to make them look the same in all devices, no matter their resolution or screen size. This sounds good, but the effect of this was that most elements would look rather awfully oversized on bigger screens such as tablets.  From now on, the resolution of the device will be used, and apps will look much better in larger screens with higher resolutions. As a drawback, the App Inventor designer will be a bit less in sync with what's actually being rendered on the device, but we've done our best to keep things as smooth as possible. If you find any issues with rendering in the designer please do get in touch with us through the forum.

What other changes have been made?
We have added a check to change from Tablet to Phone preview mode. It basically resizes the viewer so that you can see how the app looks at two different sizes. We are using Nexus sizes as generic here, Nexus4 for phone, and Nexus7 for tablet. As you can see in the screenshot below, we have also added the buttons bar found in most newer devices. The two changes are highlighted in red.

Another big change is that now all sizes for elements are density-independent pixels (DP) instead of hardcoded pixels. You will see a change in the Width and Height boxes in the designer.

The concept of DP is a little hard to grasp. Some people compare it to using percentages for sizes in HTML, but that's not quite correct. This is the definition used in the main Android docs:

Density-independent pixel (dp)

A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

This DesignBytes video by Roman Nurik is a good source of information about the topic:




There is an additional property that has also been added to Images: scaleToFit; checking this box you can make an image fit completely the size of its enclosing area, for instance if you fill the parent in width or height, the image will fit the area (the image will not keep its aspect ratio, so be mindful when using this property).


So, with all these changes, what are the things to watch out for?
Some apps might be affected, especially those using hardcoded sizes in pixels. We have made many tests and the majority show very little differences, but there might still be some differences.
The other thing to watch out for is if you were using any tricks to grab the height and width of the screen to size your elements. Watch out for problems in there and please report whatever you find.

And what's next then? Well, this change opens a number of possibilities for App Inventor apps. We can start thinking about using a targetSDK level now, even providing a property in Screen1 to allow the user to choose which level that is. We could also start thinking about moving to API Level 8 (Froyo) as there are not many devices using a level lower than that. But probably the most important change here is that we can now start using support libraries and think about adding some of the most used design patterns in Android, such as Action Bar, navigation patterns, or even themes.

This is all a bit far ahead, but there's no technical reason stopping us now from working on changes like those. If you want to help with any of these projects, do get in touch through the open source forum. Great times ahead!

App Inventor 2 Spinner component

A Spinner in Android provides a quick way to choose from a set of options. We have added a Spinner to App Inventor 2, and it's super easy to use. Have a look at the following video to find out how.

App Inventor 2 ListView component

The existing ListPicker allows to generate a series of choices to let the user decide which one to choose; for this, it creates a new Screen (or activity). The new ListView component works in the same way, with an almost identical API, but it does not create an additional screen, so you can embed your data within the Screen you are working on. The following video explains the basics of ListView in App Inventor 2.

Date and Time pickers in App Inventor 2

IMPORTANT UPDATE: There has been an upgrade to the Component and now it returns 1 = January and 12 = December for the Month property.

We have added two very simple widgets to App Inventor 2 (note they won't be added to App Inventor 1, but if you cherry pick the commit to the AI1 branch, it should work too). Date picker and Time picker are really easy to use, as you can see in this video:

Sharing component for App Inventor

We released a new Sharing component about a week ago, and I recorded a rough and ready video for it. It uses and Android Intent to share information (a message or a file, or both) with other apps that are ready to handle the data provided.



We had to iron out a few things, such as paths coming from other components like the ImagePicker or the Camera.  We also had to deal with the fact that the dialog would come up really big for certain actions, and on certain devices. We have a fix for all of that, and it's on review right now, but will soon be in our github repo; it might take a bit longer to go live (next release for sure, but we don't know right now when that is happening).

Open Source Development with App Inventor: Part 6 : Wrapping Up Series 1

Show all videos of this series.

Part 6 of Open Source Development with App Inventor will be the last video that I'm going to record for now. Most of the basics have been covered, so I have decided to take a break from videos, and probably go back to writing more focused posts. In any case, don't expect much from me until the end of the summer!
If you have any topics that you'd like me to cover, and think it's worth making a video of it, please leave a comment.

The last couple of hangouts have been focused on the part of App Inventor that, in my opinion, is the most technically interesting: how incremental development happens in the REPL, which for us can either mean the emulator, or a connected device (via USB or wifi). I know little about that part, so I guess that's why I find it so interesting. If you want to know more about incremental development, you cannot miss out watching the hangout in May, in which Jeff talks about it, and also about the rendezvous server used with the Companion app(wifi mode). The video is here:



For more information on how Java interoperation is achieved through Kawa, the June hangout should help:



There are a number of very important topics for App Inventor development, and I briefly cover some of them in the video. Please use the mailing list for discussion, ranging from ideas or improvements, to stickier topics such as what the primary audience for App Inventor is, should the focus shift towards other targets, and so on.
There's been a number of new distributions appearing (if you follow the forums, you can see the work Hossein, Gary, or Dave Wolber are doing). These are all great, but it would also be great if, as a community, we can talk about how to best approach things and design for interoperability. A couple of good examples in the forums are the threads about the sqlite component, and a discussion titled the dangers of fragmentation. Please keep active in the forums and irc.

The last subject in this video briefly covers how to work with App Inventor 2 (codename: newblocks) from the github account.

And finally, here's the video for Part 6:




Enjoy!

Open Source Development with App Inventor: Part 5 : Your own Personal Companion

Show all videos of this series.

In this part of the video series we are going to see how to package our own Companion app. This is the app that can be used with wifi for development purposes (no USB cable needed).





As explained in the video, the reason why you would want to create your own app is that the Companion contains a copy of each of the Components available in the system. If you develop a new component, this new guys and its blocks will not be available in an app distributed by MIT. You can create your own app by using an ant target available in the main build script:

ant PlayApp

Make sure that you manually uninstall any other Companion apps before installing the newly created one, especially if you have installed an app distributed by MIT. The reason is that the apps, even though they can have the same name, are going to be signed with different keys, and the phone might get a bit confused.


If for any reason you need a Companion app for an older version of App Inventor, you can create one using the MIT repo git tags. One thing I forgot to mention in the video is that to update the tags from the repo, you have to fetch them. This can be done by executing (assuming you have called the remote 'upstream'):

git fetch upstream

These are the steps to move to a different commit (in this case we use a tag, but a commit would work too), and create the new-old Companion app:

0. make sure you are in clean state, in master, and with all the latest from upstream (mit-cml)
1. sync with upstream to grab all the tags: git fetch upstream
2. checkout the tag you want to build the companion for: git checkout v133
  - this will put you in detached head mode
3. ant clean; ant; ant PlayApp
 - this creates: MIT Companion app.apk
4. git co master to go back to master.

 And that is all for this video, catch you in the next one!

Open Source Development with App Inventor: Part 4 : Android Activity Lifecycle

Show all videos of this series.

The training site for Android is full of great resources. If you have an interest in Android development, I would recommend to go through all of the sections, but if your time is limited and you can only go through a bunch of them, you should not skip Managing the Activity Lifecycle.

Always keep the following figure in mind when developing and app, and App Inventor provides hooks to the Activity Lifecycle through the Form class:

Activity Lifecycle, from Android training site.

The following video shows those hooks, and the main interfaces used to that effect:





In the next video we will be showing how to package the Companion app from sources, and explaining why you would want to do that in first place.

Open Source Development with App Inventor: Part 3 : Read the source Luke

Show all videos of this series.

Welcome to another video of the Open source development with App Inventor series. In part 3 we will go through the sources by reviewing how new Components are created. We will see some of the main parts of the Twitter component, and what parts of the system need changing to make sure that everything is kept in sync.

The image that opens the video was taken from Coding Horror, a fantastic blog about software development.



The main two documents used in this video are:

• How to add a Component
• How to add a Property to a Component

In the next video we will be talking a little bit about the Android lifecycle, how it affects App Inventor apps, and how the codebase hooks into the methods provided by the Android SDK. Catch you then!

Open Source Development with App Inventor: Part 2 : Working with the Sources and Git

Show all videos of this series.

In this part of the Open Source Developement with App Inventor series, we'll see how to work with the sources. My first (and only) attempt at recording it was getting too long, so I decided to divide this part in several videos (3 in total).

In the first video (titled Part 2), we'll see the documents that are the base of all the actions explained in the video. These are mainly two, How to build App Inventor from MIT sources, and Developing App Inventor with git and github. As mentioned in the video, if you just want to run App Inventor locally, and do not expect to be changing the sources at all, then the first document is enough. If you want to work a bit on the sources, make some changes, or create your own components, then you need to read both documents. And here is the first video:



In the second video (titled Part 2 and a Half), we see how to sync with the remote or upstream repository. Git is a distributed version control system. If you have worked with a system like subversion before, Git might be a bit difficult to grasp at the beginning. Here's a good comparison article between centralised and distributed source control. If you haven't gone through the Git resources highlighted in previous videos of this series, please do so now. In this video we will see how we can get our github Fork synchronised with the main repository maintained by the MIT team.



The third video (titled Part 2 and Three Quarters) shows how, once the sources have been built, the system can be locally launched. As explained in previous videos of this series, there are two main servers that you need to get running to play with App Inventor locally, one is the server portion of the appengine project that backs the Designer interface, and the other one is the Build Server that creates the apk files for your projects. Here's how you can do that:

Open Source Development with App Inventor: Part 1 : Developer Overview

Show all videos of this series.

In this second part of the video series we are going to explore the basics of the system, at a very high level. A description of the different projects and what they do is given.



The links for this part are:

Where to find stuff?

Main OSS Website: http://appinventor.mit.edu/appinventor-sources/

Forum: https://groups.google.com/forum/#!forum/app-inventor-open-source-dev

IRC Channel: freenode.net #appinventor

Other links:

App Inventor Developer Overview

Open Source Development with App Inventor: Part 0

Show all videos of this series.

I am a big fan of tech video series. If I recall correctly, railscasts was the first one I watched, probably at about the same time that I started following TED talks (although the latter are not really a 'series' in itself, and not always about tech). Much more recently, I have very thoroughly enjoyed the AngularJS videos in egghead.io, and I tend to watch as many full conferences as I can.

No surprises here then if I tell you that I have started recording my own series, right? The topic is App Inventor and Open Source. I have no idea how often I'll get a chance to record a video, but if you want me to talk about an specific part of the project, I'll do my best to get it online. I will always try to keep them shorter than 10 minutes (that's the format I generally enjoy more), so some topics will be divided into multiple videos. I do not intend to do any editing, so at times, you'll see me doing some weird stuff and getting it all wrong, but I won't be cutting stuff off, mostly for the sake of learning. Feel free to shout to the screen (as I do... at times...) or leave a comment, and I'll do my best to get it right in another video.

I am going to start with the basics, but this isn't really a 'Learn Java' kind of series; there are millions of resources out there to learn Java and Android, so I doubt we need yet another one (and I also doubt I can do a better job!). So if you know a bit of Java (or some other language), and you are familiar with the command line, and building programs from it, you are all set for the series... so let's get started!

Part 0: Before you start


Here are the links in the video:

Where to find stuff?

Main OSS Website: http://appinventor.mit.edu/appinventor-sources/

Forum: https://groups.google.com/forum/#!forum/app-inventor-open-source-dev

IRC Channel: freenode.net #appinventor

Other links:

Article about the command line.

Github and CodeSchool interactive tutorial.