Published May 5, 2025 © GPL3+

Easy Android UI for Arduino Project

Create an Android App for your Arduino projects using Bind, a library supporting BLE, Wi-Fi, classic Bluetooth, and USB-OTG.

BeginnerProtip1 hour171

Things used in this project

Hardware components

Espressif ESP32

Any ESP32 with WiFi, classic Bluetooth, or BLE is. Other Arduino boards are also fine. Even if there is no connectivity available, you can still use USB-OTG.

Software apps and online services

BindCanvas from GooglePlay for free

Arduino IDE

Story

Developing interactive user interfaces for Arduino-based projects can be challenging, especially when dealing with various communication protocols.

Bind simplifies this process by providing a lightweight, efficient UI framework compatible with multiple connectivity options.

Paired with the BindCanvas Android app, it enables rapid UI prototyping and development without extensive coding or complex setup.

Features

Versatile Connectivity: Supports BLE, classic Bluetooth, Wi-Fi, serial ports, and external Bluetooth modules (e.g., HC06, HM10).
Interactive Widgets: Easily manage UI elements such as buttons, text labels, sliders, and gauges.
Real-Time Interaction: Instant synchronization between the Arduino and the BindCanvas app.
Cross-Platform Compatibility: Works seamlessly with ESP32 and other microcontrollers.
Free and Ad-free Forever: Unlike many others, which is nice, isn't it? Maybe some shout-out to the dev with a 5-star review on GooglePlay ? :)

A Brief demo

Getting Started

Prerequisites

An Arduino-compatible microcontroller (e.g., ESP32)
Bind library
BindCanvas Android app
Arduino IDE

Installation

Install the library into your Arduino IDE.

Installing Bind Using Arduino IDE Library Manager

Install the BindCanvas app on your Android device from Google Play.

There are many examples provided with the library but you can also take a look at this one:Example: Controlling an LED via BLE.

Let say we want to have two buttons on the screen like these controlling the LED:

Check the code section for the code that generates the above UI elements

The example is also available as a gist on GitHub

Now upload the code to your ESP32 boards and then open the BindCanvas App on your Android Device; press the connect button, and then in the connection dialog find you device name (we have chosen "YOUR_DEVICE_NAME" in the "bleStream.begin" function here)

Connect button

Connection Dialog

And that's it, you will magically see the objects on the screen and can interact with them.

Also if you don't like there positioning, you can move them around using move button and drag them around (you can later change your code to make it permanent)

Move button

At the end

This was just a scratch on the surface of Bind, there are a lot more you can do with this library and app. For more information you may check these links:

https://github.com/H1Jam/Bind

https://h1jam.github.io/Bind/class_bind.html

For this example I randomly used an ESP32-C3 but the example should work with any ESP32 boards

ESP32-C3

For other Arduino boards or for using WiFi check the example section of the library.

Bind Examples for all supported boards

Bind_LED_Controller.ino

#include "Bind.h"
#include "BindUtil/BindOverBLE.h"
BleStream bleStream;
Bind bind;
BindButton buttonOn, buttonOff;
const int ledPin = LED_BUILTIN;
void buttonOn_pressed() {
  digitalWrite(ledPin, HIGH);
}
void buttonOff_pressed() {
  digitalWrite(ledPin, LOW);
}

void addbuttonOn() {
  // Set the Button's position on the screen.
  buttonOn.x = 30;
  buttonOn.y = 150;
  // Set the Button's text label.
  buttonOn.setlabel("ON");     // button label
  buttonOn.fontSize = 23;      // The Button size is relative to the Font size.
  buttonOn.textColor = BLACK;  // Text color
  buttonOn.backColor = GREEN;  // button color
  // Check this for cmdId: https://h1jam.github.io/Bind/class_bind_button.html
  buttonOn.cmdId = BIND_ADD_OR_REFRESH_CMD;
  // Set the callback function for the Button 1 object.
  buttonOn.setCallback(buttonOn_pressed);
  // Synchronize the buttonOn object with BindCanvas.
  bind.sync(buttonOn);
}

void addbuttonOff() {
  // Syncing Button 2, check addbuttonOn for more information.
  buttonOff.x = 30;
  buttonOff.y = 200;
  buttonOff.setlabel("OFF");
  buttonOff.fontSize = 23;
  buttonOff.textColor = BLACK;   // Text color
  buttonOff.backColor = YELLOW;  // button color
  buttonOff.cmdId = BIND_ADD_OR_REFRESH_CMD;
  buttonOff.setCallback(buttonOff_pressed);
  bind.sync(buttonOff);
}

// This function gets called every time you connect.
void onConnection(int16_t w, int16_t h) {
  addbuttonOn();
  addbuttonOff();
}

void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(115200);

  bleStream.begin("YOUR_DEVICE_NAME", bind);
  bind.init(bleStream, onConnection);
  // onConnection is the function defined above.
}

void loop() {
  // Nothing is needed here for BIND over BLE and WIFI.
  delay(1000);
}

Credits

Hossein Jamshidi

1 project • 0 followers

Hossein is a multidisciplinary software developer knowing electronics and a Master’s degree in Mechanics.

Easy Android UI for Arduino Project

Things used in this project

Hardware components

Software apps and online services

Story

Features

Getting Started

Prerequisites

Installation

At the end

Code

Bind_LED_Controller.ino

Credits

Hossein Jamshidi

Comments

Embed the widget on your own site

Easy Android UI for Arduino Project

Easy Android UI for Arduino Project

Things used in this project

Hardware components

Software apps and online services

Story

Features

Getting Started

Prerequisites

Installation

At the end

Code

Bind_LED_Controller.ino

Credits

Hossein Jamshidi

Comments

Related channels and tags