A “switch board” user interface panel for App Inventor apps

In the last post, we introduced some concepts for building “creative” App Inventor user interfaces that feature visually appealing user interface controls rather than the usual bland buttons.

In this post, we look at creating an array of toggle switches. Tapping a switch flips the switch from left to right, or right to left.

Concepts

In developing this user interface, we learn two concepts:

  1. We expand on the previous post and its use of images to create custom buttons.
  2. We see how a user interface control can be stored in a list and referenced like a variable within our apps.

Source code:

The User Interface

I called my app “Mission Control” because any good mission control panel needs lots of switches!

The user interface features 9 toggle switches in a 3 x 3 array. The purpose of this app is to demonstrate how to implement this type of interface – the app does not otherwise do anything interesting.

Tapping any toggle switch causes the switch lever to move to the other side of the switch. Here is a screen shot showing some toggle switches to the left and some to the right.

Screenshot_20160204-140323The Designer View

Continue reading

Advertisements

Free-Download App Inventor Text Files Cheat Sheet

Download here: App Inventor Basic Text Files Cheat Sheet (PDF)

High res, suitable for printing. Feel free to share with others.

App Inventor sample source code: TextFile.aia

Be sure to follow the links for more information about text files and where they are stored on your device and how to transfer files to your computer.

Here is a GIF image but use the PDF for printing:

Voila_Capture 2015-11-02_10-45-33_AM

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

Free-Download App Inventor Location Sensor Cheat Sheet

Download here: App Inventor Location Sensor Cheat Sheet (PDF)

High res, suitable for printing. Feel free to share with others.

App Inventor sample source code: Location_WhereAmI.aia

Here is a GIF image but use the PDF for printing – also, where it says “enter a mailing address”, that should probably be “enter a street address”!

Voila_Capture 2015-10-28_12-21-17_PM

Post comments here or on our Facebook group page. Thank you!

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

All new tutorial: Using TinyDB in App Inventor

I have completely rewritten and re-done my original tutorial on using TinyDB in App Inventor.

You can see the all new rewrite at Using TinyDB in App Inventor

TinyDB is a database used to store and retrieve values to semi-permanent storage on your phone or tablet. Unlike variables, which vanish when your app closes or your phone is turned off, values stored in the TinyDB are retained and can be accessed again, much later.

The original post was a popular post here on the blog, but it was brief and left out some details. I started over from scratch and wrote an all new, complete tutorial, with screen shots and blocks code, and downloadable App Inventor source code. Hope this helps!

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
    • App Inventor 2 Databases and Files (Volume 3 e-book)
      Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
      Buy from: Amazon, Google Books, Kobo Books
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

Free-Download App Inventor Bluetooth Communications Cheat Sheet

Download here: App Inventor Bluetooth Cheat Sheet (PDF)

Covers basic Bluetooth text communications with links to tutorials on sending numeric and binary data, and connecting to Arduino over App Inventor Bluetooth.

App Inventor sample source code available here.

High res, suitable for printing. Feel free to share with others.

Here is a GIF image of the first page but use the PDF for printing (higher resolution) and it includes both pages:

Voila_Capture 2015-10-28_08-35-41_PM

Post comments here or on our Facebook group page. Thank you!

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

Free-Download App Inventor OrientationSensor “Cheat Sheet”!

Download here: App Inventor Orientation Sensor Cheat Sheet (PDF)

High res, suitable for printing. Feel free to share with others.

Here is a GIF of the cheat sheet but use the PDF for printing (higher resolution):

Voila_Capture 2015-10-28_12-25-22_PM

Post comments here or on our Facebook group page. Thank you!

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

Free – download MIT App Inventor “Cheat Sheet”

I have created a “cheat sheet” that captures all of the App Inventor components, blocks, events, properties and procedure calls. The “cheat sheet” is 9 page of details, in a large (almost 5 MB) PDF file that contains high resolution images suitable for high res printing. For those learning App Inventor, the cheat sheet may help you quickly find various components within the interface.

Download here: App Inventor Cheat Sheet (PDF)

Feel free to share with others.

I have some ideas for additional cheat sheets but would like to hear what you might like to have in a “cheat sheet” summary format. Post comments here or on our Facebook group page. Thank you!

E-Books and Printed Books

If you find these tutorials helpful (I hope you do!) please take a look at my books on App Inventor. To learn more about the books and where to get them (they are inexpensive) please see my App Inventor Books page.

  • App Inventor 2 Introduction (Volume 1 e-book)
    Step-by-step guide to easy Android programming
  • App Inventor 2 Advanced Concepts (Volume 2 e-book)
    Step-by-step guide to Advanced features including TinyDB
  • App Inventor 2 Databases and Files (Volume 3 e-book)
    Step-by-step TinyDB, TinyWebDB, Fusion Tables and Files
  • App Inventor 2 Graphics, Animation and Charts (Volume 4 e-book and printed book)
    Step-by-step guide to graphics, animation and charts

Thank you for visiting! — Ed

How to Place Your App Inventor Apps in the Google Play Store

An all new tutorial on this subject is available here as of May 2016! There is still some great information below – read both!

Apps you create in App Inventor may be added to the Google Play Store.

The process is not difficult but there are many steps to the process and you will need to create some graphic images to illustrate and promote your app in the store.

Summary of the Steps

  • Set your app’s VersionCode and VersionName.
  • Apply for a Google Developer account (one time fee of US $25 after which you can upload an unlimited number of apps, forever).
  • Create at least two and up to 8 screenshots of your app for display in the store’s app listing.
  • Create a “feature graphic” and a high resolution icon for use in the store listing.
  • Use the App Inventor provided keystore file, or use a keystore file you have created elsewhere or previously.
  • Build and export your app as a .apk file to your computer.
  • Create a title for your app in the store
  • Write a description for your app to appear in the store
  • Decide on free versus paid (paid requires a “merchant account” to be set up).
  • Upload your apk file, keystore file, image files and title and description, and provide some additional information (such as product category, pricing, and target audience).

Continue reading

App Inventor course available in Spanish

Estructurado en 8 módulos y con más de 146 clases este curso es ideal para aquellas personas que, sin tener idea de programación, quieren tener un curso completo de App Inventor paso a paso y basado en la metodología de aprender haciendo.

Curso de Desarrollo de aplicaciones móviles Android con App Inventor

The 22 hour online course is offered through the udemy.com

(I did not make clear – sorry – this course is from Professor José Luis Núñez and he is offering it through udemy.com. I am not involved in this at all – just sharing the link – Ed)

App Inventor introduces copy and paste of code blocks!

App Inventor has introduced “copy and paste” of code blocks. Now you can copy blocks of code within a current screen, or from one screen to another screen, or even between projects. This is great news!

Look for the “backpack” icon at upper right of the blocks Viewer screen:

AI_Copy1

Select a block or blocks with the mouse pointer, and then click and drag the selected blocks into the backpack. A copy of the blocks are placed into the backpack and your original blocks also remain in the editing window.

Click on the backpack icon and it displays the code blocks currently stored in the backpack:

AI_Copy2

Click on the code block in the backpack (at right) and drag it into the Blocks Viewer. That is all you need to do to copy blocks.

Use this feature to copy blocks within your current screen, or to copy blocks from one screen to another screen, or to copy blocks from one app to another app.

You can put several blocks into the backpack, and then select only the ones you wish to copy over to another blocks Viewer.

How do you empty the backpack? It seems the only way to empty the backpack of saved items is to close the editing windows, go back to the MIT App Inventor home page (http://appinventor.mit.edu/) and select the Create apps! button to re-enter the designer and blocks editor.

Regardless, this is a GREAT NEW FEATURE! Thanks MIT App Inventor team!