Open In App

Typing Indicator in Android

Last Updated : 14 Nov, 2022
Like Article

Typing Indicator has been seen on various apps like Instagram, Facebook Messenger, and many more. To build a chat app Typing Indicator will help to achieve a better user interface. One can also create a Typing Indicator in the app but for that, we have to design a layout for it, and also we have to take care of indicator animation and the color difference between Indicators. So it is better to add a dependency and it saves a lot of time.



  • Step 1: Add the support library in build.gradle file and add dependency in the dependencies section.

    implementation 'com.qifan.typingIndicator:typingIndicator:0.1.0'      


  • Step 2: Create a indicator_background.xml in drawable folder and add the following code.


    <?xml version="1.0" encoding="utf-8"?>
        <!-- It make the corner round --> 
        <corners android:radius="20dp"/>
        <!-- Add color to the background --> 
        <solid android:color="#ACACAC"/>


  • Step 3: Add the following code in activity_main.xml file. In this file add ChatTypingIndicatorView to the layout and add the indicator_background to the background of ChatTypingIndicatorView.


    <?xml version="1.0" encoding="utf-8"?>
            android:text="Message Received"
            app:layout_constraintStart_toStartOf="parent" />


  • Step 4: Add the following code in file. In this file add setOnClickListener() to the button which will hide the message indicator.

    package org.geeksforgeeks.messageIndicator;          
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import androidx.annotation.Nullable;
    import com.qifan.library.ChatTypingIndicatorView;
    public class MainActivity extends AppCompatActivity {
        Button message;
        ChatTypingIndicatorView indicatorView;
        protected void onCreate(@Nullable Bundle savedInstanceState) {
            message = findViewById(;
            indicatorView = findViewById(;
            // whenever user clicks on the Message Received 
            // button this function get invoked 
            // automatically.
                    new View.OnClickListener() {
                public void onClick(View v) {
                    // hide the indicator view


Similar Reads