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....
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.aixfile. -
Import into App Inventor:
- Open your MIT App Inventor project.
- Go to Extensions > Import extension... and upload the
.aixfile. - Once imported, the
ThemerChatcomponent 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,ReceiveImageWithTextSendFile,SendFileWithText,ReceiveFile,ReceiveFileWithTextSendVoiceNote,SendVoiceNoteWithText,ReceiveVoiceNote,ReceiveVoiceNoteWithText
4. API Reference
4.1. Core Functions
- HexToRGB(String hexCode):
Converts a hexadecimal color code into an RGB list.
- Initialize(VerticalArrangement arrangement):
Initializes the chat view within a container.
- Send(String message, String avatarUrl, String senderName, String timestamp):
Sends a text message.
- Receive(String message, String avatarUrl, String receiverName, String timestamp):
Receives a text message.
- AddReactionById(int messageId, String reaction):
Adds or increments an emoji reaction to the message with the given ID.
- DeleteMessage(int messageIndex):
Deletes a message based on its position in the chat.
- SaveFullChatHistory():
Saves the chat history as a JSON file in the app folder.
- ReplaceChatHistoryFile(String filePath):
Replaces an existing chat history file with current history.
- GetFullChatHistoryAsJson():
Returns the complete chat history as a JSON string.
- ClearChatHistoryJson():
Clears the chat history from both UI and internal metadata.
- LoadChatHistoryFromJson(String jsonString):
Rebuilds the chat view from a JSON string.
- LoadFullChatHistory(String filePath):
Loads chat history from a JSON file.
- UpdateMessageText(int messageId, String newText):
Updates the text content of a specific message.
- ShowMessageDropdown(int messageId, YailList items):
Displays a dropdown menu for the specified message.
- GetMessageText(int messageId):
Retrieves the text from the specified message.
- GetLastMessageIndex():
Returns the index of the last message in the chat.
- ClearSelectionById(int messageId):
Clears the selection state of a message.
- DeleteAllMessages():
Deletes all messages from the chat view.
- GetSelectedMessageIds():
Returns a list of IDs for messages currently selected.
- ShowLoadingDots(String avatarUrl, String name, boolean isSender):
Displays a loading (three-dots) animation message and returns its ID.
- HideLoadingDots(int messageId):
Hides the loading indicator for the specified message.
- UpdateSeenMark(int messageId, boolean seen):
Updates the read/seen mark for a sender’s message.
- ScrollToMessage(int messageId):
Scrolls to and highlights the specified message.
4.2. Message Type Functions
- SendImage(String imagePath, String avatarUrl, String senderName, String timestamp):
Sends an image-only message.
- SendImageWithText(String message, String imagePath, String avatarUrl, String senderName, String timestamp):
Sends an image message accompanied by text.
- ReceiveImage(String imagePath, String avatarUrl, String receiverName, String timestamp):
Receives an image-only message.
- ReceiveImageWithText(String message, String imagePath, String avatarUrl, String receiverName, String timestamp):
Receives an image message with text.
- SendFile(...)/ReceiveFile(...):
Functions for sending and receiving file messages.
- SendVoiceNote(...)/ReceiveVoiceNote(...):
Functions for sending and receiving voice note messages.
- SendVoiceNoteWithText(...)/ReceiveVoiceNoteWithText(...):
Functions for sending and receiving voice notes that include text.
- UpdateFileIcon(int messageId, String status):
Updates the icon for file messages based on their status ("file", "download", or "progress").
4.3. Properties
- SentMessageColor(int color) / ReceivedMessageColor(int color):
Set the background color of sent and received message bubbles.- SentTextColor(int color) / ReceivedTextColor(int color):
Set the text color for messages.
- TimestampTextColor(int color) / TimestampIconColor(int color):
Set the colors for timestamps and clock icons.
- SenderReadStatusColor(int color) / ReceiverReadStatusColor(int color):
Set the colors for read/seen marks (for sender and receiver).
- FontFamily(String typefacePath) / FontSize(int size):
Set the font family and font size for messages.
- AvatarCornerRadius(int radius):
Get/set the corner radius for avatar images.
- RoundProfileImage(boolean round):
Enable or disable rounded avatars.
- ShowProfileImage(boolean show):
Toggle visibility of profile images.
- ShowName(boolean show):
Toggle display of sender/receiver names.
- BackgroundColor(int color) / BackgroundImage(String imagePath) / BackgroundGradient(YailList colors):
Customize the chat background with a solid color, image, or gradient.
- MessageCornerRadius(float radius):
Get/set the corner radius for message bubbles.
- MessageHorizontalPadding(int padding) / MessageVerticalPadding(int padding):
Set the padding for message bubbles.
- EnableSwipeMotion(boolean enable):
Enable or disable swipe gestures on messages.
- ShowReadStatus(boolean show):
Configure whether read/seen status is shown.
- SetCircularProgressGradient(YailList colors), PercentTextColor(int color), CircularProgressThickness(int thickness):
Customize the circular progress indicator for file or voice note loading.
4.4. Events
- MessageOptionSelected(messageId, optionId, optionText):
Fired when a dropdown menu option is selected.
- MessageSelected(messageId, selected):
Fired when a message is selected or deselected.
- SelectionCleared(messageId, selected):
Fired when a message selection is cleared.
- ProfilePicClicked(messageId):
Fired when a profile image is tapped.
- OnMessageClick(messageId, selected):
Fired when a message is tapped.
- OnMessageLongClick(messageId, selected):
Fired on a long press of a message.
- MessageSwiped(messageId, selected, direction):
Fired when a message is swiped (direction: left/right).
- ImageClicked(messageId, imageSource):
Fired when an image message is tapped.
- FileClicked(messageId, fileName, fileSize, fileType, fileSource, filePath):
Fired when a file message is tapped.
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 GitHub - nostra13/Android-Universal-Image-Loader: Powerful and flexible library for loading, caching and displaying images on Android.. - 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! 
