[FREE] FloatingCounter Extension: Floating + / − Counter for Kodular 🧩

Extensions
, ,
1

FloatingCounter Extension: Floating + / − Counter for Kodular :puzzle_piece:

Description

FloatingCounter is a free Kodular/MIT App Inventor extension to create a floating counter with + and − buttons that can attach to any arrangement. It supports 6 customizable positions, color options, and label binding. Ideal for click counters, quantity selectors, or gamified apps.

Price: Free (:heart: donations appreciated)
Released On: Oct 1, 2025

Support me if you love this free extension: :puzzle_piece: :heavy_dollar_sign: PayPal

Explanation

FloatingCounter allows developers to add a floating interactive counter to their apps. The counter shows a single floating icon, which expands to + and − buttons when clicked. It updates a connected label and prevents negative counts. Perfect for e-commerce apps, score tracking, or any interactive UI.

Features

  • Floating Icon: Initial touch icon, expands on click.
  • + / − Buttons: Increment or decrement the count.
  • Prevent Negative Values: Counter does not go below 0.
  • Attach to Any Arrangement: Horizontal, Vertical, or ScrollArrangement.
  • 6 Positions: TopLeft, TopRight, CenterLeft, CenterRight, BottomLeft, BottomRight.
  • Custom Colors: Background and icon colors configurable in Designer.
  • Attach Label: Automatically updates connected label with current count.
  • Collapsible Buttons: Click outside hides the + / − buttons and shows main icon again.

Demo Video

Designer Properties

  • Position (Dropdown): 1. TopLeft, 2. TopRight, 3. CenterLeft, 4. CenterRight, 5. BottomLeft, 6. BottomRight
  • BackgroundColor: Floating icon and button background
  • IconColor: Color of main icon and + / − symbols
  • StartNumber: Initial counter value

Blocks Overview

Attach to Arrangement:
Connect the floating counter to any layout.

Attach Label:
Bind a label to automatically display the current count.

Increment / Decrement:
Automatically handled when user clicks + / − buttons.

Positioning:
Choose one of 6 preset positions from the dropdown in Designer.

How to Use (Block Steps)

  1. Add to Project:
  • Import the .aix file via Kodular’s Extensions tab.
  • Drag the FloatingCounter component into your screen.
  1. Attach to Arrangement:
When Screen1.Initialize
Call FloatingCounter1.AttachTo arrangement: HorizontalArrangement1
  1. Attach Label:
Call FloatingCounter1.AttachLabel Label1
  1. Set Initial Value (Optional):
Set FloatingCounter1.StartNumber to 5
  1. Change Position:
Set FloatingCounter1.Position to "2. TopRight"
  1. Customize Colors:
Set FloatingCounter1.BackgroundColor to #6200EE
Set FloatingCounter1.IconColor to #FFFFFF

Blocks Image

The image shows a block-based programming script for initializing and configuring a FloatingCounter component on Screen1, attaching it to a vertical arrangement and label, and setting its background color, icon color, position, and start number. (Captioned by AI)
The image shows a block-based programming script for initializing and configuring a FloatingCounter component on Screen1, attaching it to a vertical arrangement and label, and setting its background color, icon color, position, and start number. (Captioned by AI)497×465 19.9 KB

Use Cases

  • E-commerce / Cart: Adjust item quantities.
  • Games / Score Tracking: Increment or decrement scores.
  • Interactive UI Components: Counters, likes, or votes.
  • Educational Apps: Quiz scoring or activity counters.

Installation

  1. Import the .aix file via Kodular Extensions tab.
  2. Drag FloatingCounter to your screen.
  3. Attach it to an arrangement using AttachTo.
  4. Optionally attach a label and customize colors & position in Designer.

Feedback

Try FloatingCounter and share your feedback or suggestions in the comments! Your support helps improve this free extension. :puzzle_piece:

AIX File (Extension :puzzle_piece:)

FloatingCounter.aix (12.9 KB)

Money Money Money GIF

Support me if you love :heart: this free extension: :puzzle_piece:
PayPal Donations

Changelog

  • v1 (Oct 2025): Initial release with floating icon, + / − buttons, 6 positions, label binding, color customization, and collapsible buttons.
7 Likes