ShimmerLayout en Android con ejemplos

ShimmerLayout se puede usar para agregar un efecto de brillo (como el de Facebook o LinkedIn ) a la aplicación de Android. Este diseño se usa principalmente cuando una aplicación obtiene datos de la API, pero la tarea es una tarea de ejecución prolongada. Por lo tanto, es mejor agregar ShimmerLayout en lugar de mostrar la pantalla en blanco, ya que notifica al usuario que el diseño está en estado de carga.

ventajas:

• ShimmerLayout es eficiente en memoria.
• Se puede personalizar según la necesidad de la aplicación.

Desventaja:

• Está en desuso.

Acercarse:

1. Agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias. Permite al desarrollador usar la función incorporada directamente.

   dependencies {            implementation 'io.supercharge:shimmerlayout:2.1.0' }

2. Cree el archivo circle.xml en la carpeta dibujable y agregue el siguiente código. Esto se usará en ShimmerLayout junto con la vista de texto.

   circulo.xml

   <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">     <size         android:height="40dp"         android:width="40dp"/>     <corners android:radius="20dp"/>     <solid android:color="#D3D3D3"/> </shape>

3. Agregue el siguiente código en el archivo activity_main.xml . En este archivo, agregue ShimmerLayout y su vista secundaria. Agregue circle.XML en la etiqueta src en ImageView.

   actividad_principal.xml

   <io.supercharge.shimmerlayout.ShimmerLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:id="@+id/shimmer_layout"     android:layout_width="match_parent"     android:layout_height="wrap_content"     app:shimmer_animation_duration="2000">     <LinearLayout         android:layout_width="match_parent"         android:layout_height="match_parent"         android:orientation="vertical">         <LinearLayout             android:layout_marginTop="5dp"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="horizontal">             <ImageView                 android:layout_marginStart="10dp"                 android:src="@drawable/circle"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:layout_marginEnd="10dp"                 />             <TextView                 android:layout_marginEnd="10dp"                 android:layout_width="match_parent"                 android:layout_height="40dp"                 android:gravity="center"                 android:background="#D3D3D3"                 android:textSize="26sp"/>         </LinearLayout>         <LinearLayout             android:layout_marginTop="10dp"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="horizontal">             <ImageView                 android:layout_marginStart="10dp"                 android:src="@drawable/circle"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:layout_marginEnd="10dp"                 />             <TextView                 android:layout_marginEnd="10dp"                 android:layout_width="match_parent"                 android:layout_height="40dp"                 android:gravity="center"                 android:background="#D3D3D3"                 android:textSize="26sp"/>         </LinearLayout>         <LinearLayout             android:layout_marginTop="10dp"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="horizontal">             <ImageView                 android:layout_marginStart="10dp"                 android:src="@drawable/circle"                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:layout_marginEnd="10dp"                 />             <TextView                 android:layout_marginEnd="10dp"                 android:layout_width="match_parent"                 android:layout_height="40dp"                 android:gravity="center"                 android:background="#D3D3D3"                 android:textSize="26sp"/>         </LinearLayout>     </LinearLayout> </io.supercharge.shimmerlayout.ShimmerLayout>

4. Agregue el siguiente código en el archivo MainActivity.java . En este archivo, el método startShimmerAnimation se usa para iniciar la animación en ShimmerLayout.

   MainActivity.java

   package org.geeksforgeeks.shimmerLayout;    import android.os.Bundle; import android.view.View; import android.widget.Button; import androidx.annotation.Nullable; import androidx.appcompat.app.AppCompatActivity; import io.supercharge.shimmerlayout.ShimmerLayout;    public class MainActivity     extends AppCompatActivity {        @Override     protected void onCreate(         @Nullable Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);            ShimmerLayout layout = findViewById(             R.id.shimmer_layout);         layout.startShimmerAnimation();     } }

Producción:

Referencia: https://github.com/team-supercharge/ShimmerLayout