[FREE] 🔥 ClickableOverlay Extension 🧩

Extensions
1

:puzzle_piece: ClickableOverlay Extension: Make Any Arrangement Fully Clickable

Description

ClickableOverlay is a free Kodular/MIT App Inventor extension that lets you make an entire arrangement clickable — including Labels, Images, and TextBoxes inside it — without setting each one individually.

It works by adding an invisible overlay layer that captures the click event, simplifying your UI logic and saving blocks. Ideal for creating custom clickable cards, banners, or sections in your app.

Price: Free (:heart: donations appreciated)
Released On: Nov 10, 2025

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

Explanation

Normally, Kodular doesn’t let you make all items inside an Arrangement clickable together — Labels, Images, and Buttons require individual click blocks.

ClickableOverlay solves this problem!
Just place the extension, assign your arrangement, and all inner elements will behave like a single unified clickable block.

Features

  • :computer_mouse: Single Click Event – Entire arrangement behaves like one button
  • :ghost: Invisible Overlay Layer – No visual change; fully transparent
  • :dashing_away: No need to set individual components as clickable
  • :artist_palette: Works with any Arrangement (Horizontal, Vertical, CardView, etc.)
  • :high_voltage: Lightweight & Fast – No layout lag or redraw
  • :counterclockwise_arrows_button: Dynamic Control – Enable or disable overlay via blocks
  • :speech_balloon: Event Supported: When Clicked

Blocks Overview

The image shows a block-based programming interface with code that handles a ClickOverlay1 clicked event, attaches all arrangements with specified IDs, sets them clickable with certain IDs enabled, but the if condition block is incomplete. (Captioned by AI)
The image shows a block-based programming interface with code that handles a ClickOverlay1 clicked event, attaches all arrangements with specified IDs, sets them clickable with certain IDs enabled, but the if condition block is incomplete. (Captioned by AI)393×474 16.2 KB

How to Use (Block Steps)

  1. Import the Extension
  • Go to Extensions → Import Extension (.aix)
  • Add ClickableOverlay to your screen (non-visible)
  1. Attach to Arrangement
  • Use block:
Call ClickableOverlay.MakeClickable Arrangement (YourArrangement)
  • That’s it! Now everything inside that arrangement is clickable.
  1. Handle Click Event
  • Add this block:
When ClickableOverlay.Click
  → Do your action (e.g., open another screen, show notifier, etc.)

Use Cases

  • :flower_playing_cards: Clickable Card Views – Combine image + text + icon as one clickable card
  • :newspaper: News or Article Tiles – Open details on tap
  • :shopping_bags: Product Listings – Whole product container clickable
  • :light_bulb: Custom Buttons – Make fancy buttons using arrangements and images
  • :card_index_dividers: Profile or Menu Sections – Simplify complex UIs

Installation

  1. Import .aix via Extensions → Import Extension
  2. Drag ClickableOverlay into your screen
  3. Use block MakeClickable with your target arrangement
  4. Done — the entire area becomes clickable!

AIX Files

ClickOverlay.aix (10.0 KB)

Money Money Money GIF

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

Feedback

Try ClickableOverlay and share your feedback! Your suggestions help improve and inspire future free extensions. :heart:

Feedback

Changelog

  • v1.0 (Nov 2025) – Initial release: single-click overlay system for any arrangement.
8 Likes