Android Tutorial
Complete Beginner Guide

Build an Image AI Android App

Train a custom image classifier, connect it to MIT App Inventor using the TMIC extension, and install a working APK — no coding background required.

45–60 min
7 parts
Android device
Camera required
What you'll build
01
Train an image model
02
Export the model
03
Install the TMIC extension
04
Design the app UI
05
Connect WebViewer & classifier
06
Wire up blocks logic
07
Build & install APK
01
Part One

Train your image model

Teachable Machine image project
teachablemachine.withgoogle.com → Image Project
1
Go to teachablemachine.withgoogle.com and click Get Started.
2
Choose Image Project → Standard image model.
3
Rename Class 1 and Class 2 to your object categories — for example: Cat and Dog, or Thumbs Up and Thumbs Down.
4
For each class, click Webcam and hold down the record button to capture at least 50–100 images per class. Vary angles, lighting, and backgrounds.
5
Click Train Model and wait. Training runs locally in your browser — do not close the tab.
6
Use the Preview panel on the right to test predictions live via your webcam before exporting.
💡
Better accuracy tip: Capture images in the same lighting and environment where you plan to use the app. Include a Background / Other class with varied non-object images to reduce false positives.
02
Part Two

Export the model

Once training is complete, export the model so it can be hosted and loaded by your app.

1
Click Export Model (top-right of the training panel).
2
Select the Tensorflow.js tab.
3
Click Upload my model — Teachable Machine will host it for free on Google's servers.
4
Once uploaded, copy the shareable link. It looks like:
https://teachablemachine.withgoogle.com/models/XXXXXXXXX/
What's included in the export
model.jsonThe neural network architecture and weights.
metadata.jsonClass labels and model version info.
weights.binThe binary weight file referenced by model.json.
Hosted URLA public link that loads all three files automatically.
⚠️
Keep the URL: Save your model link somewhere safe. You will need it in Part 5 when connecting the WebViewer classifier. The link never expires as long as your Teachable Machine project exists.
03
Part Three

Install the TMIC extension

The TMIC (Teachable Machine Image Classifier) extension by AppInventor community member Taifun bridges Teachable Machine image models directly into App Inventor — no HTML file needed for the classifier logic.

TMIC.aix — App Inventor Extension
Community extension · MIT App Inventor Forum
Download .aix
How to import the extension into App Inventor
1
Download the .aix file from the link above and save it to your computer.
2
In App Inventor, go to the Designer tab. In the left panel, scroll to the bottom and click Extension.
3
Click Import extension, then Choose File and select the downloaded TMIC.aix.
4
Click Import. The extension will appear in your component palette under Extension.
5
Drag the Tmic component from the palette onto your screen — it will appear as a non-visible component below the canvas.
04
Part Four

Design the app UI

MIT App Inventor Designer
ai2.appinventor.mit.edu — Designer tab

Add the following components from the palette. Arrange them vertically on the screen.

  • WebViewer — displays the live camera feed for the classifier. Set width and height to Fill Parent.
  • Button — labelled "Classify Image". Triggers a classification when tapped.
  • Label — displays the predicted class name returned from the model.
  • Label (second) — displays the confidence percentage of the prediction.
  • Tmic (non-visible) — the TMIC extension component you imported in Part 3.
Suggested layout
Layout structure
Screen1 └── VerticalArrangement ├── WebViewer1 (Fill Parent width, 300px height) ├── Button1 ("Classify Image") ├── Label_Result ("Result: —") ├── Label_Confidence ("Confidence: —") └── Tmic1 (non-visible)
05
Part Five

Connect WebViewer & classifier

The TMIC extension uses the WebViewer component to access the device camera and run the TensorFlow.js model. You must link them together and provide your model URL.

Step 1 — Set the WebViewer in the Tmic properties

In the Designer tab, click on Tmic1 in the component list. In the Properties panel on the right, find the WebViewer property and select WebViewer1 from the dropdown.

Step 2 — Set your model URL in the Tmic properties

Still in the Tmic1 Properties panel, find ModelUrl and paste the link you copied from Teachable Machine.

Tmic Property
ModelUrl = https://teachablemachine.withgoogle.com/models/XXXXXXXXX/
Step 3 — Initialize the classifier in Blocks

Switch to the Blocks editor. Add a Screen1.Initialize block that calls Tmic1.initialize, passing your WebViewer1 and the model URL. This loads the model into the WebViewer when the app opens.

Blocks 
when Screen1.Initialize do
  call Tmic1.initialize
    webViewer: WebViewer1
    modelUrl:  "https://teachablemachine.withgoogle.com/models/XXXXXXXXX/"
🔗
Why WebViewer? The TMIC extension injects a small TensorFlow.js page into the WebViewer to access the camera feed and run inference locally on the device — keeping all data private and working fully offline once the model is loaded.
06
Part Six

Wire up blocks logic

Add these blocks in the Blocks editor to trigger classification and display results.

Button click — run classifier
Blocks 
when Button1.Click do
  call Tmic1.classifyVideoFrame
Receive and display prediction result

The GotClassification event fires when the model returns a result. It provides the top class name and its confidence score (0–1).

Blocks 
when Tmic1.GotClassification
  className   confidence  do
  set Label_Result.Text     to join "Result: " className
  set Label_Confidence.Text to join "Confidence: "
                                   (join (round (* confidence 100)) "%")
Handle errors gracefully
Blocks 
when Tmic1.Error
  errorMessage  do
  set Label_Result.Text to join "Error: " errorMessage
💡
Continuous classification: To classify in real time without tapping the button, move the call Tmic1.classifyVideoFrame call into a Clock timer block set to fire every 500–1000 ms instead of inside the button click.
07
Part Seven

Build & install the APK

Android build APK
MIT App Inventor — Build menu
1
In App Inventor, click Build → App (provide QR code for .apk) — or choose App (save .apk to my computer) to download directly.
2
On your Android device, go to Settings → Security and enable Install from unknown sources (or Install unknown apps on Android 8+).
3
Scan the QR code using your phone's camera, or transfer the downloaded APK to your device and tap to install.
4
Open the app. When prompted, grant Camera permission. The WebViewer will load the model and activate the live camera feed.
5
Point the camera at one of your trained classes and tap Classify Image. The predicted label and confidence will appear in the labels below.
⚠️
Camera permission is mandatory: Without it, the WebViewer cannot access the camera feed and the classifier will not run. If the user denies it, display a message explaining why it's required.

You're done.

You've trained an image classifier, wired it into an Android app with the TMIC extension, and installed it on a real device. Your image AI app is live.