Category Archives: Programming Method

Displaying web pages in your Android apps

Last year, I presented a short tutorial on displaying web pages from inside your App Inventor apps. Now, here is a some what improved version that prompts for a web address URL, checks to see if http:// has been entered, and if not, prepends http:// to the front of the address. Then the web page is displayed.

The Designer View

There is not much to the user interface – a text box to enter the web URL and a button to display the web page. The page then appears below the button, and the content may be scrolled on the screen.

To create this user interface, drag a horizontal layout onto the screen and then add a label for the “Web page URL” prompt, followed by a text box for the data entry. Then add the Display web page button.

From the User Interface section of the Palette, at the left of the Designer screen, drag and drop a WebViewer component on to the design area.

Screenshot_2015-02-10-15-15-17

 

The WebViewer is not a full Internet browser – it is a component that displays the specified web page only. The WebViewer does not support standard browser features, such as saving web page content nor does it provide a history of the web pages visited.

The Blocks Code

Continue reading Displaying web pages in your Android apps

Part 2: Sending numeric data using App Inventor Bluetooth communications

Part 1 of this tutorial introduced Bluetooth communications and implemented a simple method of sending text data back and forth between two Android devices over the Bluetooth wireless link. If you are not familiar with using App Inventor’s Bluetooth component, start with Part 1.

In Part 2, a data packet concept is introduced to guide the communications between devices, and is used to send a combination of text and numeric data. This section introduces the concept of binary numbers so that you can understand why we would handle text and numbers in different ways.

This tutorial modifies the user interface of both the client and server programs introduced in Part 1. Then, blocks code is added to send text and numeric data. Numeric data is sent as binary data using special methods of the Bluetooth components.

Related:

Continue reading Part 2: Sending numeric data using App Inventor Bluetooth communications

App Inventor Bluetooth Communication tutorial coming soon

Android phones and tablets support Bluetooth communications (“BT”).

BT is a very low power, very short range communication technology used for connecting earphone and headphone adapters, wireless microphones, and wireless keyboards and mice to computers and tablets.

App Inventor supports BT links and can be used to transmit data back and forth between two Android devices.

When two devices communicate, one device acts as a “server” and the other as a “client”, although either send and receive data.

I now have basic Bluetooth communication working between two Android phones. As I finalize the Bluetooth sample app, I will post a tutorial here on how to set up Bluetooth and how to write apps that use Bluetooth communication.

Longer term, I intend to connect an App Inventor app to an Arduino microcontroller board using the Bluetooth link. I will post information on that once it is available.

(Due to volunteering every evening with a FIRST Robotics team, and a few extra things going on, my updates are a little less frequent at the moment – sorry!)

Updated: Writing and Reading Text Files Using App Inventor

This post is a major update to a previous post on reading and writing text files using App Inventor. This revision includes information on how to locate the text files you create in your App Inventor apps, plus how to transfer those files from your smart phone or tablet to your computer.

An earlier blog post described how to store data using TinyDB so that an app’s data can persist between uses of the program, or even to share data between screens in a program.

Another way to save data is to write the data to a file on your Android device. App Inventor has introduced a File control that lets us write text data to a file and then read it back, later. As we will see, the File control is not the easiest thing to use but with some work, the control can be used to store data from our program into a file.

Once data is in a file, you could, hypothetically, transfer the file from an Android to device to another computer. Because Android stores the files in a way that they may not be readily accessible – or even visible – we need to use some simple tricks to find the file and transfer the file to a computer.

Update: To learn more about text files and transferring data in the CSV file format, check out Volume 3 of “App Inventor 2 Databases and Files” – thanks!

Continue reading Updated: Writing and Reading Text Files Using App Inventor

Update: Reading and writing text files with App Inventor

I previously posted a short tutorial on writing to and reading from text files stored on an Android device, using an App Inventor app.

Unfortunately, as some comments noted, the file being created seems to disappear – the data is written and can be read back – but the file is no where to be found on the phone!

After some research, I now know where the file is – and also how to copy the file from the phone (or tablet) to your personal computer.  While the solution to finding and saving the file to your computer is ultimately easy, I need to update the tutorial and explain some things about the Android file system. You will also need to install a free app on your phone in order to copy the file to your computer.

I have posted an updated tutorial that explains the details and shows how to store your files in the right location, how to find them (they are hidden from most views), and how to copy them to your personal computer.

Changing an App Inventor button’s color continuously

How to implement a button that continuously changes color, as demonstrated in this video example:

The Designer View

Create a simple user interface with two buttons – one to start the color change and the other to stop the color changes. In the button properties, set the button shape to “oval”.

ButtonChangeColors3-Designer

 

Drag a clock component into the Designer – the Clock will appear as a non-visible component at the bottom of the Viewer.

Blocks Code

Continue reading Changing an App Inventor button’s color continuously

Changing the color of a button (or other components) in App Inventor

This tutorial covers the simple changing of the color of a button, while the app is running. You may also set a component’s color by changing the color properties on the Properties list in the Designer.

A second tutorial will show how to implement the continuously changing color demonstrated in the video example. That will be posted next!

The Designer View

To demonstrate the “simple” version, create an app with this user interface:

ButtonChangeColor-Designer

That’s simple!

Each time the button is pressed, the color of the button will change.

Blocks Code

Continue reading Changing the color of a button (or other components) in App Inventor

App Inventor Tip Calculator version 5: Fully automated!

What the App Does

This is the fifth version of 5 app versions that implement a tip calculator – and the final version is pretty cool! This app is useful – I was recently traveling and used it on my smart phone to calculate restaurant tips – I will post a short tutorial on how to install this app on your phone.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 introduced an improved user interface to eliminate user data entry errors.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

In Version 5, we eliminate the “Calculate tip and total amount” button by making the calculation automatic. Each time we enter a digit or adjust the slider, the tip is calculated immediately. There is no need to press a button to do the calculation.  Just enter a bill amount and optionally adjust the slider to select a tip percentage.

The Tip Calculator User Interface

The new user interface eliminates the Calculate button and adds a single “Clear All” button as a quick way to reset the calculator. This sets the bill amount back to zero and the tip amount to 20%.

Here is a view of the app in operation – the bill amount of 23.45 has been entered on the keypad and the tip amount is 20%. The tip and total bill are shown at the bottom of the screen.

Each time any digit is entered – or the tip is adjusted – the tip and total is automatically calculated.

TipCalc5-Screenshot_2014-11-12-17-43-32

 

Continue reading App Inventor Tip Calculator version 5: Fully automated!

Android App Inventor Tip Calculator version 4: Introduction to Procedures

What the App Does

This is the fourth version of 5 versions that implement a tip calculator. Each version has added improvements or new programming methods.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 introduced an improved user interface to eliminate user data entry errors.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

The Tip Calculator User Interface

No changes from version 3.

The Designer View

No changes from version 3.

The Blocks Code

Continue reading Android App Inventor Tip Calculator version 4: Introduction to Procedures

App Inventor Tip Calculator version 3

What the App Does

This is a simple app to calculate the tip and total bill at a restaurant – or other service provider where a tip is common place.

This is the third of 5 apps that implement a tip calculator.

  • Version 1 introduced the basic app and the use of error checking to handle user data entry mistakes.
  • Version 2 introduced the Slider user interface component to select the tip amount. Using the Slider, the user selects a tip from 0% to 30%. Since there is no text entry, it is not possible for an incorrect tip value to be entered.
  • Version 3 shows how to re-design the user interface to eliminate user data entry errors. With the new user interface, only correct numeric values may be entered.
  • Version 4 introduces “procedures” to clean up the code in preparation for version 5.
  • Version 5 revises Version 4 to make the calculation of the tip fully automatic plus fixes some minor oddities.

(Note: I revised the order of new features to appear in Version 4 and Version 5!)

The Tip Calculator User Interface

Version 3 eliminates the text box for entering the amount of the bill for service. Why? A text box allows the user to enter any kind of data, not just numbers – which means the user can enter data values that are not numbers.

By changing the program to use a “numeric keypad” interface, only numeric digits may be entered – and we eliminate potential data entry errors.

You can see how this works in this screen capture showing a calculator like keypad for entering the amount of the bill:

TipCalculator3a-ScreenShot

 

To use, just touch the numbers on the keypad. (There are some minor user interface oddities in this version of the program that will be addressed in version 5 – play with the program and see if you can spot minor problems!)

Continue reading App Inventor Tip Calculator version 3