Changing Default Texts, Localization, Colors, and other UI elements
You can change default texts, perform localization, change colors, and other UI properties to suit your app needs. Everything on this page applies to both Android and iOS, with the same names; the few differences are mentioned.
MesiboUI creates a singleton object MesiboUiDefaults having various properties which you change as needed. You should configure it once at the start, before showing any screen. It is NOT RECOMMENDED to change these values at runtime.
Below are a few of the properties; your IDE shows the complete list of MesiboUiDefaults, with a description of each.
| Property | Description |
|---|---|
messageListTitle | Title of the chat list; the app name if empty |
userListTitle, createGroupTitle, modifyGroupTitle, forwardTitle | Titles of the other screens |
enableSearch, enableForward, enableEdit, enableReply, enableSwipeToReply | Features of the messaging screens |
searchMode | Where search is on the chat list, see Search |
showOnlineIndicator | A green dot on the picture of people who are online, in the chat list |
showMissedCalls | Show missed calls in the chat |
showRichMessageButtons | The attachment and camera buttons in the message input |
reactions | Emoji shown when a message is long-pressed; empty for none |
showProfilePopup | Tapping a picture in the chat list opens a small profile popup |
show...InProfileView | The rows of the profile screen, for example, showBlockCallsInProfileView |
showEnterAddress | A row in the contact list to start a chat with a phone number or address |
e2eeIndicator | Show the end-to-end encryption status |
messageFailedTitle | Under a message that could not be sent; tapping the message sends it again |
messageInvalidRecipientTitle, messageNotMemberTitle, messageBlockedTitle | Under a message that failed and cannot be sent again: invalid recipient, not a group member, or blocked |
| texts | All the texts, for example, messageHint, typingIndicationTitle, today, yesterday, for localization |
The status texts, for example, typingIndicationTitle, joinedIndicationTitle, userOnlineIndicationTitle and lastSeenTitle, are not shown when they are empty or nil (null). Set one to an empty text to hide that status; the next one is shown instead, for example, online instead of typing.
To change, get the instance of MesiboUiDefaults and change the necessary properties.
Android:
MesiboUiDefaults defs = MesiboUI.getUiDefaults();
defs.messageListTitle = "New Messages";
defs.enableSwipeToReply = true;
iOS (Swift):
let defs = MesiboUI.getUiDefaults()
defs.messageListTitle = "New Messages"
defs.enableSwipeToReply = true
iOS (Objective-C):
MesiboUiDefaults *defs = [MesiboUI getUiDefaults];
defs.messageListTitle = @"New Messages";
defs.enableSwipeToReply = YES;
Flutter: read the defaults, change them, and apply them; only the values you change are sent:
MesiboUiDefaults defs = await MesiboUI().getDefaults();
defs.messageListTitle = "New Messages";
defs.enableSwipeToReply = true;
await MesiboUI().setDefaults(defs);
Differences:
- The keyboard of the enter address prompt is
enterAddressInputType(anInputType) on Android andenterAddressKeyboard(aUIKeyboardType) on iOS. - The location sharing settings (
mapTileUrl,mapStaticUrl,mapAttribution,mapZoomand their texts) are on Android only.
Search
searchMode sets where search is on the chat list:
| Mode | Android | iOS | Description |
|---|---|---|---|
| Button (default) | MesiboUI.SEARCH_BUTTON | MESIBO_SEARCH_BUTTON | A search button in the title bar opens the search field |
| Top | MesiboUI.SEARCH_TOP | MESIBO_SEARCH_TOP | The search field is always shown at the top, under the title |
| System | MesiboUI.SEARCH_SYSTEM | MESIBO_SEARCH_SYSTEM | Where the platform places it: on iOS 26 and later, at the bottom on iPhone. On Android, the same as Button |
| None | MesiboUI.SEARCH_NONE | MESIBO_SEARCH_NONE | No search, the same as enableSearch off |
The search button is the rightmost button of the title bar; when there is no room, it moves into the more menu. In Flutter, the modes are MesiboUI.SEARCH_BUTTON and so on.
Colors
Colors are 0xAARRGGBB. A color of 0 uses the theme color, which follows the light and dark mode.
MesiboUiDefaults defs = MesiboUI.getUiDefaults();
defs.toolbarColor = 0xff00868b;
defs.toolbarTextColor = 0xffffffff; // 0: white or black, depending on toolbarColor
defs.toolbarIconColor = 0; // 0: same as toolbarTextColor
defs.accentColor = 0xff00868b;
MesiboUiDefaults *defs = [MesiboUI getUiDefaults];
defs.toolbarColor = 0xff00868b;
defs.toolbarTextColor = 0xffffffff;
defs.toolbarIconColor = 0;
defs.accentColor = 0xff00868b;
Other colors are messageBackgroundColorForMe, messageBackgroundColorForPeer, messagingBackgroundColor and userListBackgroundColor. On Android, you can also override the colors as resources (res/values/colors.xml, and values-night for the dark theme).
Light and Dark Theme
The messaging UI follows the system light or dark setting. To force one, call setTheme at the start of your app, for example, in Application.onCreate() on Android, and in application:didFinishLaunchingWithOptions: on iOS:
MesiboUI.setTheme(MesiboUI.THEME_SYSTEM); // or MesiboUI.THEME_LIGHT, MesiboUI.THEME_DARK
[MesiboUI setTheme:MESIBO_THEME_SYSTEM]; // or MESIBO_THEME_LIGHT, MESIBO_THEME_DARK
Attachments
The attachment sheet (the paperclip button in the message screen) shows a list of tiles: gallery, camera, video, document, audio and location. The list is in MesiboUiDefaults.attachments; you can change the title, icon or color of a tile, disable or remove tiles, reorder them, or add your own tiles with a click handler.
Android:
MesiboUiDefaults defs = MesiboUI.getUiDefaults();
// change or disable built-in tiles
defs.getAttachment(MesiboUiDefaults.Attachment.GALLERY).color = 0xff00868b;
defs.getAttachment(MesiboUiDefaults.Attachment.LOCATION).enabled = false;
// add your own tile
defs.attachments.add(new MesiboUiDefaults.Attachment("Contact", R.drawable.ic_contact, 0xff009de2,
(activity, profile, attachment) -> shareContact(activity, profile)));
// recent photos at the top of the sheet
defs.showRecentPhotos = true;
iOS:
MesiboUiDefaults *defs = [MesiboUI getUiDefaults];
// change or disable built-in tiles
[defs getAttachment:MESIBO_ATTACH_GALLERY].color = 0xff00868b;
[defs getAttachment:MESIBO_ATTACH_LOCATION].enabled = NO;
// add your own tile
[defs.attachments addObject:[[MesiboAttachment alloc] initWithTitle:@"Contact"
icon:[UIImage systemImageNamed:@"person.crop.circle"] color:0xff009de2
handler:^(UIViewController *parent, MesiboProfile *profile, MesiboAttachment *attachment) {
[self shareContact:parent profile:profile];
}]];
// recent photos at the top of the sheet (only when photo access was given)
defs.showRecentPhotos = YES;
A click handler set on a built-in tile (listener on Android, handler on iOS) is called instead of its default action.
Dialogs
MesiboDialogs shows the same dialogs and bottom sheets as the messaging UI, so that your app can use a consistent look. Set the options and call show:
MesiboDialogs.Options o = new MesiboDialogs.Options();
o.title = "Delete chats?";
o.positiveLabel = "Delete";
o.negativeLabel = "Cancel";
o.destructive = true; // the positive button in red
o.sheet = false; // true: a bottom sheet instead of a dialog
o.onPositive = () -> deleteChats();
MesiboDialogs.show(context, o);
// a message with OK
MesiboDialogs.alert(context, "Signed Out", "Login again to continue.");
MesiboDialogOptions *o = [MesiboDialogOptions new];
o.title = @"Delete chats?";
o.positiveLabel = @"Delete";
o.negativeLabel = @"Cancel";
o.destructive = YES; // the positive button in red
o.sheet = NO; // YES: an action sheet instead of an alert
o.onPositive = ^{ [self deleteChats]; };
[MesiboDialogs show:self options:o];
// a message with OK
[MesiboDialogs alert:self title:@"Signed Out" message:@"Login again to continue."];
Set items (and onSelect) to show a list of choices instead of a message; destructiveItems shows the given items in red. On iOS, the options class is MesiboDialogOptions.