Tutorial explaining how to build typing indicator in a Chat app with sample code from Applozic https://www.applozic.com

1. How to implement typing indicator in android?
“Clement is typing…”
- Have you ever kept staring at your mobile screen waiting for the other
person’s reply while she is typing...
With the rise of instant chat, we see this daily in one platform or the other. Typing indicator
makes you aware that the other person is responding to your message.
You are 3 steps away to implement typing indicator in your chat app and they are below:
1. Attach a text change listener to the text view.
2. Publish and subscribe typing status of the user
3. Update typing status real time on UI
Step 1: Attach a text change listener

2. TextWatcher’s afterTextChanged method is called to notify you that, somewhere within EditText,
the text has been changed.
If text is changed and
length is 1 that means typing is started,
length is 0 means typing is stopped.
Sample android code:
messageEditText.addTextChangedListener(new TextWatcher() {
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
public void afterTextChanged(Editable s) {
if (!TextUtils.isEmpty(s.toString()) && s.toString().trim().length() == 1) {
//Log.i(TAG, "typing startedevent...");
typingStarted = true;
//send typing started status
} else if (s.toString().trim().length() == 0 && typingStarted) {
//Log.i(TAG, "typing stopped event...");
typingStarted = false;
//send typing stopped status
}
}

3. });
Source: https://github.com/AppLozic/Applozic-Android-
SDK/blob/09334e9e891b80d143886cb0047c679f00e07a6c/mobicomkitui/src/main/java/co
m/applozic/mobicomkit/uiwidgets/conversation/fragment/MobiComConversationFragment.ja
va
Step 2: Publish and subscribe typing status of the user
It is time to send and receive typing status to the other device. This can be implemented
using publish-subscribe pattern. Let’s understand what is publish-subscribe pattern.
publish–subscribe is a messaging pattern where senders of messages, called publishers, do not
program the messages to be sent directly to specific receivers, called subscribers, but instead
characterize published messages into classes without knowledge of which subscribers, if any, there
may be. Similarly, subscribers express interest in one or more classes and only receive messages
that are of interest, without knowledge of which publishers, if any, there are.
Now, all we have to do is:
Subscribe user A’s app to a topic “/topic/user-a”, user B’s app to a topic “/topic/user-b” and
publish the typing status to receiver’s topic.
User A User B
Subscribe /topic/user-a /topic/user-b
Publish /topic/user-b /topic/user-a
Typing started 1 1
Typing stopped 0 0
In order to send data from one device to another device in real time, we will require a socket
based connection. There are many options available like Socket.io, Mosquitto.org,
RabbitMQ.
For this tutorial, we will use RabbitMQ.

4. Run RabbitMQ MQTT Adapter on your server.
On android, use the eclipse paho library to create mqtt client.
org.eclipse.paho.android.service-1.0.2.jar
org.eclipse.paho.client.mqttv3-1.0.2.jar
Above 2 versions can be found here: https://github.com/AppLozic/Applozic-Android-
SDK/tree/master/mobicomkit/libs
Android code to publish data:
MqttClient client = new MqttClient(MQTT_URL, userId + "-" + new Date().getTime(),
new MemoryPersistence()
);
MqttMessage message = new MqttMessage();
message.setRetained(false);
message.setPayload(typingStatus).getBytes());
message.setQos(0);
client.publish("topic/" + userId, message);
client.subscribe("topic/" + userB, 0);
Source: https://github.com/AppLozic/Applozic-Android-
SDK/blob/09334e9e891b80d143886cb0047c679f00e07a6c/mobicomkit/src/main/java/com/
applozic/mobicomkit/api/ApplozicMqttService.java
Step 3: Update typing status real time on UI
At the receiver’s end, upon receiving typing status, show and hide the typing indicator
accordingly.
Below is the android code to receive the typing status

5. @Override
public void messageArrived(String s,final MqttMessage mqttMessage) throws
Exception {
Log.i(TAG, "Received MQTT message: " + new String(mqttMessage.getPayload()));
try {
if (!TextUtils.isEmpty(s) && s.startsWith(TYPINGTOPIC)) {
String typingResponse = mqttMessage.toString();
// Broadcast typing status to the current activity/fragment and display the typing
label.
}
}

6. More resourceful links:
Find typing indicator code in Applozic open source chat sdk available in github.
https://github.com/AppLozic/Applozic-Android-SDK for light weight Android Chat SDK
https://github.com/AppLozic/Applozic-iOS-SDK for light weight iOS Chat SDK
On iOS, you can use MQTT Client Framework for sending and receiving data from devices.
Source: http://www.applozic.com/blog/how-to-implement-typing-indicator-in-android-chat-
app/

7. Reference:
http://www.slate.com/articles/technology/bitwise/2014/02/typing_indicator_in_chat_i_built_it
_and_i_m_not_sorry.html
https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern