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.w3wiki.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);
}
});
}
}