Indicador de escritura en Android

El indicador de escritura se ha visto en varias aplicaciones como Instagram, Facebook Messenger y muchas más. Para crear una aplicación de chat, el indicador de escritura ayudará a lograr una mejor interfaz de usuario. También se puede crear un indicador de escritura en la aplicación, pero para eso, tenemos que diseñar un diseño para él, y también tenemos que cuidar la animación del indicador y la diferencia de color entre los indicadores. Por lo tanto, es mejor agregar una dependencia y ahorra mucho tiempo.

Acercarse

• Paso 1: agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias.

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

• Paso 2: cree un indicador_fondo.xml en una carpeta dibujable y agregue el siguiente código.

  indicador_fondo.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>

• Paso 3: agregue el siguiente código en el archivo activity_main.xml . En este archivo, agregue ChatTypingIndicatorView al diseño y agregue el indicador_fondo al fondo de ChatTypingIndicatorView .

  actividad_principal.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>

• Paso 4: agregue el siguiente código en el archivo MainActivity.java . En este archivo agregue setOnClickListner()al botón que ocultará el indicador de mensaje.

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

Salida: ejecutar en el emulador