How to see what a user is typing in an Android chat app

“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:

Attach a text change listener to the text view.
Publish and subscribe typing status of the user
Update typing status real time on UI

Step 1: Attach a text change listener

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 started event…”);

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

}

});

Source: Github Applozic Android Chat SDK

Le statut de frappe doit être arrêté dans quelques autres cas comme:

i) Si l'app passe en arrière-plan,

ii) EditText perd le focus, ou

iii) La longueur du texte tapé reste la même pendant une certaine durée.

Etape 2 : Publier et abonner le statut de frappe de l'utilisateur

Il est temps d'envoyer et de recevoir le statut de frappe à l'autre appareil. Cela peut être mis en œuvre en utilisant le pattern publish-subscribe. Comprenons ce qu'est le pattern publish-subscribe.

publish-subscribe est un pattern de messagerie où les expéditeurs de messages, appelés éditeurs, ne programment pas les messages pour qu'ils soient envoyés directement à des récepteurs spécifiques, appelés abonnés, mais caractérisent les messages publiés en classes sans savoir quels abonnés, le cas échéant, il peut y avoir. De même, les abonnés expriment leur intérêt pour une ou plusieurs classes et ne reçoivent que les messages qui les intéressent, sans savoir quels éditeurs, s'il y en a, existent.

Source : Wikipedia

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

/topic/user-a

/topic/user-b

Publish

/topic/user-b

/topic/user-a

Typing started

Typing stopped

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.

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 for eclipse paho android client 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: Github Applozic Android Chat SDK

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

@Override

public void messageArrived(String s,final MqttMessage mqttMessage) throwsException {

Log.i(TAG, “Received MQTT message: ” + newString(mqttMessage.getPayload()));

….

if (!TextUtils.isEmpty(s) && s.startsWith(TYPINGTOPIC)) {

String typingResponse = mqttMessage.toString();

// Broadcast typing status to the current activity/fragment and display the typing label.

}

…

}