Free AnimateText AIX Extension

[KenMorales]

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)

• 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)

• 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)

• 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)

• 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)

• 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)

• 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)

• 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)

• 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)

• 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)

• 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)

• 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

• AnimateText1.AlignCenterHorizontal

• AnimateText1.AlignRight

• AnimateText1.AlignTop

• AnimateText1.AlignCenterVertical

• AnimateText1.AlignBottom

• AnimateText1.AlignCenter (centers both horizontally and vertically)

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.

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

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

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

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

• AnimateText1.AnimationRotateAndFade: Text rotates while fading in.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Property Blocks for Font Styles

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

• AnimateText1.TypefaceNormal: Standard font style.

• AnimateText1.TypefaceBold: Bold font style.

• AnimateText1.TypefaceItalic: Italic font style.

• AnimateText1.TypefaceBoldItalic: Bold and Italic font style.

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.

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

• AnimateText1.TypefaceFamilySerif: A common serif font family.

• AnimateText1.TypefaceFamilyMonospace: A common monospace font family.

Sample block code:

Sample output:

AnimateTex.mp4

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.
You can download the aix extension from google drive provided bellow.
AnimateText.aix Extension - Version 1
AnimateText.aix Extension with Helper Blocks - version 2

[Kevinkun]

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:

[KenMorales]

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.

[Kevinkun]

@KenMorales

the block image didn’t load

[KenMorales]

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?

[Kevinkun]

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?

[KenMorales]

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.

[KenMorales]

[Free] AnimateText Extension - Revised

What's New in Version 2.0

Version 2.0 of the AnimateText extension brings significant improvements in usability and reliability, primarily by enhancing how block parameters are handled in App Inventor. Thanks to @Kevinkun for suggestion and i mange to enhance from unnecessary properties replaced with helper blocks dropdown menu.

Key Changes and Advantages:

• Improved Block Clarity and Type Safety:
  • Previously, you might have manually typed text strings for options like horizontalAlignment , verticalAlignment , animationType , fontFamily , and fontStyle .
  • In Version 2.0, these parameters now utilize helper blocks with dropdown menus directly within App Inventor. This means you no longer need to remember exact string spellings (e.g., "Fade In" vs. "FadeIn").
  • This change reduces common runtime errors caused by typos or incorrect capitalization, providing a more intuitive and error-resistant experience for App Inventor users.
• Enhanced Reliability for Styling and Animations:
  • Internal logic has been refined to ensure that text styling (color, typeface, border, glow) and animation properties (position, animation type, duration) are applied consistently and reliably.
  • A specific fix ensures that text set with "None" animation type is immediately visible and correctly positioned without requiring an animation cycle.
• More Robust Internal Handling:
  • The extension now includes more comprehensive internal logging, which helps in diagnosing issues by providing detailed information about the parameters received by each function and the state of text entries. This leads to easier debugging and more stable behavior.

These updates make the AnimateText extension more user-friendly and robust, allowing you to create dynamic text effects with greater ease and confidence.

Blocks Reference

1. RegisterLayout

• Description: Registers a HorizontalArrangement or VerticalArrangement to host the animated text. This block dynamically adds a custom drawing surface to the chosen arrangement. It is the first block you should call to initialize the animation area.
• Parameters:
  • arrangement (AndroidViewComponent): The HorizontalArrangement or VerticalArrangement component where the animated text will be displayed.
• Returns: A String unique ID for the registered layout. You must save this ID in a variable and use it for all subsequent operations related to this specific layout.
• Usage: Call this once per arrangement you intend to use for animated text.

2. AddText

• Description: Adds a new text string to a previously registered animated layout. This block creates a new, distinct text entry that can be individually positioned, styled, and animated.
• Parameters:
  • registrationId (String): The unique ID of the registered layout (obtained from the RegisterLayout block).
  • text (String): The actual text content you want to display.
  • textColor (Color): The color of the text (e.g., use a "Colors" block from App Inventor, like "red").
  • textSize (Number): The size of the text in pixels.
  • startVisible (Boolean): If true , the text will be visible immediately after being added. If false , it will be hidden initially.
• Returns: A String unique ID for this specific text entry. You must save this ID in a variable. This textId is crucial for all subsequent blocks that modify or animate this particular piece of text.
• Usage: Call this for each distinct piece of text you want to manage within a registered layout.

3. PositionText

• Description: Positions a specific text entry within its registered layout and applies an animation effect. This block is used to define where the text appears and how it animates.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.
  • textId (String): The unique ID of the text entry (obtained from the AddText block).
  • horizontalAlignment (String): The horizontal alignment of the text. (Now selected via dropdown helper block) Options are:
    • "Left"
    • "Center Horizontal"
    • "Right"
  • verticalAlignment (String): The vertical alignment of the text. (Now selected via dropdown helper block) Options are:
    • "Top"
    • "Center Vertical"
    • "Bottom"
    • "Center" (aligns both horizontally and vertically to the center)
  • animationType (String): The type of animation to apply. (Now selected via dropdown helper block) Options are:
    • "None"
    • "Fade In"
    • "Slide In Left"
    • "Slide In Right"
    • "Zoom In"
    • "Rotate and Fade"
    • "Typewriter"
    • "Bounce In"
    • "Slide Up"
    • "Twist In"
    • "Scale Up Then Down"
    • "Wave"
    • "Marquee Left"
    • "Pulse"
    • "Spin In"
    • "Drop In"
    • "Color Cycle"
    • "Flip Horizontal"
    • "Wipe Right"
    • "Flash"
    • "Grow From Center"
    • "Fade In Up"
  • durationMs (Number): The duration of the animation in milliseconds (e.g., 1000 for 1 second).

4. SetTextVisible

• Description: Sets the visibility of a specific text entry.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.
  • textId (String): The unique ID of the text entry.
  • visible (Boolean): true to show the text, false to hide it.

5. SetTextFontSize

• Description: Sets the font size of a specific text entry in pixels.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.
  • textId (String): The unique ID of the text entry.
  • fontSize (Number): The new font size in pixels (e.g., 24, 36).

6. SetTextColor

• Description: Sets the font color of a specific text entry.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.
  • textId (String): The unique ID of the text entry.
  • textColor (Color): The new text color (e.g., "red" or a custom color block).

7. SetTextTypeface

• Description: Sets the font typeface (family and style) of a specific text entry.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.
  • textId (String): The unique ID of the text entry.
  • fontFamily (String): The font family. (Now selected via dropdown helper block) Options are:
    • "Default"
    • "Sans-Serif"
    • "Serif"
    • "Monospace"
  • fontStyle (String): The font style. (Now selected via dropdown helper block) Options are:
    • "Normal"
    • "Bold"
    • "Italic"
    • "Bold and Italic"

8. SetTextBorder

• Description: Sets the text border properties for a specific text entry. Set borderWidth to 0 to disable the border.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.
  • textId (String): The unique ID of the text entry.
  • borderWidth (Number): The width of the text border in pixels (set to 0 for no border).
  • borderColor (Color): The color of the text border.

9. SetTextGlow

• Description: Sets the text glow (shadow layer) properties for a specific text entry. Set glowRadius to 0 to disable the glow.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.
  • textId (String): The unique ID of the text entry.
  • glowRadius (Number): The radius of the glow blur (set to 0 for no glow).
  • glowColor (Color): The color of the glow.

10. ClearTexts

• Description: Clears all animated text entries from a specific registered layout.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.

11. UnregisterLayout

• Description: Removes the entire custom animated text view from its registered layout and unregisters it from the extension's management. This should be called when the animated text display is no longer needed in a particular arrangement.
• Parameters:
  • registrationId (String): The unique ID of the registered layout.

Sample Block code:

Made with fast builder: Fast
Demo Output:
Demo Video - AnimateText
Download aia file
Download Aix - AnimateText