Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Implement a Typing Indicator in Your Android Chat App?

DZone's Guide to

How to Implement a Typing Indicator in Your Android Chat App?

Creating a chat app? Find out how to provide your users with feedback when a response is being typed.

· Mobile Zone
Free Resource

Image title

“Clement is typing…”

Have you ever kept staring at your mobile screen waiting for the other person’s reply while he or she is typing…

With the rise of instant chat, we see this daily in one platform or the other. A typing indicator makes you aware that the other person is responding to your message.

You are 3 steps away to implementing a  typing indicator in your chat app, and they are below:

  1. Attach a text change listener to the TextView.
  2. Publish and subscribe to the typing status of the user
  3. 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


Tying status should be stopped in few others cases like:

i) If app goes to background,

ii) EditText loses focus, or

iii) Typed text length remains same for some time duration.


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 the publish-subscribe pattern. Let me explain 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.

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.

For this tutorial, we will use RabbitMQ.



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.ioMosquitto.org, and  RabbitMQ.

Run RabbitMQ MQTT Adapter on your server.

On Android, use the Eclipse Paho library to create an MQTT client.

org.eclipse.paho.android.service1.0.2.jar

org.eclipse.paho.client.mqttv3-1.0.2.jar

The above 2 versions for the Eclipse Paho Android client can be found here: https://github.com/AppLozic/Applozic-Android-SDK/tree/master/mobicomkit/libs

Android code to publish data:

Source: Github Applozic Android Chat SDK

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);


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) throws Exception {

Log.i(TAG, “Received MQTT message: ” + newString(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.

      }

}



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

For iOS, you can use MQTT Client Framework for sending and receiving data from devices.

Reference:

http://www.slate.com/articles/technology/bitwise/2014/02/typing_indicator_in_chat_i_built_it_and_i_m_not_sorry.html

Topics:
typing ,chat ,android ,messaging ,mqtt

Published at DZone with permission of Devashish Mamgain. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}