App Inventor Code Snippets


This page lists useful code snippets for App Inventor 2.

The snippets for App Inventor Classic you can now find here.
The tutorials and advanced examples have been moved to the Tutorials page

App Inventor Code Snippets Overview

The snippets for App Inventor Classic you can now find here.

Canvas

Web Viewer and App Inventor

Activity Starter

Other Stuff

Do you need help with your App Inventor project?

I can help you: for one hour I charge 25$.
Please contact me at info [at] puravidaapps [dot] com for details!
For questions about App Inventor, please use the App Inventor forum. Thank you.



Canvas



How to save a canvas

This is a small add on to the Paint Pot tutorial. Add additionally a Button and a TinyDB component. Then in the block editor add these two blocks.
The function Canvas.Save and Canvas.SaveAs return the directory and filename. Therefore you have to define something (e.g. a variable or a label) which is able to receive this information. In the example this information is stored in a TinyDB, so the next time the app starts, the drawn picture is still there.

Back to top of page ...




How to create a Scratchcard with App Inventor

It has been asked in the forum how to create a scratchcard with App Inventor. This is my solution.


Download aia file for App Inventor 2
Back to top of page ...




Webviewer and App Inventor

From the Palette, expand 'User Interface' and add a 'WebViewer' component to the screen.



How to read a HTML page stored as media file inside of App Inventor

The example uses 2 html files and an image stored as media files inside of App Inventor. In case you like to take a look at the source of these files, upload the App Inventor aia file to App Inventor and download the html files from the assets list.

There is one special thing to consider for HTML documents uploaded as assets into App Inventor: During development, you have to use the development path to the embedded HTML document.

file:///mnt/sdcard/AppInventor/assets/<NAME OF YOUR HTML FILE>.html


Before building the app, use the production path.

file:///android_asset/<NAME OF YOUR HTML FILE>.html


Note: External anchors are working only for Android 2.x devices but not for Android 3.x and 4.x devices. Thank you Ehsan for finding it out.
Example: An external anchor is to go to the following url with a webviewer file://android_assets/page2.html#myAnchor. This works only for Android 2.x. You can go to this page file://android_assets/page2.html and inside the html document jump to the anchor, this works for all Android versions.



Download aia file for App Inventor 2
Download apk file

Back to top of page ...




App Inventor and animated gifs

You can access an animated gif file directly with the webviewer component.

There is one special thing to consider for HTML documents uploaded as assets into App Inventor: During development, you have to use the development path to the embedded HTML document.

file:///mnt/sdcard/AppInventor/assets/ani.gif


Before building the app, use the production path.

file:///android_asset/ani.gif


Download aia file for App Inventor 2
Download apk file

Back to top of page ...


Please also take a look at the App Inventor and embedded HTML/JavaScript tutorials and advanced examples.




How to pass user and password for basic HTTP Authentication in URL

According to this info on serverfault.com it is possible to pass user and password in a URL to be able to access a restricted area. The format to be used is

http://username:password@example.com


Unfortunately this does not work for all Android versions. I tested that on HTC Desire running Android 2.2 and Nexus 5 running Android 4.2.2 and it worked. It did not work on Samsung Galaxy Tab 10.1N running Android 3.2.



An example how to download a file from a restricted area you can find here.

Back to top of page ...




Activity Starter



How to launch Google Play from within your app


Back to top of page ...




How to add a contact to the contact list

Provided by Fabio in this thread. Thank you! The default data type is "mobile", unfortunately we can't change that with MIT App Inventor, because we only have one ExtraKey - ExtraValue pair we can send with the Activity Starter.

Back to top of page ...




How to send an eMail

Following the Activity Starter documentation we easily can send an eMail with the Gmail client:

Download aia file for App Inventor 2
Back to top of page ...

You also might be interested in the example How to send an email with attachment.




How to launch Waze to look for a specified location

Following the Waze documentation we easily can open Waze and look for a specified location:

Back to top of page ...




How to view a pdf document

You can use the Activity Starter to view a pdf document, which is already stored on your device. How to download files from the internet to your device. To open a pdf document from the Internet, I used a webviewer together with the Google Docs Viewer and the link to the pdf document.

It has been asked in the App Inventor forum: I have uploaded the PDF files into the media section in App Inventor but I just can't seem to find how to make them open from clicking the button.
Note: It is not possible to store a pdf document as asset in App Inventor and view it with a pdf viewer. This is, because App Inventor itself can't display pdf files and external pdf viewers called with the activity starter from App Inventor are not able to access assets inside the app.

You also might be interested in the following example: How to pick a file from SD card with App Inventor


Download aia file for App Inventor
Back to top of page ...




How to pick an image using the Activity Starter

The Image Picker component is limited to 10 images you can pick from: When the user taps an image picker, the device's image gallery appears, and the user can choose an image. After an image is picked, it is saved on the SD card and the ImageFile property will be the name of the file where the image is stored. In order to not fill up storage, a maximum of 10 images will be stored. Picking more images will delete previous images, in order from oldest to newest.
Alternatively you can use the Activity Starter without such restrictions. Thank you Jari for this tip.

Download aia file for App Inventor
Back to top of page ...




How to use Activity Starter to view a Youtube video in full screen

In the Designer set Screen.Orientation to Landscape. Thank you Aaron for this example.

Download aia file for App Inventor
Back to top of page ...




Other Basic Stuff



App Inventor and the Screen Size

The screen size of some older phone models is 320 x 480 pixels in portrait mode. The current version of App Inventor (Android API 3) uses that size. Thank you Jos! To demonstrate that, I used Scott's example and a Samsung Galaxy Tab 10.1N. The first screenshot is the app after packaging through App Inventor (screen size =545 x 295), the second screenshot after additionally going through AppToMarket and setting the screen to "Any" (screen size = 1280 x 727).

See also some recommendations from Gareth here.

Back to top of page ...




How to build a simple compass app with App Inventor

Compass card image from Wikipedia by Brosen. Thank you!

Download aia file for App Inventor 2
Back to top of page ...




How to trigger something if device is facing down

It has been asked in the forum how to trigger a sound if the device is facing down. I'm using the Accelerometer Sensor for the example, because this sensor offers acceleration in the Z-dimension. Thank you freesfx.co.uk for the car alarm sound.


Download aia file for App Inventor 2
Back to top of page ...




How to create a nested listpicker

It has been asked in the forum: I need a main listpicker with different sublists of items below them depending which main list item is selected.
For the solution presented here, I'm using 2 listpicker, the second listpicker for the sublists is hidden and will be opened with the listpicker.open block.


Download aia file for App Inventor 2
Back to top of page ...




How to get leading zeros in App Inventor


Back to top of page ...




How to parse a result


Download aia file for App Inventor
Back to top of page ...




How to use the Sound Recorder

It has been asked in the forum: I'm very new to this and would like to use the SoundRecorder but have no idea how it works and unable to find any example.
I now prepared an example for you:

Download aia file for App Inventor
Back to top of page ...




New formatting possibilities with the Notifier

According to the documentation of the notifier component we now can use some HTML for the formatting: The messages in the dialogs (but not the alert) can be formatted using the following HTML tags: <b>, <big>, <blockquote>, <br>, <cite>, <dfn>, <div>, <em>, <small>, <strong>, <sub>, <sup>, <tt>, <u>. You can also use the font tag to specify color, for example, <font color="blue">. Some of the available color names are aqua, black, blue, fuchsia, green, grey, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Note: You might have to build your app to see the results! Thank you Hal for the example.


Creative Commons License
This work by Pura Vida Apps is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License
with attribution (name=Pura Vida Apps and link to the source site) required.


Home | Apps | Snippets | Tutorials | News | Forums | Links | Search | Contact