Animación de marcador de posición de contenido usando Shimmer en Android – Part 1

Hemos visto un diseño único para la pantalla de carga que se ve en Facebook con fines de carga y también se usa para mostrar el marcador de posición de contenido con el fin de cargar. GitHub proporciona este tipo de marcador de posición de carga y se ve mejor que la barra de progreso normal. En este artículo, veremos la implementación de Content Placeholder usando la animación Shimmer en Android. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que cargaremos datos desde una URL en formato JSON y durante el proceso de carga, mostraremos un diseño brillante para la carga.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Agregar dependencia para usar el diseño de Facebook Shimmer 

Vaya a la aplicación > Gradle Scripts > archivo build.gradle y agréguele la siguiente dependencia. 

// la línea de abajo se usa para la biblioteca volley

implementación ‘com.android.volley:volley:1.1.1’

// la línea de abajo se usa para la biblioteca de carga de imágenes

implementación ‘com.squareup.picasso:picasso:2.71828’  

// dependencia para usar el diseño de brillo de Facebook.

implementación ‘com.facebook.shimmer:shimmer:0.5.0’

Ahora sincroniza tu proyecto y muévete hacia tu archivo XML. 

Paso 3: Agregar permisos para Internet en Android

Vaya a la aplicación > AndroidManifest.xml y agréguele permisos para Internet mientras cargamos datos de Internet. 

<uses-permission android:name="android.permission.INTERNET"/>

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!-- Card view for displaying our card-->
    <androidx.cardview.widget.CardView
        android:id="@+id/idCVCourse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:elevation="10dp"
        android:visibility="gone"
        app:cardCornerRadius="8dp">
  
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
  
            <!--Image view for displaying our image-->
            <ImageView
                android:id="@+id/idIVCourse"
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:layout_margin="5dp" />
  
            <!--Text view for displaying our course name-->
            <TextView
                android:id="@+id/idTVCourseName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:padding="5dp"
                android:text="Course Name "
                android:textColor="@color/black"
                android:textSize="18sp"
                android:textStyle="bold" />
  
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="horizontal"
                android:weightSum="2">
  
                <!--Text view for displaying our batch-->
                <TextView
                    android:id="@+id/idTVBatch"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:text="Batch"
                    android:textColor="@color/black" />
  
                <!--Text view for displaying our tracks.-->
                <TextView
                    android:id="@+id/idTVTracks"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:padding="5dp"
                    android:text="Tracks"
                    android:textColor="@color/black" />
  
            </LinearLayout>
  
        </LinearLayout>
  
    </androidx.cardview.widget.CardView>
      
    <!--below is the view for our shimmer-->
    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:animateLayoutChanges="true"
        android:animationCache="true"
        app:shimmer_repeat_mode="restart"
        app:shimmer_shape="radial">
  
        <!--For shimmer we are creating a same layout 
            but setting its background as a gray colour and
            not providing any view inside it-->
        <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:elevation="10dp"
            android:visibility="visible"
            app:cardCornerRadius="8dp">
  
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">
  
                <!--Image view for displaying our image-->
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="300dp"
                    android:layout_margin="5dp"
                    android:background="#B3B3B3" />
  
                <!--Text view for displaying our course name-->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:background="#B3B3B3"
                    android:padding="5dp"
                    android:textColor="@color/black"
                    android:textSize="18sp"
                    android:textStyle="bold" />
  
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:orientation="horizontal"
                    android:weightSum="2">
  
                    <!--Text view for displaying our batch-->
                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="#B3B3B3"
                        android:padding="5dp"
                        android:textColor="@color/black" />
  
                    <!--Text view for displaying our tracks.-->
                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:background="#B3B3B3"
                        android:padding="5dp"
                        android:textColor="@color/black" />
  
                </LinearLayout>
  
            </LinearLayout>
  
        </androidx.cardview.widget.CardView>
          
    </com.facebook.shimmer.ShimmerFrameLayout>
  
</RelativeLayout>

Paso 5: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
  
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import com.facebook.shimmer.ShimmerFrameLayout;
import com.squareup.picasso.Picasso;
  
import org.json.JSONException;
import org.json.JSONObject;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our textview,
    // imageview, cardview and progressbar.
    private TextView courseNameTV, courseTracksTV, courseBatchTV;
    private ImageView courseIV;
    private CardView courseCV;
      
    // variable for our shimmer frame layout
    private ShimmerFrameLayout shimmerFrameLayout;
      
    // below line is the variable for url from
    // where we will be querying our data.
    String url = "https://jsonkeeper.com/b/63OH";
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our shimmer layout.
        shimmerFrameLayout = findViewById(R.id.shimmerLayout);
          
        // on below line we are 
        // starting our shimmer layout.
        shimmerFrameLayout.startShimmer();
          
        // in below line we are 
        // initializing our all views.
        courseCV = findViewById(R.id.idCVCourse);
        courseNameTV = findViewById(R.id.idTVCourseName);
        courseTracksTV = findViewById(R.id.idTVTracks);
        courseBatchTV = findViewById(R.id.idTVBatch);
        courseIV = findViewById(R.id.idIVCourse);
         
        // creating a new variable for our request queue
        RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                // inside the on response method.
                // in below line we are making our card
                // view visible after we get all the data.
                // on below line we are making our shimmer
                // layout visibility to gone.
                // on below line we are stopping our shimmer.
                shimmerFrameLayout.stopShimmer();
                courseCV.setVisibility(View.VISIBLE);
                try {
                    // now we get our response from API in json object format.
                    // in below line we are extracting a string with its key
                    // value from our json object.
                    // similarly we are extracting all the strings from our json object.
                    String courseName = response.getString("courseName");
                    String courseTracks = response.getString("courseTracks");
                    String courseMode = response.getString("courseMode");
                    String courseImageURL = response.getString("courseimg");
  
                    // after extracting all the data we are
                    // setting that data to all our views.
                    courseNameTV.setText(courseName);
                    courseTracksTV.setText(courseTracks);
                    courseBatchTV.setText(courseMode);
  
                    // we are using picasso to load the image from url.
                    Picasso.get().load(courseImageURL).into(courseIV);
                } catch (JSONException e) {
                    // if we do not extract data from json object properly.
                    // below line of code is use to handle json exception
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            // this is the error listener method which
            // we will call if we get any error from API.
            @Override
            public void onErrorResponse(VolleyError error) {
                // below line is use to display a toast message along with our error.
                Toast.makeText(MainActivity.this, "Fail to get data..", Toast.LENGTH_SHORT).show();
            }
        });
        // at last we are adding our json
        // object request to our request
        // queue to fetch all the json data.
        queue.add(jsonObjectRequest);
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: