# SimpleUI for Android Mode 2025

**URL:** <https://discourse.processing.org/t/simpleui-for-android-mode-2025/47673>\
**Category:** Processing for Android\
**Created:** [December 30, 2025, 4:04pm UTC](https://discourse.processing.org/t/simpleui-for-android-mode-2025/47673 "2025-12-30T16:04:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![erkosone](https://avatars.discourse-cdn.com/v4/letter/e/ba9def/32.png) [@erkosone](https://discourse.processing.org/u/erkosone)\
**Post date:** [December 30, 2025, 4:04pm UTC](https://discourse.processing.org/t/simpleui-for-android-mode-2025/47673/1 "2025-12-30T16:04:21Z")

</div>

SimpleUI for Android mode: download: [Dropbox](https://www.dropbox.com/scl/fi/ljb3kblpoc06iswxx61o6/SimpleUI_by_Erkosone_05.7z?rlkey=jbp0mpkubyv9n6si20xr35sbs&st=mt8y7m1z&dl=0)

He creado esta interfaz grafica para Processing/Android con la ayuda de Gemini, la IA de Google.

A disfrutarla comunidad!!

```auto

```

 ![look](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/b/2b422910d4e8f83caae619da7b1f034c4d9a10f8.jpeg)

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 30, 2025, 5:21pm UTC](https://discourse.processing.org/t/simpleui-for-android-mode-2025/47673/2 "2025-12-30T17:21:03Z")

</div>

Works as advertised. Nice interface; would like to see English version. I ran it on Processing v4.4.10 in Android mode. Samsung S2 tablet.

**Output:**

 ![android](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/7/97cef779b7e9c457ad80922f74a58d58434feb30.png)

Thank you.

---

<div class="post-metadata">

**Author:** ![erkosone](https://avatars.discourse-cdn.com/v4/letter/e/ba9def/32.png) [@erkosone](https://discourse.processing.org/u/erkosone)\
**Post date:** [December 31, 2025, 8:46am UTC](https://discourse.processing.org/t/simpleui-for-android-mode-2025/47673/3 "2025-12-31T08:46:20Z")

</div>

Library updated!

# SimpleUI for Processing Android

**SimpleUI** is a lightweight, touch-optimized graphical user interface library specifically designed for Processing’s Android mode. It features a responsive scrolling system, automatic scaling, and a dark/light mode engine.

## Table of Contents

1. [Core Architecture](https://www.google.com/search?q=%23core-architecture)

2. [Global Functions](https://www.google.com/search?q=%23global-functions)

3. [UI Components](https://www.google.com/search?q=%23ui-components)

4. [Event Handling](https://www.google.com/search?q=%23event-handling)

* * *

## 1. Core Architecture

The library operates on a **Global Scaling System** and a **Target-based Scrolling Engine**.

- **Scaling:** Elements are designed on a virtual coordinate system (e.g., 350px wide) and automatically scaled to fit the physical screen.

- **Scrolling:** Uses a `lerp()` (Linear Interpolation) function for smooth momentum-based scrolling.

- **Z-Order:** Dropdowns are automatically rendered in a separate pass to ensure they appear above all other elements.

* * *

## 2. Global Functions

### `initUI(String fontName)`

Initializes the UI system, sets the font, and defaults to Light Mode.

- **Example:** `initUI("SansSerif");`

### `fitToWidth(float designWidth, float screenPercentage)`

Calculates the `uiScale` based on the device width.

- **designWidth:** The coordinate system width you are designing for.

- **screenPercentage:** (0.0 - 1.0) How much of the screen width the UI should occupy.

### `setDarkMode(boolean active)`

Toggles the global color palette between high-contrast dark and light modes.

* * *

## 3. UI Components

### `UILabel`

Static text display for titles or information.

Java

```auto
new UILabel(String id, int x, int y, int w, int h, String text, int fontSize)

```

### `UIButton`

A rounded-corner button with visual feedback when pressed.

Java

```auto
new UIButton(String id, int x, int y, int w, int h, String label, int fontSize)

```

### `UICheckbox`

A binary toggle switch with an associated label.

Java

```auto
new UICheckbox(String id, int x, int y, int size, String label, int fontSize)

```

### `UISlider`

A horizontal bar for selecting numeric values within a range. Optimized for touch dragging.

Java

```auto
new UISlider(String id, int x, int y, int w, int h, float min, float max, int fontSize)

```

### `UIDropdown`

A pick-list that expands vertically. It features an “Overlap-Z” logic to prevent being hidden by elements below it.

Java

```auto
new UIDropdown(String id, int x, int y, int w, int h, String[] options, int fontSize)

```

### `UITable`

A complex data grid featuring internal scrolling and row selection. **Note:** Does not use `canvas.clip()`, making it 100% compatible with Android 9+ hardware acceleration.

Java

```auto
new UITable(String id, int x, int y, int w, int h, String[] headers, float[] colWidths, int fontSize)

```

* * *

## 4. Event Handling

To ensure the UI remains responsive while the page is scrolling, the library uses a `lockGlobalScroll` system.

### Integration in Main Sketch

You must link the following handlers in your main tab:

Java

```auto
void mousePressed() { handleUIMousePressed(); }
void mouseDragged() { handleUIMouseDragged(); }
void mouseReleased() { handleUIMouseReleased(); }

```

### Interaction Logic

1. **Selection vs. Scroll:** If a user touches a control (Button, Slider, Table), `lockGlobalScroll` is set to `true`, preventing the page from moving while the user interacts with the control.

2. **Threshold:** A 10-pixel movement threshold is used to differentiate between an intentional click and a scroll gesture.

* * *

## 5. Color Palette Reference

| **Variable** | **Description** | **Light Mode** | **Dark Mode** |
| --- | --- | --- | --- |
| `uiAccentColor` | Primary Action Color | Blue (#0064DC) | Light Blue (#008CFF) |
| `uiBgColor` | Main Background | Off-White (#F5F5F5) | Dark Grey (#191919) |
| `uiSurfaceColor` | Control Background | White (#FFFFFF) | Grey (#2D2D2D) |
| `uiTextColor` | Main Typography | Charcoal (#1E1E1E) | White (#F0F0F0) |

* * *

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [December 31, 2025, 6:04pm UTC](https://discourse.processing.org/t/simpleui-for-android-mode-2025/47673/4 "2025-12-31T18:04:43Z")

</div>

Very nice. I particularly like the fact that the same code will run on devices of different sizes. I used to have to write code specifically for each device that I wanted to run it on. I tested the following demo on both the phone emulator in Processing and an actual tablet device (Samsung S2); the code scaled appropriately to run on the tablet.

```processing
UISlider slider;

void setup() {
  fullScreen();
  orientation(PORTRAIT);
  fitToWidth(350, 0.95);
  slider = new UISlider("", 25, 40, 300, 30, 0, 100, 10);
  addUIElement(slider);
}

void draw() {
  background(255, 255, 255);
  fill(0, 0, 255);
  circle(width/2, height/2, slider.value*10);
  updateAndDrawUI();
}

void mousePressed() {
  handleUIMousePressed();
}

void mouseDragged() {
  handleUIMouseDragged();
}

void mouseReleased() {
  handleUIMouseReleased();
}

void keyPressed() {
  handleUIKeyPressed();
}

```

**Output:**

 ![dotview](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/d/adf4425e5025e5e2555a26da91dcdbb15c0257b8.jpeg)

We need a color picker UIElement to allow the user to change the color of the big dot.

All in all it is a nice contribution to Android development in Processing, which now works again in v.4.4.10. Thanks to everyone who made this possible and to the author for this addition.

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 1, 2026, 4:02am UTC](https://discourse.processing.org/t/simpleui-for-android-mode-2025/47673/5 "2026-01-01T04:02:07Z")

</div>

ControlP5 has a colorWheel which works ok in Android mode:

```processing
import controlP5.*;

ControlP5 cp5;
UISlider slider;

int c = color(0);

void setup() {
  fullScreen();
  orientation(PORTRAIT);
  cp5 = new ControlP5(this);
  cp5.addColorWheel("c" , 50 , 10 , 300 ).setRGB(color(64,124,188));
  fitToWidth(350, 0.95);
  slider = new UISlider("slider",175, 40, 160, 30, 0, 1000, 250);
  addUIElement(slider);
}

void draw() {
  background(255, 255, 255);
  fill(c);
  circle(width/2, height/2, slider.value);
  updateAndDrawUI();
}

void mousePressed() {
  handleUIMousePressed();
}

void mouseDragged() {
  handleUIMouseDragged();
}

void mouseReleased() {
  handleUIMouseReleased();
}

void keyPressed() {
  handleUIKeyPressed();
}

```

**Output:**

 ![cw_cp5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/f/8f97db6482179ace41d333787e2456224de23f27.jpeg)

N.B.

I changed the last parameter of the slider in the library as follows:

```processing
       // this.value = (max+min)/2;
        this.value = s;

```

Usually slider controls have three parameters: min, max, value.

---

<div class="post-metadata">

**Author:** ![erkosone](https://avatars.discourse-cdn.com/v4/letter/e/ba9def/32.png) [@erkosone](https://discourse.processing.org/u/erkosone)\
**Post date:** [January 3, 2026, 2:01pm UTC](https://discourse.processing.org/t/simpleui-for-android-mode-2025/47673/6 "2026-01-03T14:01:46Z")

</div>

![WhatsApp Image 2026-01-03 at 14.56.58](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/8/88f59340d6ac02c8ad75e302ce12a359f595f122.jpeg)

 ![WhatsApp Image 2026-01-03 at 14.56.58 (1)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/c/9c4cdfdc800d7855891d81f1d37349d4669bfa80.jpeg)

 ![WhatsApp Image 2026-01-03 at 14.56.58 (2)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/7/07179d2e048ae6ed9958d230817e97e10578c38a.jpeg)

 ![WhatsApp Image 2026-01-03 at 14.56.58 (3)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/5/15318603eb855e3e9f90703a6431e01fbf52f8fb.jpeg)

```auto

```

[DOWNLOAD LIB + EXAMPLE! for Android.](https://www.dropbox.com/scl/fi/sj84yi876t2o8i70sqby6/SimpleUI_by_Erkosone_XXX.7z?rlkey=gdag6qfq12tpxcf4b9nf51xxm&dl=0)

## **Características demostradas:**

### **1. Sistema de Formularios Completo**

- Campos de texto (normal, email, numérico, contraseña)

- Dropdowns con menús desplegables

- Sliders con valores ajustables

- Checkboxes con estados

- Validación básica de campos

### **2. Componentes de Visualización**

- **UIImageView** : Visor de imágenes con:

- **UITable** : Tabla de datos con:

- **UIImageButton** : Botones con imágenes

### **3. Sistema de Eventos en Tiempo Real**

- Consola que muestra todos los eventos UI

- Logging con timestamp

- Límite de entradas para evitar sobrecarga

### **4. Temas y Personalización**

- Cambio entre tema claro/oscuro

- Botones con colores personalizados

- Escalado responsive para diferentes pantallas

### **5. Funcionalidades Avanzadas**

- Scroll global con indicador visual

- Overlay de ayuda interactivo

- Deshabilitar/habilitar todos los elementos

- Manejo de teclado virtual en Android

- Sistema de capas para dropdowns

### **6. Comportamiento Responsive**

- Escalado automático según ancho de pantalla

- Scroll suave con lerp

- Gestión de z-index para elementos superpuestos

- Manejo correcto de clics y arrastres

## **Instrucciones para usar:**

1. **Ejecuta el sketch** en modo Android

2. **Toca “Mostrar Ayuda”** para ver todas las funcionalidades

3. **Interactúa con cada componente** :

4. **Usa los botones de control** :

## **Atajos de teclado:**

- **H** : Mostrar/ocultar ayuda

- **T** : Cambiar tema

- **C** : Limpiar consola

Este demo funciona completamente offline una vez cargado y demuestra la interoperabilidad de todos los componentes, el manejo correcto de eventos, y la adaptabilidad a diferentes tamaños de pantalla.