Generalidades

Efecto Shimmer en Android. ¡Hola a todos! Hoy lo haré… | de Yunus Emre Arslan | Mayo de 2021

Yunus Emre Arslan

Hola a todos 👋🏻! Hoy te voy a mostrar cómo usar eso. «Efecto brillo» en tus proyectos de Android. Antes de comenzar, para aquellos que no saben qué es Shimmer, hay una forma más eficiente y amigable de UX de mostrarle al usuario que una carga está en progreso. Por lo general, se prefiere para los elementos de la lista, como puede ver a continuación:

1*Tu5jffgXlt aP uVPKqKng
Efecto brillo

Ahora veamos cómo se debe implementar usando un ejemplo.

Usaremos una biblioteca de terceros para Shimmer proporcionada por Facebook.

Si quieres probarlo, haz clic aquí.

Primero, Agreguemos la dependencia relacionada a la nuestra app/build.gradle Archivo.

implementation 'com.facebook.shimmer:shimmer:0.5.0'

Nuestra aplicación realiza una llamada API falsa y obtiene una lista. Luego, la lista se muestra en un RecyclerView. Al obtener la lista, le mostramos al usuario el efecto de brillo.

De hecho, implementar el efecto de brillo es bastante sencillo. Todo lo que tenemos que hacer, después de implementar nuestro diseño de fila de lista, es simplemente clonar ese diseño con solo una pequeña diferencia (lo que le da a cada vista infantil un color de fondo más oscuro) y eso es todo.

Hagamos uno realmente simple row_user_list para nuestro RecyclerView.

Esto debería servir al propósito. Ahora creemos el nuestro row_user_list_shimmer.

Aquí está el color de fondo que estoy usando

<color name="shimmerColor">#C2C2C2</color>

Ahora creemos nuestra pantalla. Nuestra activity_main.xml El archivo contiene un RecyclerView y ShimmerFrameLayout.

Lo que estamos haciendo aquí es simplemente agregar cuántas líneas de brillo queremos mostrar en ShimmerFrameLayout. Lo trataremos como una vista de progreso ordinaria a partir de ahora.

Ahora hagamos una llamada API falsa para obtener a los usuarios. Aquí voy a usar corrutinas para el efecto de llamada a la API para no exceder el alcance de este artículo.

Ahora implementemos un RecyclerViewAdapter realmente simple para nuestra lista.

Estamos todos listos 💪. Veamos cómo ajustar el brillo mediante programación. Solo tenemos que llamar startShimmer() y stopShimmer() donde sea necesario.

En este proyecto, estoy usando la clase Resource Sealed, que es muy útil y bastante compatible con el patrón de diseño MVVM.

Ahora podemos realizar las operaciones asociadas mientras observamos nuestro objeto LiveData desde MainActivity.

Una vez que todo esté configurado, nuestra aplicación se vería así:

Eso es, chicos. Esta es la forma más sencilla de demostrar cómo utilizar el efecto de brillo. Por supuesto, puedes hacer otros mucho mejores, solo continúa 🙌.

Por si acaso, puede acceder a todo el código fuente utilizando el enlace a continuación:

Nos vemos en la próxima 👋🏻

LEER  Crea una aplicación de chat con React Native | Autor: Abdul vlog | Agosto de 2021

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba