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 an indicator_background.xml in a drawable folder and add the following code.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Make the corners 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.
<?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.
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 the user clicks on the "Message Received" button
// this function gets invoked automatically.
message.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Hide the indicator view
indicatorView.setVisibility(View.INVISIBLE);
}
});
}
}