Archive for Text Box

How to Use the Tiny DB Component

In this App Inventor tutorial you’ll learn how to use the Tiny DB component. At the end of this App Inventor tutorial, you’ll find two videos outlining the process seen here. You can also download the APK and App Inventor Files.
This great App Inventor tutorial was created by Stevozip. Thanks!
The first step in any project we undertake in App Inventor is the design phase of our Tiny DB application.
For this app, we’ll need to add the following items:
  • Four text boxes
  • A label
  • Two buttons
  • An image component
  • A checkbox
  • A listpicker
  • A TinyDB
  • Three HorizontalArrangements
  • Two VerticalArrangements

Once we’ve got our design set up the way we want it, we can move right into setting up our code blocks.  When the goal of the app is saving information to a TinyDB, I generally will code my save button first since that will be the backbone of the application.


For the save button, we’ll need to add an IfElse block that will check to make sure that what we are going to upload to our TinyDB isn’t already in the list so we don’t end up overwriting the tag when we don’t want to. When we’ve got that portion in place, we can code the “else” portion of the block to upload our person’s name into the DB with all of our text boxes, picture, and checkbox values saved as sub-elements of that name.  The next thing we need to do is make sure that the name gets loaded into the defined variable list so we can upload that list to our TinyDB and extract the relevant information for populating our form elements.


Remember that there will be two lists we’re saving to the DB: one is the list of info relevant to the person, and the other is the list of persons we want to save information for.  Once we’ve saved our person’s name to the list, we can then save that list to the TinyDB and then populate our listpicker with all the names that’ve been saved into the variable list.  Since we might want to add another person to our database, we’ll code the program to clear all of the elements in the application to prepare for the next person.

Now that we’ve got our save button coded, let’s move on to the rest of the application.  The next thing we should get out of the way is coding whether or not we’ll be saving an image for each person we upload to the database.

Next comes the coding of the listpicker and pulling the information from the database to display properly in our app when we select a name from the list.  Because we defined the valueToStore to the TinyDB as a list of information, we can’t just arbitrarily pull the information out and plop it anywhere we want to.


Each list item has an index, and this index must match exactly in our “select list item” block that it does in our TinyDB list of information for the person we’re going to look at.  If the first item in the list, when uploaded to TinyDB, is their date of birth, we have to set our index value in our “select list item” block to 1, since that’s the same index value as the date of birth.  This is especially important for this application when we’re uploading a checkbox value and picture to the DB, in that you can’t specify a value of a checkbox as anything other than True or False without receiving an error and crashing the program.  A picture named incorrectly might not necessarily crash the app, but it definitely won’t display anything if the name of the picture doesn’t match with the picture that’s saved in the TinyDB.  Once we know the order of information in the list, that trouble is gone and we can then tell the program to pull the information for the person we want to look at, and in order to do that, we have to use the GetValue block and insert the ListPicker.Selection value into it.  Remember that we uploaded the name of someone as a tag to the TinyDB, and that value is then stored on the DB and we can access it.

Once the code for the listpicker is setup, we can move on to setting up the Screen1.Initialize portion of the app.


In here we’re going to need another IfElse block and use it to check whether our TinyDB tag for our variable list is in existence.  If it is not there (the tag is blank), then we don’t do anything, so we don’t end up with an error; if it is there, we want to pull it out of the DB and upload the list to our variable and populate our listpicker with it.

Now we have our entire list of people loaded into our program and we can view all of their information.
The source code for the program is below.  Feel free to download it and alter it to suit your fancy.

Attachments (2)

  • TinyDB_tutorial.apk – on Oct 14, 2010 7:07 PM by Stephen Zipprich (version 1)
    1117k Download
  • – on Oct 14, 2010 7:07 PM by Stephen Zipprich (version 1)
    10k Download

How to Use the Web Viewer Component

This App Inventor tutorial explains how to use the Web Viewer component to view websites through your Android phone.

In this video, you’ll learn how to access a specific web page with the Web Viewer component by setting up the components and the blocks.

What You’ll be using:

  • Web Viewer
  • Button
  • Text Box

Loan Calculator with Math Functions

Our next sample project using Google’s App Inventor is the classic Loan Calculator. Some of the items I’ll highlight include:

  • Layout design techniques
  • Adding images
  • Math functions
  • Button actions

This awesome tutorial comes from the Android Advice blog. Thanks!
Let’s get started…

1. Click on My Projects, then create a new project. I called mine MortgageCalculatorApp.

2. You will now see the layout screen with Palette, Viewer, Components, Media and Properties boxes. Adding components is easy by dragging objects from the Palette box onto the Viewer.

3. Drag 4 HorizontalArrangement objects from the Palette onto the Viewer and name them (in order):

  • logoHorizontalArrangement
  • principalHorizontalArrangement
  • rateHorizontalArrangement
  • monthsHorizontalArrangement

4. Below monthsHorizontalArrangement, add a Button named calculateButton. Set the width of this button to “Fill Parent.”

5. Below calculateButton, add a Label named resultLabel. Set the width to “Fill Parent,” color to Red, make Bold and center the text.

6. At this point, our basic layout is complete. We now have to add our components into the layout.

  • Set the width of logoHorizontalArrangement to “Fill Parent.” Then, drag (2) VerticalArrangement objects into it. Set the widths of each of these to “Fill Parent” as well. Finally, drag an image in between the (2) VerticalArrangements. Including the VerticalArrangements on either side of the image allows us to center the logo.
  • Drag a Label into principalHorizontalArrangement, name it principalLabel, set the text to “Loan Amount,” and set the width to 100px.
  • Drag a TextBox into principalHorizontalArrangment to the right of principalLabel and name itprincipalTextBox
  • Drag a Label into rateHorizontalArrangement, name it rateLabel, set the text to “Rate,” and set the width to 100px.
  • Drag a TextBox into rateHorizontalArrangment to the right of rateLabel and name it rateTextBox
  • Drag a Label into monthsHorizontalArrangement, name it monthsLabel, set the text to “Months,” and set the width to 100px.
  • Drag a TextBox into monthsHorizontalArrangment to the right of monthsLabel and name itmonthsTextBox

At this point, your screen should look like this:

7. Now connect your Android phone via usb. On your phone, go to Settings–>Applications–>Development. Enable USB debugging and Stay awake.

8. On the layout screen click the button to Open the Blocks Editor. This will open a Java applet that contains all of the logic blocks/action handlers and interfaces with your phone.

9. We will be calculating the following equation with the code blocks:

10. The code for this app requires several variables: To get variables in Blocks Editor, go to Built-In, then Definition and drag “def variable” onto the screen. All of our variables will be numeric so initialize them to 0 by attaching the number block from Built-In–>Math and changing 123 to 0.

11. The only other code block we need for this app is a responder to the button click: whencalculateButton.Click do action. This is called when the button is clicked and will take care of the math in the app. This block is found under My Blocks–>calculateButton.

12. Inside the when calculateButton.Click do action, all of the variables are set to their corresponding values from our loan equation above. You will get a lot of use out of the Built In–>Math blocks when constructing the equation elements. The last set of blocks sets the label with the calculated monthly payment amount rounded to 2 decimal places.

So there’s the code (layout and blocks) required for building a loan calculator.

Download this application onto your phone by scanning this code: