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

Black_Knight · March 12, 2025, 10:20pm

ThemerChat – Elevate Your Chat UI with Stunning Themes!

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

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 :

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

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 .
Download the Extension:
Export the extension as a .aix file.
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:

Receive a Message (Receiver):

block:

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

Result:

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! 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:
Welcome to Extensions Lake
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! v

Taifun · March 13, 2025, 1:26am

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

Black_Knight · March 13, 2025, 2:43am

Thanks @Taifun

This is the only library that I use to load images

Taifun · March 13, 2025, 2:24pm

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

Black_Knight · March 13, 2025, 4:03pm

Updated

Randomly_Mythic · March 13, 2025, 9:42pm

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.

Black_Knight · March 14, 2025, 2:58pm

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

Black_Knight · May 12, 2025, 3:19pm

New Update

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

Black_Knight · June 7, 2025, 4:09pm

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.

merzaej2015 · August 6, 2025, 11:38am

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.

Black_Knight · August 6, 2025, 1:02pm

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!

Black_Knight · August 20, 2025, 3:51pm

Extension updated with the new features _{ThemerChat.aix}