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.

PropertyDescription
messageListTitleTitle of the chat list; the app name if empty
userListTitle, createGroupTitle, modifyGroupTitle, forwardTitleTitles of the other screens
enableSearch, enableForward, enableEdit, enableReply, enableSwipeToReplyFeatures of the messaging screens
searchModeWhere search is on the chat list, see Search
showOnlineIndicatorA green dot on the picture of people who are online, in the chat list
showMissedCallsShow missed calls in the chat
showRichMessageButtonsThe attachment and camera buttons in the message input
reactionsEmoji shown when a message is long-pressed; empty for none
showProfilePopupTapping a picture in the chat list opens a small profile popup
show...InProfileViewThe rows of the profile screen, for example, showBlockCallsInProfileView
showEnterAddressA row in the contact list to start a chat with a phone number or address
e2eeIndicatorShow the end-to-end encryption status
messageFailedTitleUnder a message that could not be sent; tapping the message sends it again
messageInvalidRecipientTitle, messageNotMemberTitle, messageBlockedTitleUnder a message that failed and cannot be sent again: invalid recipient, not a group member, or blocked
textsAll 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 (an InputType) on Android and enterAddressKeyboard (a UIKeyboardType) on iOS.
  • The location sharing settings (mapTileUrl, mapStaticUrl, mapAttribution, mapZoom and their texts) are on Android only.

searchMode sets where search is on the chat list:

ModeAndroidiOSDescription
Button (default)MesiboUI.SEARCH_BUTTONMESIBO_SEARCH_BUTTONA search button in the title bar opens the search field
TopMesiboUI.SEARCH_TOPMESIBO_SEARCH_TOPThe search field is always shown at the top, under the title
SystemMesiboUI.SEARCH_SYSTEMMESIBO_SEARCH_SYSTEMWhere the platform places it: on iOS 26 and later, at the bottom on iPhone. On Android, the same as Button
NoneMesiboUI.SEARCH_NONEMESIBO_SEARCH_NONENo 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.