Creating a Bluetooth Android App using App Inventor #tt22

Tinkerer: Lory Livezey

App Inventor is an open source platform that allows you to create Android apps using a drag and drop interface. We've already learned how to create a simple app and test it on our Android device. In this tutorial, we're going to learn how to create an app that can connect to a Bluetooth Device.


Objectives

You'll learn how to:

  • Use the Bluetooth Connection tool in App Inventor
  • Program the List Picker to display a list of bluetooth devices on the Android

Previous Step

  Create a Hello World Android App in App Inventor #tt21

What You'll Need

You'll need a Windows Computer, Mac or Raspberry Pi, and an Android Phone or Tablet. You'll also need a bluetooth device to connect to.

What We're Doing

We're going to connect to the HC-06 Bluetooth Module that we connected to the Arduino in TurboTinker #20. Then we're going to create a simple mobile app that allows you to press a button, then displays all of the available bluetooth devices in range. Once you select the bluetooth device, it will display a message once connected.


Starter Breakpoint

The App Inventor project:

  • We'll be starting from scratch

Browse to the App Inventor Web site

I try to do everything possible on the Raspberry Pi, because some students may have only that to use. So I will remote into my Raspberry Pi, though you can use a Mac or PC for this. Open up the the App Inventor Web Site, and log in using your Google account:

Log in to App Inventor


Start a New Project

Once you're logged in, click 'Start New Project'. No spaces or dashes are allowed.

Create a New Project


Set Up Bluetooth

Click to open your project. To get started, we'll drag a Bluetooth Client from Connectivity.

Drag Over Bluetooth Client

We'll use a ListPicker to display a list of available bluetooth devices:

Create List Picker

Next, we'll center it by putting it in a HorizontalArrangement container.

Create Horizontal Arrangement

Click on the HorizontalArrangement Container, and set to "Fill Parent" so it covers the width of the device.

Fill Parent

Click on the BlueToothList, and change the text to Connect, and center it.

Change Text

Drag another Horizontal Arrangement and place a Label in it. This will display the status of the connection. Center it, increase the font size, Change the Text to Disconnected.

Change Text to Disconnected


Add a Clock Component

Drag a clock component to the canvas. We'll need this to periodically check our bluetooth connection.

Clock component


Program in Blocks View

Click on Blocks to go into Blocks View. Notice the names of our ListPicker and Status box. Not too descriptive.

Badly named

Click back on Designer, and we'll change the names by selecting them in the Components pane, and clicking 'Rename'. We'll name them BluetoothList and Status.

Rename BluetoothList and Status

The BluetoothList.BeforePicking Block is an event that we'll use to populate the box with bluetooth devices in range at just the right time.

BluetoothList BeforePicking

The BluetoothList.AfterPicking will trigger after you've selected a device. We'll use an if/then and if an item was selected, then check for a connection. If so, send the word "Connected" to the Bluetooth server, and make the BluetoothList invisible.

BluetoothList AfterPicking

Next, we'll work on our clock block. It will trigger at a set duration -- it defaults to one second. So every second we're going to check the status of the connection. We'll use an if/then block, and if the bluetooth client is connected, then we'll set the status text to Ok. Else, we'll set it to disconnected.

We'll also set the text on the screen to "Connect".

Clock Block


Install AI Companion & Test

Let's connect to the Android to test it. Select Connect, then AI Companion:

Connect AI Companion

It will generate a QR code, that you can either scan or enter into your device:

QR Code

Type in the QR Code, and connect to the bluetooth device.

Connect to Bluetooth

App Inventor Ok


Add Disconnect Button

That's good, but what if we now want to disconnect?

Let's go back and add another button, call it Disconnect:

Create Disconnect Block

Hide it initially. We'll make it visible in the code when we're ready:

Hide Disconnect
Go back into blocks view, and drag a "When disconnect click do" block, we're going to set the bluetooth list to visible, the disconnect button to invisible, and we're going to disconnect the bluetooth connection.

Disconnect Blocks

We'll set the button to visible after we connect.


Test Again

Now, let's run it again. It's working more like you would expect it to.

Final Project

In this tutorial, we connected our Android app to an HC-06 bluetooth module using App Inventor, and then we used the AI Companion app to test it on our device. Stay tuned, because we'll build on this to control the Tinker Pi Robot using an Amazon Kindle.


Finish Breakpoint

This file can be uploaded into App Inventor:


Next Up

Test MIT App Inventor on the Amazon Kindle #tt24
Connect Your Android Phone to Arduino Using App Inventor #tt23

Be sure to subscribe to our channel!