🚀[Paid]ThemerChat extension – Elevate Your Chat View UI with Stunning Themes!

ThemerChat – Elevate Your Chat UI with Stunning Themes!

:bulb: Transform your chat experience with beautiful, ready-to-use themes inspired by WhatsApp, Telegram, and Messenger—or create your own!


:pushpin: What is ThemerChat?

ThemerChat is an advanced MIT App Inventor extension designed to customize chat UIs with just a few clicks! Whether you want a WhatsApp-inspired theme, a sleek Telegram interface, or the vibrant Messenger look, ThemerChat makes it easy. Developers can fine-tune chat elements like bubble colors, text styles, timestamps, seen marks, backgrounds, and more....


This is full extension explaination Podcast


Some results:

WhatsApp theme example

             


               


Telegram theme example

                           

     

               


Video example


Blocks :







image
image





image

1. Overview

The ChatView Extension is a robust chat UI component designed for MIT App Inventor projects. It supports a wide range of message types and features, including:

  • Multiple Message Types:
    • Text Messages
    • Image Messages (with or without accompanying text)
    • File Messages (with or without accompanying text)
    • Voice Note Messages (with or without text)
  • Chat History Management:
    • Save and load full chat history in JSON format
    • Replace or clear chat history
  • Customization & Styling:
    • Customizable bubble colors, corner radii, and text sizes
    • Ability to set avatar image size, shape (rounded or not), and visibility
    • Customizable timestamp, clock icon, and seen/read status colors
    • Background customization options (solid color, gradient, or image)
  • Interactive Elements:
    • Reactions (emoji-based) that can be incremented
    • Message selection and gesture-based actions (swipe, tap, long press)
    • Dropdown menus for message options
    • Voice note playback with play/pause and seek bar support
  • Asset Handling:
    • Loads images and fonts from multiple sources (URLs, local file paths, or assets)
    • Special handling for companion mode versus compiled APKs

2. Installation

  1. Upload this MaterialIcons-Regular.ttf font file to the assets without changing the name of the file , the extension will use this font to show material icons on the message .

  2. Download the Extension:
    Export the extension as a .aix file.

  3. Import into App Inventor:

  • Open your MIT App Inventor project.
  • Go to Extensions > Import extension... and upload the .aix file.
  • Once imported, the ThemerChat component appears in your Palette under Extensions.

3. Initialization & Setup

3.1. Adding ChatView to Your Screen

Place a VerticalArrangement (or another container) on your screen. Then initialize the ChatView extension using the following block (or corresponding code):

block :

ChatView1.Initialize(VerticalArrangement1);

3.2. Sending & Receiving Messages

Use the following functions to add messages:

  • Send a Message (Sender):

block:

ChatView1.Send("Hello, world!", "https://example.com/avatar.png", "Your Name", "");
  • Result:
    image




  • Receive a Message (Receiver):

block:

ChatView1.Receive("Hi there!", "https://example.com/avatar2.png", "Friend Name", "");
  • Result:
    image

For image, file, and voice messages, use the corresponding methods:

  • SendImage, SendImageWithText, ReceiveImage, ReceiveImageWithText
  • SendFile, SendFileWithText, ReceiveFile, ReceiveFileWithText
  • SendVoiceNote, SendVoiceNoteWithText, ReceiveVoiceNote, ReceiveVoiceNoteWithText

4. API Reference

4.1. Core Functions

Initialize(VerticalArrangement arrangement): void

  • Initializes the chat view within a designated VerticalArrangement. This must be called first.

AddMessageFromJson(String jsonString): int

  • Appends a single message to the chat from a JSON object string without reloading the entire view. This is the most efficient method for adding messages in real-time. Returns the newly created message's ID, or -1 if the JSON is invalid.
    You can check how to use this block from here:

http://ahmed2300.github.io/Themerchat.github.io/

ReverseMessages(boolean newestAtBottom): void

  • Sets the order for new messages. Pass true to add new messages to the bottom (default chat behavior), or false to add new messages to the top. The view will automatically scroll to the new message.

HexToRGB(String hexCode): YailList

  • Converts a hexadecimal color code (e.g., "#FF00AA") into an RGB list [r, g, b].

Send(String message, String avatarUrl, String senderName, String timestamp): void

  • Sends a text message.

Receive(String message, String avatarUrl, String receiverName, String timestamp): void

  • Receives a text message.

AddReactionById(int messageId, String reaction): void

  • Adds or increments an emoji reaction to the message with the given ID.

DeleteMessageById(int messageId): void

  • Deletes a message based on its unique ID.

DeleteMessage(int messageIndex): void

  • Deletes a message based on its position (index) in the chat.

SaveFullChatHistory(): String

  • Saves the chat history as a JSON file in the app's private storage and returns the absolute file path.

ReplaceChatHistoryFile(String filePath): String

  • Replaces an existing chat history file at the given filePath with the current chat history. Returns the file path.

GetFullChatHistoryAsJson(): String

  • Returns the complete chat history as a single JSON string.

ClearChatHistoryJson(): String

  • Clears the chat history from both UI and internal metadata, returning an empty JSON array string ("[]").

LoadChatHistoryFromJson(String jsonString): void

  • Clears the current chat and rebuilds the entire view from a JSON string.

LoadFullChatHistory(String filePath): void

  • Clears the current chat and loads the entire history from a specified JSON file.

UpdateMessageText(int messageId, String newText): void

  • Updates the text content of a specific message.

ShowMessageDropdown(int messageId, YailList items): void

  • Displays a dropdown menu for the specified message.

GetMessageText(int messageId): String

  • Retrieves the text from the specified message.

GetLastMessageIndex(): int

  • Returns the index of the last message in the chat, or -1 if empty.

GetLastMessageId(): int

  • Returns the unique ID of the last message in the chat, or -1 if empty.

DeleteAllMessages(): void

  • Deletes all messages from the chat view.

GetSelectedMessageIds(): YailList

  • Returns a list of IDs for all currently selected messages.

ShowLoadingDots(String avatarUrl, String name, boolean isSender): int

  • Displays a loading (three-dots) animation message and returns its unique ID.

HideLoadingDots(int messageId): void

  • Hides the loading indicator for the specified message.

UpdateSeenMark(int messageId, boolean seen): void

  • Updates the read/seen mark for a sender’s message (true = double check, false = single check).

ScrollToMessage(int messageId): void

  • Scrolls to and temporarily highlights the specified message.

4.2. Message Type Functions

SendImage(String imagePath, String avatarUrl, String senderName, String timestamp): void

  • Sends an image-only message (right-aligned). imagePath can be URL, local path, or asset name.

SendImageWithText(String message, String imagePath, String avatarUrl, String senderName, String timestamp): void

  • Sends an image message accompanied by message text (right-aligned).

ReceiveImage(String imagePath, String avatarUrl, String receiverName, String timestamp): void

  • Receives an image-only message (left-aligned).

ReceiveImageWithText(String message, String imagePath, String avatarUrl, String receiverName, String timestamp): void

  • Receives an image message with accompanying message text (left-aligned).

SendFile(String fileSource, String fileName, String fileSize, String fileType, String avatarUrl, String senderName, String timestamp): void

  • Sends a file-only message (right-aligned). fileSource (URL, local, asset), fileName, fileSize, fileType are used for display and handling.

SendFileWithText(String textMessage, String fileSource, String fileName, String fileSize, String fileType, String avatarUrl, String senderName, String timestamp): void

  • Sends a file message accompanied by textMessage (right-aligned).

ReceiveFile(String fileSource, String fileName, String fileSize, String fileType, String avatarUrl, String receiverName, String timestamp): void

  • Receives a file-only message (left-aligned).

ReceiveFileWithText(String textMessage, String fileSource, String fileName, String fileSize, String fileType, String avatarUrl, String receiverName, String timestamp): void

  • Receives a file message accompanied by textMessage (left-aligned).

SendVoiceNote(String audioPath, String avatarUrl, String senderName, String timestamp): void

  • Sends a voice note message (right-aligned). audioPath can be URL, local path, or asset name.

SendVoiceNoteWithText(String textMessage, String audioPath, String avatarUrl, String senderName, String timestamp): void

  • Sends a voice note message accompanied by textMessage (right-aligned).

ReceiveVoiceNote(String audioPath, String avatarUrl, String receiverName, String timestamp): void

  • Receives a voice note message (left-aligned).

ReceiveVoiceNoteWithText(String textMessage, String audioPath, String avatarUrl, String receiverName, String timestamp): void

  • Receives a voice note message accompanied by textMessage (left-aligned).

SendVideo(String videoPath, String thumbnailUrl, String avatarUrl, String senderName, String timestamp): void

  • Sends a video message (right-aligned). videoPath (URL, local, asset) is the video source, thumbnailUrl (URL, local, asset) is for the preview. Duration is detected automatically.

ReceiveVideo(String videoPath, String thumbnailUrl, String avatarUrl, String receiverName, String timestamp): void

  • Receives a video message (left-aligned).

UpdateFileIcon(int messageId, String status): void

  • Updates the icon shown for a file message (messageId). status can be: "file" (downloaded/local), "download" (needs download), or "progress" (downloading, shows spinner).

4.3. Properties (Getters and Setters unless specified)

SentMessageColor: int

  • Sets/gets the background color of sent message bubbles.

ReceivedMessageColor: int

  • Sets/gets the background color of received message bubbles.

SentTextColor: int

  • Sets/gets the text color within sent message bubbles.

ReceivedTextColor: int

  • Sets/gets the text color within received message bubbles.

SenderNameTextColor: int

  • Sets/gets the text color for the sender's name displayed above the bubble (if ShowName is true).

ReceiverNameTextColor: int

  • Sets/gets the text color for the receiver's name displayed above the bubble (if ShowName is true).

TimestampTextColor: int

  • Sets/gets the color of the timestamp text (e.g., "05:10 PM").

TimestampIconColor: int

  • Sets/gets the color of the clock icon preceding the timestamp.

ReadMarkColor: int

  • Sets/gets the color of the read/seen status icon (single/double check) for sender messages.

ReadMarkFontSize: int

  • Sets/gets the font size (in sp) for the read/seen status icon.

FileIconsColor: int

  • Sets/gets the color of the main file icon and the download/progress/check overlay icon in file messages.

VoiceNotePlayPauseIconColor: int

  • Sets/gets the color of the play/pause icon inside the circle button for voice notes.

VoiceNoteUIColors: YailList (Write-only)

  • Sets multiple voice note UI colors at once. Provide a list of 3 integers: [circleBackgroundColor, sliderThumbAndProgressColor, durationTextColor].

ReplyLineColorSent / ReplyLineColorReceived: int

  • Sets/gets the color of the vertical indicator line for reply previews on sent/received messages.

ReplySenderNameColorSent / ReplySenderNameColorReceived: int

  • Sets/gets the text color of the original sender's name within the reply preview box.

ReplySnippetTextColorSent / ReplySnippetTextColorReceived: int

  • Sets/gets the text color of the message snippet within the reply preview box.

ReplySnippetIconColorSent / ReplySnippetIconColorReceived: int

  • Sets/gets the color of the small icon (photo, video, file, mic) shown before the snippet text for media replies.

ReplyPreviewBoxBackgroundColorSent / ReplyPreviewBoxBackgroundColorReceived: int

  • Sets/gets the background color of the box containing the original sender name and snippet in a reply preview. Use a transparent color (Alpha=0) for no background.

PopupMenuBackgroundColor: int

  • Sets/gets the background color of the dropdown menu (shown via ShowMessageDropdown).

PopupMenuTextColor: int

  • Sets/gets the text color of the items within the dropdown menu.

FontFamily: String (Write-only)

  • Sets the font family for message text. Provide the asset name (e.g., "MyFont.ttf") or a full file path accessible by the app.

FontSize: int (Write-only)

  • Sets the base font size (in sp) for message text. Other elements like names, timestamps might scale relative to this.

AvatarSize: int (Write-only)

  • Sets the size (diameter, in dp) for the avatar image view.

AvatarCornerRadius: int

  • Sets/gets the corner radius (in dp) applied to the avatar image if RoundProfileImage is set to false.

RoundProfileImage: boolean

  • Sets/gets whether the avatar image should be forced into a perfect circle (true) or use the AvatarCornerRadius property (false).

ShowProfileImage: boolean

  • Sets/gets whether the avatar image is shown next to messages.

ShowName: boolean

  • Sets/gets whether the sender/receiver name is shown above the message bubble.

MessageMaxWidth: int (Write-only)

  • Sets the maximum width (in dp) that a message bubble can expand to.

MessageCornerRadius: float

  • Sets/gets the corner radius (in dp) for the main message bubbles.

MessageHorizontalPadding: int (Write-only)

  • Sets the internal horizontal padding (left/right, in dp) within the message bubbles.

MessageVerticalPadding: int (Write-only)

  • Sets the internal vertical padding (top/bottom, in dp) within the message bubbles.

ShowTimestamp: boolean (Write-only)

  • Sets whether the timestamp text and icon should be displayed by default.

ShowReadStatus: boolean (Write-only)

  • Sets whether the read/seen status icon should be displayed by default for sender messages.

BackgroundColor: int (Write-only)

  • Sets a solid background color for the entire chat scroll view. Clears any background image or gradient.

BackgroundImage: String (Write-only)

  • Sets a background image for the chat scroll view. Provide a URL, local file path, or asset name. Clears any background color or gradient.

BackgroundGradient: YailList (Write-only)

  • Sets a top-to-bottom gradient background for the chat scroll view. Provide a list of at least two color integers. Clears any background color or image.

EnableSwipeMotion: boolean

  • Sets/gets whether the swipe-left/swipe-right gesture on message bubbles is enabled (triggers MessageSwiped event).

SetCircularProgressGradient: YailList (Write-only)

  • Sets the gradient colors for the circular progress ring. Provide a list of at least two color integers.

PercentTextColor: int (Write-only)

  • Sets the text color for the percentage ("XX%") display inside the circular progress ring.

CircularProgressThickness: int (Write-only)

  • Sets the thickness (stroke width, in dp) of the circular progress ring itself.

4.4. Events

MessageOptionSelected(int messageId, int optionId, String optionText)

  • Triggered when an option is selected from the dropdown menu shown by ShowMessageDropdown. optionId is the 0-based index of the selected item.

MessageSelected(int messageId, boolean selected)

  • Triggered when a message's selection state changes. selected is true if the message is now selected, false if deselected.

SelectionCleared(int messageId, boolean selected)

  • Triggered when message selection is cleared. selected will likely always be false here. Note: Use MessageSelected for tracking individual selections.

ProfilePicClicked(int messageId)

  • Triggered when a user taps on the avatar/profile picture associated with a message.

OnMessageClick(int messageId, boolean selected)

  • Triggered when a user taps on a message bubble. selected indicates if the message became selected by this click (only happens in selection mode).

OnMessageLongClick(int messageId, boolean selected)

  • Triggered when a user long-presses on a message bubble. This action typically enters selection mode. selected is the new selection state (typically true).

MessageSwiped(int messageId, boolean selected, String direction)

  • Triggered when a message bubble is swiped (if EnableSwipeMotion is true). direction will be "left" or "right".

ImageClicked(int messageId, String imageSource)

  • Triggered when the image part of an image message is tapped. imageSource is the original path or URL.

FileClicked(int messageId, String fileName, String fileSize, String fileType, String fileSource, String filePath)

  • Triggered when the icon area of a file message is tapped. Provides full file details, including the resolved local filePath.

VideoClicked(int messageId, String playableVideoPath, String originalVideoUrl, String originalAssetName)

  • Triggered when a video message's thumbnail or play icon is clicked. Provides the playableVideoPath which can be used in a video player.

ReplyPreviewClicked(int originalMessageId)

  • Triggered when a user taps on the preview box within a reply message. Returns the messageId of the original message.

VoiceNotePlayClicked(int messageId, String audioSource)

  • Triggered when the play/pause button of a voice note is clicked.

AudioStartPlaying(int messageId, String audioSource)

  • [NEW] Triggered when a voice note begins playing, either from a paused state or from the beginning.

AudioPaused(int messageId, String audioSource)

  • [NEW] Triggered when a voice note is paused by the user.

AudioStopPlaying(int messageId, String audioSource)

  • [NEW] Triggered when a voice note stops playing for any reason (finishes, is stopped to play another, or is deleted).

WhenReachTop()

  • [NEW] Triggered when the user scrolls to the very top of the chat. Useful for loading older messages (infinite scroll).

WhenReachBottom()

  • [NEW] Triggered when the user scrolls to the very bottom of the chat.

MicButtonSwipedUp(int uniqueId)

  • Triggered when a component configured with ApplySwipeUpEffect is swiped upwards past the threshold.

MicButtonFullClicked(int uniqueId)

  • Triggered when a component configured with ApplySwipeUpEffect is tapped without meeting the swipe threshold.

5. Customization & Themes

Developers can also create functions to apply specific themes (e.g., WhatsApp, Telegram, Messenger). Such a function might change:

  • Bubble colors (sent and received)
  • Text colors
  • Timestamp and clock icon colors
  • Read/seen mark colors

6. Asset Loading and Customization

6.1. Loading Images and Fonts

  • Universal Image Loader:
    The extension uses the Universal Image Loader (UIL) to load images from URLs with caching and optional rounded corners.
  • Local and Asset Loading:
    For avatar and message images, the extension first attempts to load from the assets folder (for compiled APKs) and falls back to a local file path (using companion mode paths if necessary).
  • Material Icons:
    The material icon font is loaded either from the companion’s shared assets or from the extension’s packaged assets.

6.2. Voice Notes

Voice note playback uses a MediaPlayer with asynchronous preparation and handles asset loading similarly to image assets.


7. Developer Notes

  • Customization:
    The ChatView extension provides many properties to tailor the chat UI. Developers can modify colors, fonts, dimensions, and animations to suit their application’s theme.
  • Gesture Handling:
    The extension supports swipe, tap, and long-press gestures for message interactions, enabling message selection, deletion, and other custom actions.
  • Chat History:
    Chat history is maintained as JSON metadata that can be saved to, loaded from, and cleared in a local file.
  • Extensibility:
    With helper methods for loading assets, applying custom fonts, and formatting text, the extension is designed to be flexible and easy to extend.

8. Additional Resources

  • Reference List:
    Nostra13. (n.d.). Android-Universal-Image-Loader [Java library]. GitHub. Retrieved March 13, 2025, from https://github.com/nostra13/Android-Universal-Image-Loader.
  • MIT App Inventor Forums: For troubleshooting and community support.
  • Asset Management: Tips on how to properly include and access assets in both companion and compiled APKs.

9. AIX File

You can purchase ThemerChat below for $5.99. You can pay with PayPal or a credit card. After successful payment, you will be automatically redirected to the download page of the extension


Who I Am

Hey there! :wave: I'm mr.koder, a passionate Flutter developer, extension creator, and physics teacher. I specialize in Java, Rush, and Flutter, crafting powerful tools to enhance MIT App Inventor, Kodular, and mobile development. My goal is to make UI customization seamless, intuitive, and visually stunning, helping developers bring their app ideas to life with professional designs.

My Website

Want to check out more of my work, get updates, or reach out for support? Visit my website:
:globe_with_meridians: Welcome to Extensions Lake
:left_speech_bubble: My telegram channel

I’m always exploring new ideas or features to be added in app development, physics education, and UI/UX innovation. If you have suggestions, questions, or just want to chat about coding or science, feel free to connect! :rocket:v

4 Likes

Thank you for your contribution, this looks great!
Are you using any library?
If yes, please provide a link to that library to credit its author

Taifun

1 Like

Thanks @Taifun

This is the only library that I use to load images

Please add a link, see again how to cite sources correctly
Taifun

Updated

Is the only way to get this feature is by paying with paypal or just making it on your own because I am wondering if I could use this for free.

:smiling_face_with_tear: @Randomly_Mythic
This extension, featuring various functions, took 9 days of hard work.
Its price is low compared to its functionalities.

1 Like

New Update :star2:

This is full extension description Podcast

  • New blocks for adding video and reply on the message system added.


  • Some functions were improved to provide more UI and UX features.

Result Examble

** :star2: NewUpdate: Advanced Markdown Formatting**

The ThemerChat extension has been upgraded with a powerful, built-in Markdown parser that automatically formats your messages. You do not need to use any special blocks to enable it; simply send or receive text messages containing the supported formats, and they will be beautifully rendered in the chat view.

This new parser correctly handles multiple and nested styles within the same message (e.g., bold and italic text inside a clickable link).

How to Use

Simply provide the text with Markdown formatting to any block that sends or displays a message, such as:

  • Send

  • Receive

  • SendReply or ReceiveReply

  • SendImageWithText

  • And any other method that includes a message or text parameter.

Supported Formats

Here is a complete list of the supported Markdown formats:

Feature Syntax Description
Headings ### Your Title Creates a large, bold title. You can use #, ##, or ### for different heading sizes.
Bulleted Lists - List item 1
- List item 2
Creates a clean, indented list with bullet points for each item.
Inline Code StatelessWidget Renders text in a monospaced font with a light grey background, perfect for code snippets, commands, or highlighting keywords.
Fenced Code Blocks <br> // Your code here <br> print("Hello"); <br> Creates a larger, multi-line block for displaying code. The entire block has a distinct background and uses a monospaced font.
Bold This is bold Makes the enclosed text bold.
Italic This is italic Makes the enclosed text italic.
Strikethrough This is strikethrough Puts a line through the enclosed text.
Links Click here Creates a clickable link. The text in the square brackets becomes the blue, tappable link.
Nested Styles See the [docs] (url) You can combine styles. For example, you can have italic text inside a bold link.



Nice Extension, it deals excellent with Images, Voices, video and files. for better performance please consider the following for next update. (these are suggestions):

1. Incremental Message Append

  • A block like AddMessage(data) to add a single message without reloading the entire chat.
  • This eliminates unnecessary media reloading for messages already on-screen.

2. Scroll Events

  • WhenReachTop: Trigger an event when the user scrolls to the top of the chat (for infinite-scroll loading).
  • WhenReachBottom: Trigger an event when the user reaches the bottom (useful for auto-scroll on incoming messages).

3. Audio Playback Events

With custom voice controls, the extension would benefit greatly from event like:

  • AudioStopPlaying
  • AudioStartPlaying
  • AudionPause

These could allow developers to implement features like:

  • Automatically switching between voice notes,
  • Showing playback progress per message,
  • Muting other audio on play, etc.

4. Media Caching/Avoid Reload

  • A mechanism to cache already-loaded media (voice or image) in memory, so subsequent renders skip reloading from URL.
  • Eg. Attach a message ID to a cached image/audio instance.

5. Reverse Order Block

  • ReverseMessages(order):
    • If order = true, show newest messages at the bottom (default).
    • If order = false, show newest at the top (like some messaging apps).
    • Useful for loading from the newest backward without reordering manually in code.
1 Like

Hello @merzaej2015
I am really pleased to read your opinion about the extension!

Also you have made a compressive notes and recommendations, I see You are right ,

And I really thank you for your recommendations I will take them all in my mind And add them to the extension.

Be turned for the next Update!

1 Like

Extension updated with the new features ThemerChat.aix

image

image

image