Skip to content
Related Articles

Related Articles

Typing Indicator in Android
  • Difficulty Level : Medium
  • Last Updated : 27 Aug, 2020

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.

typing-indicator

Approach

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

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

    indicator_background.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout
        xmlns:tools="http://schemas.android.com/tools"
        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>

    chevron_right

    
    

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

    MainActivity.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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 
            // automaicaly.
            message.setOnClickListener(
                    new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // hide the indicator view
                    indicatorView.setVisibility(
                                  View.INVISIBLE);
                }
            });
        }
    }

    chevron_right

    
    

Recommended Articles
Page :