MIT App Inventor – A text entry example for beginners

When using an Android application, you may need to handle user-entered text. With this simple little example, I want to show you how to process a typed text.

The zip files associated with this article also include the project file (.aia) and the installable application (.apk). It has not been extensively tested, I have only tried it on my own phone, so install it at your own risk.

Razer Kishi Mobile Game Controller / Gamepad for Android

Razer Kishi Mobile Game Controller / Gamepad for Android

advertising – amazon.com

Let’s create our application appearance on the ‘Designer’ page.

First, drag two ‘HorizontalArrangement’ layouts onto the screen, then place a ‘Label’ on the first for the text you want to display. The second layout requires a ‘TextBox’ and a ‘Button’.

Then make settings for each component in the ‘Properties’ column. You can experiment a bit with colors, sizes, etc.

MIT App Inventor - Designer - Textbox example
MIT App Inventor – Designer – Textbox example

When you’re done, go to the block editor. You can see below that the “Code” is not very complicated.

After pressing the ‘Button1’ button, we remove the empty characters and check that the ‘TextBox1’ is not empty. If blank, enter an error message in the ‘Label1’ field saying ‘The input field is blank!’, Otherwise enter the text from ‘TextBox1’.

MIT App Inventor - Block Editor- Textbox example
MIT App Inventor – Block Editor- Textbox example

Let’s see what we did, open the ‘MIT AI2 Companion’ app installed on your phone and scan the QR code.

MIT App Inventor - Textbox example
MIT App Inventor – Textbox example

Project files can be downloaded from:  TextBoxExample.zip

You can change your application so that the text before closing appears in the ‘Label1’ field the next time you start it. On the ‘Designer’ page, add a ‘TinyDB’ database component, Simply drag it to your phone screen.

MIT App Inventor Designer - Textbox database example
MIT App Inventor Designer – Textbox database example

Go to the block editor page and modify the “code” as follows.

MIT App Inventor Block Editor - Example with a Textbox database
MIT App Inventor Block Editor – Example with a Textbox database

In the first block, when you start the application, it reads the previously saved text from the database. If it is not in the database, enter the default text in the “Label1” field.

In the second block, in addition to the previous example, we enter the value of ‘TextBox1’ in the database so that we can use this text the next time we start.

You can find the files for the second example here:  TextBoxDatabaseExample.zip

Learning MIT App Inventor: A Hands-On Guide to Building Your Own Android Apps 1st Edition

Learning MIT App Inventor – A Hands-On Guide to Building Your Own Android Apps

advertising – amazon.com