[Paid] TextBoxStyler Extension: Customizable TextBox Styles with Animations

Extensions
1

TextBoxStyler Extension: Customizable TextBox Styles with Animations

Description

TextBoxStyler is a premium Kodular/MIT App Inventor extension designed to enhance TextBox components with 14 unique styles, including SquareOutline, GradientBackground, DottedRunning, and more. It offers customizable properties like colors, corner radius, outline styles (Solid, Dashed, Dotted), and card-like elevation. Features dynamic animations and seamless integration with Kodular layouts, making it perfect for creating visually appealing forms and interfaces.

Price: $5 USD or INR 500/-
Released On: Sep 12, 2025
Size: ~150 KB (approximate size, replace with actual size after compilation)

Explanation

TextBoxStyler transforms standard TextBox components into visually stunning elements with a variety of styles and effects. It supports static and animated styles (e.g., pulsing borders, color-changing outlines), customizable stroke types, and card-like elevation for a modern look. The extension preserves layout compatibility and includes robust error handling with optional Label output for debugging.

Features

  • 14 Unique Styles: SquareOutline, RoundOutline, GradientBackground, BorderGlow, DashedBorder, GlassMorphism, ShadowBox, DottedRunning, MultiColorOutline, OutlineGlow, 3DInset, 3DRaised, PulseOutline, PixelOutline.
  • Customizable Properties: Background color, border color, text color, hint color, secondary color, outline width, corner radius, outline style (Solid, Dashed, Dotted), card elevation, and default style selection.
  • Dynamic Animations: Animated styles like DottedRunning (moving dots), MultiColorOutline (cycling colors), and PulseOutline (pulsing border).
  • Flexible Application: Apply styles to a single TextBox or a list of TextBoxes on screen initialization or dynamically.
  • Designer-Driven Styling: Use SetStyleOnInitialize to apply styles based on designer properties.
  • Error Handling: Logs errors to a Label or Logcat for easy debugging.
  • Animation Control: Stop all animations to prevent memory leaks.
  • Layout Support: Works seamlessly in Vertical/Horizontal Arrangements.

How to Use (Block Steps)

  1. Add to Project:
  • Import the .aix file via Kodular’s Extensions tab.
  • Drag the TextBoxStyler component into your screen.
  1. Set Error Label (Optional):
  • Block: SetErrorLabel
  • Parameters: label (component, e.g., Label1)
  • Example: Set TextBoxStyler1.SetErrorLabel to Label1
  1. Apply Style by Number on Initialize:
  • Block: ApplyStyleByNumberOnInitialize
  • Parameters: textbox (component), styleNumber (integer, 1-14)
  • Example: When Screen1.Initialize Call TextBoxStyler1.ApplyStyleByNumberOnInitialize textbox: TextBox1 styleNumber: 4
  1. Apply Style to List:
  • Block: ApplyStyleToList
  • Parameters: textboxList (list), styleNumber (integer, 1-14)
  • Example:
Create list with TextBox1, TextBox2
Call TextBoxStyler1.ApplyStyleToList textboxList: [list] styleNumber: 3
  1. Apply Designer Properties Style:
  • Block: SetStyleOnInitialize
  • Parameters: target (TextBox or list of TextBoxes)
  • Example (Single TextBox):
When Screen1.Initialize Call TextBoxStyler1.SetStyleOnInitialize target: TextBox1
  • Example (List):
Create list with TextBox1, TextBox2
Call TextBoxStyler1.SetStyleOnInitialize target: [list]
  1. Configure Designer Properties:
  • Set properties like BackgroundColor, BorderColor, CornerRadius, OutlineStyle, IsCard, and DefaultStyle in the designer.
  • Example: Set DefaultStyle to 3. GradientBackground, OutlineStyle to Dashed, CornerRadius to 10, IsCard to true.
  1. Stop Animations:
  • Block: StopAnimations
  • Example: When Screen1.BackPressed Call TextBoxStyler1.StopAnimations

Use Cases

  • Form Design: Create stylish input fields for user forms.
  • Educational Apps: Enhance text entry for quizzes or note-taking apps.
  • UI Customization: Add animated or 3D effects to TextBoxes for modern interfaces.
  • Themed Apps: Match TextBox styles to your app’s theme with custom colors and strokes.

Demo Video

To Purchase

TextBoxStyler v1
Price: $5 USD or INR 500/-

  • Send me a DM
  • Contact me on Telegram: View @ek_rahgir

Installation

  1. Import the .aix file via Kodular’s Extensions tab.
  2. Add TextBoxStyler to your screen.
  3. Provide username & password

(On Purchase you recieved from me) with LifeTime Access

  1. Configure properties in the designer or use blocks to apply styles.

Feedback

Try TextBoxStyler and share your feedback or suggestions below! Your support fuels the development of more premium extensions.

Changelog

  • v1 (Sep 2025): Initial release with 14 styles, customizable properties (BackgroundColor, BorderColor, TextColor, HintColor, SecondaryColor, OutlineWidth, CornerRadius, OutlineStyle, IsCard, DefaultStyle), dynamic animations, error handling, and blocks for single/list TextBox styling (ApplyStyleByNumberOnInitialize, ApplyStyleToList, SetStyleOnInitialize, StopAnimations).
3 Likes
2

TextBoxStyler v2 :

Upgradded: Few new style added.