Android Typing Indicator

We have seen Typing Indicators in various apps like Facebook, Instagram, Messenger, Twitter, etc. If we want to make a chat app then typing indicator is one of the features, we want in our app. it will help to achieve a better UI.

To learn its implementation, let's add an Android Typing Indicator in our android app.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to set up Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click on Next.

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we will use Java for this tutorial), and the minimum SDK(we are using API 19: Android 4.4 (KitKat))

4. Next click on the Finish button after filling in the above details.

5. Now, wait for the project to finish building.

Step 2: Adding the dependency

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "sync Now" show at the top.

dependencies
{
//Adding typing indicator 
 implementation 'com.qifan.typingIndicator:typingIndicator:0.1.0'
}

Step 3: UI Part

Before applying any changes to the activity_main.xml file, we need a round rectangle image as typing indicator background, you can download any round rectangle images and put the image in the app -> res -> drawable, and give it a suitable name.

Now, go to app -> res -> layout -> activity_main.xml and add ChatTypingIndicatorView and change the background color of RelativeLayout to #2d2d2d as shown below.

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2d2d2d"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">
    <!-- typing indicator -->
    <com.qifan.library.ChatTypingIndicatorView
        android:backgroundTint="#ffff"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:id="@+id/oklIndicatorView"
        android:layout_width="160dp"
        android:layout_height="80dp"
        android:minHeight="40dp"
        android:padding="12dp"
        android:background="@drawable/round_rect"
        app:dotSize="12dp" />
</RelativeLayout>

Step 4: Coding Part

Open MainActivity.java file then create and initialize the ChatTypingIndicatorView object oklChatIndicatorView, and then call the startDotAnimation using the object. code of the MainActivity.java is shown below:

package com.studytonight.project;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import com.qifan.library.ChatTypingIndicatorView;
public class MainActivity extends AppCompatActivity {

    ChatTypingIndicatorView oklChatIndicatorView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        oklChatIndicatorView=(ChatTypingIndicatorView)findViewById(R.id.oklIndicatorView); 
        oklChatIndicatorView.startDotAnimation();
    }
}

Output:

In the below snapshots, you can see how ChatTypingIndicatorView will look in the android application.

When App is opened for the first time: