Sign In

Customizing User Interface and Message Rendering

Mesibo messaging UI is completely open-source, allowing you to download the entire source code and tailor the user interface to suit your application's needs.

Alternatively, you can also customize most of the user interface including how messages are rendered by implementing MesiboUIListner. The mesibo UI will call this listener functions with the screen and row data as explained below.

Prerequisites

The Mesibo messaging UI is based on RecyclerView in Android and UITableView in iOS. Hence, you must be well-acquainted with these components:

  • For Android, ensure a strong understanding of RecyclerView concepts.
  • For iOS, ensure you possess comprehensive knowledge about UITableView.

Also, familiarize yourself with ViewHolder concepts for a complete understanding of this documentation.

How UI customization works

Given that the messaging UI is based on RecyclerView in Android and UITableView in iOS, the process of customization is the same as that of RecyclerView in Android and UITableView in iOS.

All you have to do is to implement a listener as described later in this document and mesibo UI will invoke the listener functions with screen and message information. You can then render messages inside those functions. You can either render the message entirely as you like or you can let mesibo UI render it first and then you can fine-tune it later. Either way, you will have complete control over the customization.

Before delving into the explanation of listener functions, let's take a swift look at fundamental data types for customization.

Understanding MesiboScreen

Mesibo messaging UI has two types of screens

  1. User List Screen, which displays the list of users or groups along with their last message or other information
  2. Message Screen, which displays all the messages for a user or a group

The MesiboScreen class represents the screen displayed - for example, a user list screen or a message screen. It holds the views and data for the screen being displayed.

MesiboScreen is a base class for the MesiboUserListScreen and MesiboMessageScreen classes which represents the screen being displayed. Mesibo UI will call listener functions with MesiboScreen as a parameter which you need to downcast before performing any operations.

For example,

if(screen.userlist) {
	MesiboUserListScreen userListScreen = (MesiboUserListScreen) screen;
} else {
	MesiboMessageScreen messageScreen = (MesiboMessageScreen) screen;
}

Exploring MesiboRow

A row represents individual messages or user data in the table displayed on the screen.

MesiboRow is a base class for the MesiboUserListRow and MesiboMessageRow classes which holds the views and data for the row being displayed. Mesibo UI will call listener functions with MesibocwRowScreen which you need to downcast before performing any operations.

For example,

if(screen.userlist) {
	MesiboUserListRow userListRow = (MesiboUserListRow) row;
} else {
	MesiboMessageRow messageRow = (MesiboMessageRow) row;
}

The screen and row properties might be slightly different between Android and iOS. You can refer to the Androidopen_in_new or iOSopen_in_new source code to learn about all the properties.

UI Listener

You need to implement the following functions from MesiboUIListener. You must call MesiboUI.setListener to set the listener.

Reference Implementation

Refer to the UIListener class in the first appopen_in_new or messenger app source code( https://mesibo.com/open-source-chat-apps/open_in_new) for a reference implementation in Java, Kotlin, Objective-C, and Swift.

MesiboUI_onInitScreen

This function will be called when the screen is initialized and loaded. You need to downcast the screen as explained above.

boolean MesiboUI_onInitScreen(MesiboScreen screen) {

    return true;
}

You can initialize various views passed in the screen, for example, changing text colors, background color, etc. You can also add buttons to the screen navigation bar by setting screen.menu in Android and screen.buttons in iOS. Refer to the reference UIListener implementation as mentioned above.

There are additional controls available for the message screen that you can access using screen.controls, for example, message edit control, camera, location, and other media selection buttons (image, video, location, file, audio), send button, etc. You can customize them and if required, add your click handler to modify default actions.

MesiboUI_onGetCustomRow

By default, the mesibo UI will render all the messages using a default layout. Although the default layout beautifully meets the requirements of most, you can implement this function to customize every message if required.

If you are on a Messaging screen, there are essentially three basic elements that form a chat window are

  • Incoming chat view The incoming chat view renders all the received messages. By default, it is shown on the left side of the screen.

  • Outgoing chat view The outgoing chat view renders all the outgoing and sent messages. By default, it is shown on the right side of the screen. It is similar to the incoming chat view but additionally shows message status.

  • Data view Data view renders non-message data like dates, missed calls, etc. By default, it is shown in the center of the screen.

On the User List screen, each row shows the name and the picture of the user and the status of the last message depending on the mode.

If you decide to take over the rendering of a particular message(s), you can implement it here and return it. You should take care of showing the above elements. The mesibo UI will use the view created by you instead of creating itself.

MesiboCell MesiboUI_onGetCustomRow(MesiboScreen screen, MesiboRow row) {
    return null;
}

Return null if you want the mesibo UI to handle initial rendering for you. You can then customize it later in the 'MesiboUI_onUpdateRow' listener function.

MesiboUI_onGetCustomRowHeight (iOS only)

Return the height of the cell if you are creating your custom view as described above.

float MesiboUI_onGetCustomRowHeight(MesiboScreen screen, MesiboRow row) {
    return -1;
}

Return -1 if you are not creating a custom view.

MesiboUI_onUpdateRow

This function will be called after mesibo creates a view for each row. You can then update the view created by the mesibo UI - for example, changing text colors, background color, etc.

The actual message MesiboMessage is passed in row.message. Note that, the message could be a real message or the meta data, for example, date, missed call, custom messages, etc. You can use functions like message.isMessage() or message.isDate() to get the type of message. Refer to the ui-modules source code to learn more about it.

boolean MesiboUI_onUpdateRow(MesiboScreen screen, MesiboRow row, boolean last) {
    
    return true;
}

This function will be called before returning the view created by mesibo UI to the table controller (RecycleView in Android). You can customize it if required. On Android, you can change most of the properties including layout, fonts, colors, etc.

This function may be called multiple times on iOS, to calculate the height in the first iteration (last=false) and then after creating the view(last=true). Since font contributes to the height, you should not change the font if the last variable is true on iOS.

Return true to indicate an update, false otherwise.

MesiboUI_onClickedRow

This function will be called when a row on the messaging or user list screen is clicked. MesiboUI will perform the default action if you return a false value.

boolean MesiboUI_onClickRow(MesiboScreen screen, MesiboRow row) {
    
    return false;
}

Return true to overtake click operation, or return false for default actions.