Efecto Shimmer en Android

El efecto de brillo fue creado por Facebook para indicar la carga de datos en páginas donde se cargan datos desde internet. Esto se creó como una alternativa para la ProgressBar existente y el cargador habitual para proporcionar una mejor experiencia al usuario con la interfaz de usuario.

Comencemos para ver cómo podemos implementarlo. Aquí, voy a usar SUSI.AI (una aplicación de asistente inteligente) como una aplicación de referencia para mostrar una demostración de código. Estoy trabajando en este proyecto durante mi período de GSoC y, mientras trabajaba, encontré la necesidad de implementar esta función en muchos lugares. Así que escribo este blog para compartir mi experiencia con cómo lo implementé en la aplicación.

En primer lugar, debemos agregar la dependencia de brillo en el archivo Gradle de nivel de la aplicación.

Ahora, necesitamos crear un diseño de marcador de posición simplemente utilizando vistas. Este marcador de posición debe parecerse al diseño real. Por lo general, se prefiere el color gris en el fondo del marcador de posición. Un marcador de posición no debe tener ningún texto escrito. Solo debe ser visible. Consideremos el marcador de posición utilizado en SUSI.

Ahora echemos un vistazo a los elementos reales cuyos marcadores de posición hemos creado.

Ahora, después de la creación del marcador de posición, debemos agregar este marcador de posición en el archivo de diseño principal. Se hace de la siguiente manera:

Aquí, he agregado los marcadores de posición 6 veces para que toda la pantalla quede cubierta. Puedes agregarlo tantas veces como desees.

La siguiente y última tarea es comenzar y detener el efecto de brillo según la lógica del código. Aquí, el brillo comienza tan pronto como se crea el fragmento y se detiene cuando los datos se cargan correctamente desde el servidor. Echa un vistazo a cómo crear la referencia.

En primer lugar, necesitamos crear una referencia al brillo. Luego, usamos esta referencia para iniciar/detener el efecto de brillo. Aquí, en Kotlin, podemos usar directamente el ID utilizado en el diseño sin crear ninguna referencia.

Iniciamos el efecto de brillo simplemente usando la función startShimmer() en la referencia del brillo.