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), orfalse
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 tofalse
.
RoundProfileImage:
boolean
- Sets/gets whether the avatar image should be forced into a perfect circle (
true
) or use theAvatarCornerRadius
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
istrue
if the message is now selected,false
if deselected.
SelectionCleared(int messageId, boolean selected)
- Triggered when message selection is cleared.
selected
will likely always befalse
here. Note: UseMessageSelected
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 (typicallytrue
).
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