Typing Indicator in Android

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.

Approach

• 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.
  indicator_background.xml

  <?xml version="1.0" encoding="utf-8"?>
  <shape
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
      <!-- It make the corner round -->
      <corners android:radius="20dp"/>
      <!-- Add color to the background -->
      <solid android:color="#ACACAC"/>
  </shape>
• 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.
  
  activity_main.xml

  <?xml version="1.0" encoding="utf-8"?>
  <androidx.constraintlayout.widget.ConstraintLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context=".MainActivity"
      android:orientation="vertical">
  
      <com.qifan.library.ChatTypingIndicatorView
          android:id="@+id/indicatorView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:minHeight="36dp"
          android:padding="10dp"
          android:background="@drawable/indicator_background"
          app:dotSize="10dp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintLeft_toLeftOf="parent"
          app:layout_constraintRight_toRightOf="parent"
          app:layout_constraintTop_toTopOf="parent"/>
  
      <Button
          android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_marginBottom="192dp"
          android:text="Message Received"
          android:textAllCaps="false"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintHorizontal_bias="0.498"
          app:layout_constraintStart_toStartOf="parent" />
  
  </androidx.constraintlayout.widget.ConstraintLayout>
• Step 4: Add the following code in MainActivity.java file. In this file add setOnClickListener() to the button which will hide the message indicator.
  
  MainActivity.java

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

Output: Run on Emulator