Free AnimateText AIX Extension

Extensions
, , ,
1

AnimateText AIX Extension

Developer: Kenneth Mark Morales

Welcome to the AnimateText extension for MIT App Inventor! This extension empowers you to add dynamic, custom-animated text effects directly within your HorizontalArrangement (HA) or VerticalArrangement (VA) components, giving your app designs a unique and engaging flair.

AnimateText allows for more granular control over text properties, advanced styling, and a wide variety of smooth animation transitions, all while seamlessly integrating into your existing layout structures.

Key Features:

  • Custom Text Rendering: Draw text directly onto any HorizontalArrangement or VerticalArrangement without using the default Canvas.
  • Extensive Animation Effects: Choose from 20+ distinct animation styles for text appearance.
  • Precise Positioning: Position text within layouts using common alignment options (Left, Right, Center, Top, Bottom, Middle).
  • Dynamic Visibility: Hide and show text on demand.
  • Rich Text Styling: Control font size, color, typeface (normal, bold, italic), and add advanced effects like text borders and glowing outlines.
  • Multiple Texts per Layout: Add and manage several animated text entries within a single HA/VA component.

Designer Components Setup

To use this extension, you primarily need a layout component (either HorizontalArrangement or VerticalArrangement) in your App Inventor Designer.

  1. Add an Arrangement: From the "Layout" section in the Palette, drag a HorizontalArrangement or VerticalArrangement onto your Viewer.
  • Naming: Give it a meaningful name (e.g., TextDisplayArea).
  • Dimensions: It's CRUCIAL to set its Height and Width properties. If you want the animated text to fill the parent, set them to Fill parent. Otherwise, define specific pixel or percentage dimensions. If the arrangement has zero width or height, the text will not be visible.
  • Background: You can set its BackgroundColor as desired; the AnimateText extension will draw on top of it with a transparent background.

Blocks Reference

All blocks for the AnimateText extension can be found under the AnimateText1 drawer (or whatever you named your AnimateText component instance) in the Blocks Editor.

Core Functions

These are the primary actions you'll perform with the extension:

  • RegisterLayout(arrangement)

RegisterLayout_Method

  • Purpose: Initializes a specified HorizontalArrangement or VerticalArrangement to serve as the drawing surface for animated text. You must call this before adding any text to that layout.

  • Parameters:

    • arrangement (Component): The HorizontalArrangement or VerticalArrangement component from your Designer (e.g., HorizontalArrangement1).

  • Returns: A String (a unique ID) that identifies this registered layout. Store this ID in a global variable to use in all subsequent blocks that interact with this layout.

  • Example Block: set global registeredLayoutID to AnimateText1.RegisterLayout(HorizontalArrangement1)

  • AddText(registrationId, text, textColor, textSize, startVisible)

AddText_Method

  • Purpose: Adds a new piece of text to a layout that has been previously registered. Each call creates a new, independently controllable text entry.

  • Parameters:

    • registrationId (String): The unique ID of the registered layout (obtained from RegisterLayout).
    • text (String): The actual text content to display (e.g., "Hello World!").
    • textColor (Number): The color of the text. Use the built-in Colors blocks from App Inventor's "Colors" drawer (e.g., Colors.Red, Colors.Blue).
    • textSize (Number): The size of the text in pixels (e.g., 30).
    • startVisible (Boolean): If true, the text will be visible immediately upon being added. If false, it will be hidden until you explicitly call SetTextVisible.

  • Returns: A String (a unique ID) that identifies this specific text entry. Store this ID in another global variable (e.g., helloTextID) for future operations on this text.

  • Example Block: set global helloTextID to AnimateText1.AddText(global registeredLayoutID, "Welcome!", Colors.BLUE, 40, true)

  • PositionText(registrationId, textId, horizontalAlignment, verticalAlignment, animationType, durationMs)

PositionText_Method

  • Purpose: Positions a specific text entry within its registered layout and initiates its animation.

  • Parameters:

    • registrationId (String): The ID of the layout where the text resides.
    • textId (String): The ID of the specific text entry to position.
    • horizontalAlignment (Number): How the text should align horizontally. Use the dedicated AnimateText1.Align... property blocks (e.g., AnimateText1.AlignCenterHorizontal).
    • verticalAlignment (Number): How the text should align vertically. Use the dedicated AnimateText1.Align... property blocks (e.g., AnimateText1.AlignCenterVertical).
    • animationType (Number): The type of animation to apply. Use the dedicated AnimateText1.Animation... property blocks (e.g., AnimateText1.AnimationFadeIn).
    • durationMs (Number): The duration of the animation in milliseconds (e.g., 1500 for 1.5 seconds).

  • Returns: None.

  • Example Block: AnimateText1.PositionText(global registeredLayoutID, global helloTextID, AnimateText1.AlignCenter, AnimateText1.AlignCenter, AnimateText1.AnimationZoomIn, 2000)

  • SetTextVisible(registrationId, textId, visible)

SetTextVisible_Method

  • Purpose: Controls the visibility of a specific text entry after it has been added.

  • Parameters:

    • registrationId (String): The ID of the layout.
    • textId (String): The ID of the text entry.
    • visible (Boolean): true to show the text, false to hide it.

  • Returns: None.

  • SetTextFontSize(registrationId, textId, fontSize)

SetTextFontSize_Method

  • Purpose: Changes the font size of an existing text entry.

  • Parameters:

    • registrationId (String): The ID of the layout.
    • textId (String): The ID of the text entry.
    • fontSize (Number): The new font size in pixels.

  • Returns: None.

  • SetTextColor(registrationId, textId, textColor)

SetTextColor_Method

  • Purpose: Changes the color of an existing text entry.

  • Parameters:

    • registrationId (String): The ID of the layout.
    • textId (String): The ID of the text entry.
    • textColor (Number): The new color (use Colors blocks).

  • Returns: None.

  • SetTextTypeface(registrationId, textId, fontTypefaceFamily, fontStyle)

SetTextTypeface_Method

  • Purpose: Sets the font family and style (normal, bold, italic) for an existing text entry.

  • Parameters:

    • registrationId (String): The ID of the layout.
    • textId (String): The ID of the text entry.
    • fontTypefaceFamily (String): The font family name. Use AnimateText1.TypefaceFamily... property blocks (e.g., AnimateText1.TypefaceFamilySansSerif) or a custom font asset name if loaded. Pass an empty string "" or AnimateText1.TypefaceFamilyDefault for the system default.
    • fontStyle (Number): The font style. Use AnimateText1.Typeface... property blocks (e.g., AnimateText1.TypefaceBoldItalic).

  • Returns: None.

  • SetTextBorder(registrationId, textId, borderWidth, borderColor)

SetTextBorder_Method

  • Purpose: Adds or modifies a border (stroke) around the text.

  • Parameters:

    • registrationId (String): The ID of the layout.
    • textId (String): The ID of the text entry.
    • borderWidth (Number): The thickness of the border in pixels. Set to 0 to remove the border.
    • borderColor (Number): The color of the border (use Colors blocks).

  • Returns: None.

  • SetTextGlow(registrationId, textId, glowRadius, glowColor)

SetTextGlow_Method

  • Purpose: Adds or modifies a glow/shadow effect around the text.

  • Parameters:

    • registrationId (String): The ID of the layout.
    • textId (String): The ID of the text entry.
    • glowRadius (Number): The blur radius of the glow. Set to 0 to remove the glow.
    • glowColor (Number): The color of the glow (use Colors blocks).

  • Returns: None.

  • ClearTexts(registrationId)

ClearTexts_Method

  • Purpose: Removes all animated text entries from a specific registered layout, clearing the display.

  • Parameters:

    • registrationId (String): The ID of the layout to clear.

  • Returns: None.

  • UnregisterLayout(registrationId)

UnregisterLayout_Method

  • Purpose: Completely removes the custom drawing surface from the specified HorizontalArrangement or VerticalArrangement and cleans up associated resources. Call this when you are finished using animated text on that layout.
  • Parameters:
    • registrationId (String): The ID of the layout to unregister.
  • Returns: None.

Property Blocks for Alignment

These blocks output the integer constants required by the PositionText function for horizontal and vertical alignment. Drag these directly into the horizontalAlignment or verticalAlignment sockets.

  • AnimateText1.AlignLeft

AlignLeft_Get_Property

  • AnimateText1.AlignCenterHorizontal

AlignCenterHorizontal_Get_Property

  • AnimateText1.AlignRight

AlignRight_Get_Property

  • AnimateText1.AlignTop

AlignTop_Get_Property

  • AnimateText1.AlignCenterVertical

AlignCenterVertical_Get_Property

  • AnimateText1.AlignBottom

AlignBottom_Get_Property

  • AnimateText1.AlignCenter (centers both horizontally and vertically)

AlignCenter_Get_Property

Property Blocks for Animation Types

These blocks output the integer constants required by the PositionText function for the animation type. Drag these directly into the animationType socket.

  • AnimateText1.AnimationNone: No animation; text appears instantly.

AnimationNone_Get_Property

  • AnimateText1.AnimationFadeIn: Text fades in from transparent to opaque.

AnimationFadeIn_Get_Property

  • AnimateText1.AnimationSlideInLeft: Text slides in from the left edge of the layout.

AnimationSlideInLeft_Get_Property

  • AnimateText1.AnimationSlideInRight: Text slides in from the right edge of the layout.

AnimationSlideInRight_Get_Property

  • AnimateText1.AnimationZoomIn: Text scales up from very small to its full size.

AnimationZoomIn_Get_Property

  • AnimateText1.AnimationRotateAndFade: Text rotates while fading in.

AnimationRotateAndFade_Get_Property

  • AnimateText1.AnimationTypewriter: Text appears character by character, like a typewriter.

AnimationTypewriter_Get_Property

  • AnimateText1.AnimationBounceIn: Text appears from slightly below its final position with a subtle bounce.

AnimationBounceIn_Get_Property

  • AnimateText1.AnimationSlideUp: Text slides linearly from the bottom of the layout upwards.

AnimationSlideUp_Get_Property

  • AnimateText1.AnimationTwistIn: Text scales up from a small size while rotating, settling at its final size and orientation.

AnimationTwistIn_Get_Property

  • AnimateText1.AnimationScaleUpThenDown: Text rapidly scales larger than its final size, then shrinks back to normal.

AnimationScaleUpThenDown_Get_Property

  • AnimateText1.AnimationWave: Text subtly oscillates vertically (like a gentle wave) as it appears.

AnimationWave_Get_Property

  • AnimateText1.AnimationMarqueeLeft: Text scrolls from the right side of the layout to the left (single pass). Useful for continuous scrolling effects if triggered repeatedly.

AnimationMarqueeLeft_Get_Property

  • AnimateText1.AnimationPulse: Text scales slightly up and down in a continuous pulsing motion.

AnimationPulse_Get_Property

  • AnimateText1.AnimationSpinIn: Text scales up and rotates rapidly as it appears.

AnimationSpinIn_Get_Property

  • AnimateText1.AnimationDropIn: Text falls from the top of the layout with a slight bounce at the end.

AnimationDropIn_Get_Property

  • AnimateText1.AnimationColorCycle: Text cycles through rainbow colors during the animation.

AnimationColorCycle_Get_Property

  • AnimateText1.AnimationFlipHorizontal: Text appears to flip in horizontally from a thin line.

AnimationFlipHorizontal_Get_Property

  • AnimateText1.AnimationWipeRight: Text is revealed from left to right as if being "wiped" into view.

AnimationWipeRight_Get_Property

  • AnimateText1.AnimationFlash: Text rapidly fades in and out, creating a flashing effect.

AnimationFlash_Get_Property

  • AnimateText1.AnimationGrowFromCenter: Text expands outwards from the center point of the layout.

AnimationGrowFromCenter_Get_Property

  • AnimateText1.AnimationFadeInUp: Text fades in while simultaneously sliding slightly upwards.

AnimationFadeInUp_Get_Property

Property Blocks for Font Styles

These blocks output the integer constants for fontStyle parameter in SetTextTypeface.

  • AnimateText1.TypefaceNormal: Standard font style.

TypefaceNormal_Get_Property

  • AnimateText1.TypefaceBold: Bold font style.

TypefaceBold_Get_Property

  • AnimateText1.TypefaceItalic: Italic font style.

TypefaceItalic_Get_Property

  • AnimateText1.TypefaceBoldItalic: Bold and Italic font style.

TypefaceBoldItalic_Get_Property

Property Blocks for Font Typeface Families

These blocks output common font family String names for fontTypefaceFamily parameter in SetTextTypeface.

  • AnimateText1.TypefaceFamilyDefault: Uses the device's default font.

TypefaceFamilyDefault_Get_Property

  • AnimateText1.TypefaceFamilySansSerif: A common sans-serif font family.

TypefaceFamilySansSerif_Get_Property

  • AnimateText1.TypefaceFamilySerif: A common serif font family.

TypefaceFamilySerif_Get_Property

  • AnimateText1.TypefaceFamilyMonospace: A common monospace font family.

TypefaceFamilyMonospace_Get_Property

Sample block code:

TextAnimateBlocks
TextAnimateBlocks796×1812 132 KB

Sample output:

Important Considerations & Tips:

  • Arrangement Size: Always ensure the HorizontalArrangement or VerticalArrangement you register has a defined Height and Width. If it's too small or set to Automatic, your text might be cut off or invisible.
  • Performance: While optimized, drawing custom animations can consume more resources than static text. For very complex screens with many rapidly animating texts, monitor performance on your target device.
  • Colors: Remember to always use the color blocks from App Inventor's built-in Colors drawer for textColor, borderColor, and glowColor.
  • Testing: Test your animations thoroughly on an actual Android device or emulator to see how they render and perform.
  • Z-Order: The animated text will always be drawn on top of other components within the registered HorizontalArrangement or VerticalArrangement. Components outside that arrangement will remain in their normal Z-order.
  • Marquee Effect: The AnimationMarqueeLeft effect performs a single scroll pass. To create a continuous, looping marquee, you would need to trigger this animation repeatedly using a Clock component's Timer event, restarting the animation each time it completes.

This documentation should provide App Inventor developers with everything they need to start using your AnimateText extension to create beautiful and dynamic text effects in their apps!

This extension is provided free of charge and is open for use and modification.

If you find this extension useful and wish to support further development, you can support us via: PayPal.Me

License: Developed by Kenneth Mark Morales using Fast builder.
Download AnimateText Aix Extension here: AnimateText Extension

2 Likes
2

For the blocks image, I can not load them. Can you upload the images to this community?

And for these so many property blocks, please use the drop down helper blocks like this:
image

2 Likes
3

Hi @Kevinkun , Thank you for reviewing my AIX. Could you clarify what you mean by "the block image didn’t load"? Are you referring to the sample block from the AIA file or the block code for the image component?
Also, thanks for your suggestion! I’ll make the necessary changes for version 2 and I realize now that I added too many properties, when in fact, they can be placed in the dropdown helper block instead.

1 Like
4

image
image557×685 14.6 KB

5

I already tried it on different browsers, but the pictures had already loaded. If you're using a PC, have you tried pressing Ctrl + F5 to force a reload?

6

I noticed you have uploaded your images to
https://lh7-rt.googleusercontent.com/docsz....

I do have problem to access this site.
Why not upload the images to this community?

1 Like
7

Okay, I'll change it later. I edited the documentation using Google Docs online and copied the content directly into this website. I should have uploaded the image file directly so that wont be able to redirect the link from google drive. Thank for clarification.

1 Like