Engineering 

| 04 April 2016

How to build typing indicator in android/iOS 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. In case, you are planning to build on your own instead, you can try Applozic for free which has all these inbuilt features for your use. However, if 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


TextWatcher’s afterTextChanged method is called to notify you that, somewhere within EditText, the text has been changed.

If a text is changed and

  • length is 1 that means typing is started,

  • length is 0 means typing is stopped.
Sample android code:


Source: Github Applozic Android Chat SDK

Typing status should be stopped ina few others cases like:

    i) If the 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 a publish-subscribe pattern. Let’s understand what is a publish-subscribe pattern..

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

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:

Android code to publish data:

Source: Github Applozic Android Chat SDK

Step 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

More resourceful links:


Find typing indicator code in Applozic open source chat SDK available in GitHub.

for lightweight Android Chat SDK.

for lightweight iOS Chat SDK.

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

Reference:.

Build typing indicator in android

Are you developing chat for your android app?

Add real time chat and messaging into your app in 10 mins with Applozic

See how a real-time chat SDK and API can boost, enhance, and optimize your user experiences.


ana mayer
Devashish Mamgain
</section>

Applozic Chat is easy for
developers, invaluable for
businesses, and addictive for users

See how in-app chat, voice and video messaging can transform your app from ordinary to unforgettable, for any industry and any platform.

Related articles

blog-3

Development

12 min read

What’s New: Product Updates From November 2020 | Applozic

In the month of November, we have released the latest version of iOS SDK. The fastest way to integrate high-quality 1:1 voice and video calls inside your application [...]

ana mayer
Ana Mayer