[FREE] VisonCard Extension
VisonCard Extension (v21.0)
Tired of complex CardView extensions with dozens of confusing block setups? VisonCard is a dead-simple, zero-config extension that instantly upgrades any native AI2 Arrangement into a modern 3D physics-shadow CardView with just ONE single block.
Why VisonCard? (Key Highlights)
- True 1-Block Setup: No tedious padding or alignment configuration needed. One block does it all.
- Smart Shadow Guard: Automatically injects a 15px invisible safety boundary (
setUseCompatPadding). Your beautiful 3D gradient shadows will never get cut off by screen edges! - Auto-Clip bounds: Perfectly clips all child images and buttons inside the rounded corners automatically.
- 100% Native & Lightweight: Built on pure Android system widgets. No heavy dependencies, no crashes.
Extension Information
- Version: 21.0
- Date Created: July 27, 2026
- Author: luckyh9h
- Category: UI / Appearance
- Minimum Android API Level: API 21 (Android 5.0+)
- Dependencies: None (Uses pure Android system built-in components)
Designer Properties
You can configure these properties directly in the Designer properties panel on the right side of the screen.
| Property Name | Editor Type | Default Value | Description |
|---|---|---|---|
| CardBackgroundColor | Color | &HFFFFFFFF (White) |
Sets the solid background color of the card container. |
| CornerRadius | Float | 24.0 |
Sets the radius of the four corners in pixels. |
| ShadowElevation | Float | 12.0 |
Sets the height of the physical 3D shadow (higher value means larger, softer shadow blur). |
Blocks: Functions
CreateCard
Dynamically upgrades a standard AI2 layout layout component into a professional modern UI card view.
-
Method Block:
call VisonCard1.CreateCard -
Parameters:
layoutComponent(AndroidViewComponent): The arrangement layout you want to upgrade (e.g.,VerticalArrangement,HorizontalArrangement).
-
Returns: (Object) - Returns the modified
CardViewinstance wrapper. This object is fully compatible with AI2 global variables for memory references.
Step-by-Step Installation
- Go to the right sidebar of this repository, click on Releases, and download the latest version of
com.luckyh9h.visoncard.aix. - Click on Import extension, choose the downloaded
.aixfile, and click import. - Drag and drop the
VisonCardcomponent into your Viewer workspace. It will appear at the bottom as a Non-visible component.
Sourcing & Downloads
- Developer / Contact: [halin / miracle ho]
- Compiled Extension File (.aix): VisonCard.aix (11.9 KB)
- Sample Project File (.aia): ui_ext.aia (59.9 KB)
- Feedback, suggestions, and log reports from your OnDebugLog events are highly welcome below!
How to Use & Best Practices
1. Simple 2-Step Implementation
To prevent UI clipping and overlapping errors, always follow this workflow in your Blocks Editor:
- Create a global variable (e.g.,
initialize global myCard to 0) to hold the returned object securely. - In the
Screen1.Initializeevent, call the function:
set global myCard to call VisonCard1.CreateCard(layoutComponent: VerticalArrangement2)
2. Auto-Padding & Margin Guard (
Crucial for Shadows)
- This extension automatically injects
setUseCompatPadding(true)to push a 10px to 15px invisible safety boundary around the card. - Design Recommendation: Ensure your target layout component's
HeightandWidthproperties are NOT forced to stretch tightly against screen edges. Leaving a little extra margin space in the Designer will let the smooth, smokey 3D gradient shadow breathe naturally on the screen.
3. Hardware-Level Anti-Overflow Clipping
The underlying engine forces setPreventCornerOverlap(true). Any child components you place inside your arrangement (such as images, labels, or inner layouts) will be instantly clipped inside the card boundaries, preventing sharp square edges from poking through your smooth CornerRadius.
License
This extension is open-source and free to use in personal and commercial AI2 projects. Please retain the author attribution (luckyh9h) when sharing or modifying.
