Using Mesibo UI Modules for Android - Messaging

Estimated reading time: 9 minutes

Mesibo offers ready to use UI components which you can quickly add to your applications. Mesibo UI components are completely customizable as per your needs. On Android, Mesibo UI components are available as Fragments.

There are primarily two types of Mesibo UI components:

  • MesiboUserListFragment, which displays a list of users in different modes. The modes are explained below.

  • MesiboMessagingFragment, which renders all the messages for a particular user or a group

MesiboUserListFragment

MesiboUserListFragment displays a list of users in different modes. You need to pass the desired mode when starting the fragment.

The different modes for MesiboUserListFragment are:

  • MesiboUserListFragment.MODE_MESSAGELIST shows a list of latest messages, one per user, sorted by time

  • MesiboUserListFragment.MODE_SELECTCONTACT shows Mesibo Contact List - a list of Mesibo Users in the application

  • MesiboUserListFragment.MODE_SELECTCONTACT_FORWARD shows a list of users to whom you can forward message(s)

  • MesiboUserListFragment.MODE_SELECTGROUP shows UI for selecting and creating a group

  • MesiboUserListFragment.MODE_EDITGROUP shows UI for editing different attributes of a group such as - Group Member List, Group Profile Picture, Group Title or Group Name

Below are some examples showing how to load MesiboUserListFragment in different modes.

Loading a Message List

Loads a list of latest messages, one per user, sorted by the time

public class ExampleActivity extends AppCompatActivity implements MesiboMessageListFragment.FragmentListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
	setContentView(R.layout.my_layout);
    
	MesiboUserListFragment userListFragment = new MesiboUserListFragment();
	userListFragment.setListener(this);

	Bundle bl = new Bundle();
	bl.putInt(MesiboUserListFragment.MESSAGE_LIST_MODE, MesiboUserListFragment.MODE_MESSAGELIST);
	userListFragment.setArguments(bl);

	FragmentManager fm = getSupportFragmentManager();
	FragmentTransaction ft = fm.beginTransaction();
	ft.replace(R.id.userlist_fragment, userListFragment, "null");
	ft.commit();

    }
}

Loading a Contacts list

Similar to the above example, load the list of all contacts just by changing the mode, a new chat window will be opened when you click on a user or a group.

Bundle bl = new Bundle();
bl.putInt(MesiboUserListFragment.MESSAGE_LIST_MODE, MesiboUserListFragment.MODE_SELECTCONTACT);
userListFragment.setArguments(bl);

Loading a Forward List

Loads a list of users to forward one or more messages. It also shows recently contacted users.

Following are the arguments to forward list

  • MesiboUI.MESSAGE_ID- MESSAGE_ID is the unique ID of each message to be forwarded.
  • MesiboUI.MESSAGE_IDS - Multiple messages can also be forwarded at a time by putting all the message Ids in an array.
  • MesiboUI.MESSAGE_CONTENT- content of a message.
Bundle bl = new Bundle();
bl.putInt(MesiboUserListFragment.MESSAGE_LIST_MODE, MesiboUserListFragment.MODE_SELECTCONTACT_FORWARD);
bl.putString(MesiboUI.MESSAGE_CONTENT, "This is forward message Test");
bl.putBoolean(MesiboUI.FORWARD_AND_CLOSE, false);
userListFragment.setArguments(bl);

Loading Editing a Group

This loads the fragment to edit a group. Group properties such as - Members, group name, etc can be edited from here

Bundle bl = new Bundle();
bl.putInt(MesiboUserListFragment.MESSAGE_LIST_MODE, MesiboUserListFragment.MODE_EDITGROUP);

userListFragment.setArguments(bl);

Loading Select a Group

This loads the fragment to select a group.

Bundle bl = new Bundle();
bl.putInt(MesiboUserListFragment.MESSAGE_LIST_MODE, MesiboUserListFragment.MODE_SELECTGROUP);

userListFragment.setArguments(bl);

MesiboMessagingFragment

MesiboMessagingFragment renders all the messages for a particular user or a group. All you have to go is to pass the user address or the group ID. It will read all the messages from the database and display them. It will also listen to new real-time messages and display them as and when received.

Using MesiboMessagingFragment

Load MesiboMessagingFragment from your activity by passing MesiboUI.PEER or MesiboUI.GROUP_ID in a bundle.

  • MesiboUI.PEER - User Address
  • MesiboUI.GROUP_ID - Group id

You can also pass additional arguments if requires:

  • MesiboMessagingFragment.READONLY - This is a boolean argument. Pass true to hide the interface to send messages, making the window read-only.

  • MesiboMessagingFragment.SHOWMISSEDCALLS - Pass true if you want to display the alert for missed calls. Default true.


MesiboMessagingFragment mFragment = new MesiboMessagingFragment();

Bundle bl = new Bundle();
bl.putString(MesiboUI.PEER, "+15675551234");
bl.putLong(MesiboUI.GROUP_ID, 0);
mFragment.setArguments(bl);

getSupportFragmentManager().beginTransaction()
	.add(R.id.fragment_container, mFragment).commit();

Customizing Message Rendering

In the above example, MesiboMessagingFragment renders all the messages using a default layout. Although the default layout beautifully meets the requirements of the most, it also allows you to customize each and every message if requires.

There are essentially three basic elements that form a chat window are

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

  • Outgoing chat view 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 incoming chat view but additinally shows message status.

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

By default, MesiboMessagingFragment renders using a default layout. However, you can instruct MesiboMessagingFragment to let you ask before rendering the message. So if you decide to take over the rendering of a particular message(s), MesiboMessagingFragment will let you render them instead of handling itself. And this is very easy, all you have to do is to listen to MesiboRecycleViewHolder listener as explained below:

public class MessagingUiFragment extends MesiboMessagingFragment implements MesiboRecycleViewHolder.Listener {
	
	@Override
	public int Mesibo_onGetItemViewType(Mesibo.MessageParams messageParams, String message) {

		return MesiboRecycleViewHolder.TYPE_NONE;
	}

	@Override
	public MesiboRecycleViewHolder Mesibo_onCreateViewHolder(ViewGroup viewGroup, int viewType) {
			return null;
	}

	@Override
	public void Mesibo_onBindViewHolder(MesiboRecycleViewHolder mesiboRecycleViewHolder, int viewType, boolean selected, Mesibo.MessageParams messageParams, Mesibo.MesiboMessage mesiboMessage) {

	}

	@Override
	public void Mesibo_UpdateViewHolder(MesiboRecycleViewHolder mesiboRecycleViewHolder, Mesibo.MesiboMessage mesiboMessage) {

	}

	@Override
	public void Mesibo_onViewRecycled(MesiboRecycleViewHolder mesiboRecycleViewHolder) {

	}
}

As you can notice, above methods are very similar to RecyclerView adapter methods. Now, we will look into each of these methods.

Mesibo_onGetItemViewType

You need to return the type of the message if you are handling the message. return TYPE_NONE otherwise.

if (messageParams.isIncoming()) {
	return MesiboRecycleViewHolder.TYPE_INCOMING;
}

return MesiboRecycleViewHolder.TYPE_OUTGOING;

Mesibo_onCreateViewHolder

Mesibo UI will call this function with each message. If you plan to render that message yourself, you need to return a view holder derived from MesiboRecycleViewHolder. If not, return null for the default rendering.

if (MesiboRecycleViewHolder.TYPE_INCOMING == type) {
	View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.incoming_chat_layout, viewGroup, false);

	return new IncomingMessgaeViewHolder(v);

}

return null;

Mesibo_onBindViewHolder()

This method binds the returned view with the message content.

if (MesiboRecycleViewHolder.TYPE_INCOMING == type) {

	IncomingMessgaeViewHolder IncomingView = (IncomingMessgaeViewHolder) mesiboRecycleViewHolder;
	IncomingView.mIncomingMessageTV.setText(Html.fromHtml(mesiboMessage.message));

}

Creating the ViewHolder

Below is a sample view holder extending MesiboRecycleViewHolder

public class IncomingMessgaeViewHolder extends MesiboRecycleViewHolder {
	View mViewIncomingMessage;
	...

	public IncomingMessgaeViewHolder(View v) {
		super(v);
		mIncomingMessageTV = v.findViewById(R.id.textview_message);
		mViewIncomingMessage = v;
	}
}
open, source, on-premise, messaging, chat, voice, video