Animación de marcador de posición de contenido usando Shimmer en Android con RecyclerView

Hemos visto la implementación de Content Placeholder Animation usando Shimmer en Android para una vista simple. En este artículo, veremos cómo implementar la animación de marcador de posición de contenido usando Shimmer en Android con RecyclerView . 

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

Construiremos una aplicación simple en la que simplemente mostraremos datos en nuestro RecyclerView de Android desde nuestra API. Con el fin de cargar datos, mostraremos un marcador de posición de contenido con el fin de cargar. qué

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: Crear una clase modal para almacenar nuestros datos

Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre CourseModal y agréguele el siguiente código.

public class CourseModal {
    // variables for our course
    // name and description.
    private String courseName;
    private String courseimg;
    private String courseMode;
    private String courseTracks;
  
    public String getCourseName() {
        return courseName;
    }
  
    public void setCourseName(String courseName) {
        this.courseName = courseName;
    }
  
    public String getCourseimg() {
        return courseimg;
    }
  
    public void setCourseimg(String courseimg) {
        this.courseimg = courseimg;
    }
  
    public String getCourseMode() {
        return courseMode;
    }
  
    public void setCourseMode(String courseMode) {
        this.courseMode = courseMode;
    }
  
    public String getCourseTracks() {
        return courseTracks;
    }
  
    public void setCourseTracks(String courseTracks) {
        this.courseTracks = courseTracks;
    }
  
    public CourseModal(String courseName, String courseimg, String courseMode, String courseTracks) {
        this.courseName = courseName;
        this.courseimg = courseimg;
        this.courseMode = courseMode;
        this.courseTracks = courseTracks;
    }
}

Paso 5: crear un archivo de diseño para el elemento de nuestro RecyclerView en Android

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en él > Nuevo > archivo de recursos de diseño y asígnele el nombre curso_rv_elemento y agréguele el siguiente código.  

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:elevation="8dp"
    app:cardCornerRadius="8dp">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
  
        <!--ImageView to display our course image-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_margin="5dp" />
  
        <!--text view for 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 our batch name-->
            <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 to display course 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>

Paso 6: crear un archivo de diseño para nuestro diseño de brillo

Navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él> Nuevo> archivo de recursos de diseño y asígnele el nombre shimmer_layout y agregue el código a continuación. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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_margin="2dp"
                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_margin="2dp"
                android:layout_weight="1"
                android:background="#B3B3B3"
                android:padding="5dp"
                android:textColor="@color/black" />
  
        </LinearLayout>
  
    </LinearLayout>
  
</androidx.cardview.widget.CardView>

Paso 7: 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">
  
    <!--recycler view to display our data-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVCourses"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />
  
    <!--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-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
              
            <!--below we are displaying multiple
                shimmer layouts using include
                to show them in list format-->
            <include layout="@layout/shimmer_layout" />
            <include layout="@layout/shimmer_layout" />
            <include layout="@layout/shimmer_layout" />
            <include layout="@layout/shimmer_layout" />
            <include layout="@layout/shimmer_layout" />
  
        </LinearLayout>
          
    </com.facebook.shimmer.ShimmerFrameLayout>
      
</RelativeLayout>

Paso 8: crear una clase de adaptador para configurar datos en nuestro elemento de RecyclerView 

Navegue a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre CourseRVAdapter y agréguele el siguiente código.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import com.squareup.picasso.Picasso;
  
import java.util.ArrayList;
  
public class CourseRVAdapter extends RecyclerView.Adapter<CourseRVAdapter.ViewHolder> {
      
    // creating a variable for array list and context.
    private ArrayList<CourseModal> courseModalArrayList;
  
    public CourseRVAdapter(ArrayList<CourseModal> courseModalArrayList, Context context) {
        this.courseModalArrayList = courseModalArrayList;
        this.context = context;
    }
  
    private Context context;
  
    @NonNull
    @Override
    public CourseRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
          
        // below line is to inflate our layout.
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.course_rv_item, parent, false);
        return new ViewHolder(view);
    }
  
    @Override
    public void onBindViewHolder(@NonNull CourseRVAdapter.ViewHolder holder, int position) {
        // setting data to our views of recycler view.
        CourseModal modal = courseModalArrayList.get(position);
        holder.courseNameTV.setText(modal.getCourseName());
        holder.courseTracksTV.setText(modal.getCourseTracks());
        holder.courseModeTV.setText(modal.getCourseMode());
        Picasso.get().load(modal.getCourseimg()).into(holder.courseIV);
    }
  
    @Override
    public int getItemCount() {
        return courseModalArrayList.size();
    }
  
    public class ViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our views.
        private TextView courseNameTV, courseModeTV, courseTracksTV;
        private ImageView courseIV;
  
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing our views with their ids.
            courseNameTV = itemView.findViewById(R.id.idTVCourseName);
            courseModeTV = itemView.findViewById(R.id.idTVBatch);
            courseTracksTV = itemView.findViewById(R.id.idTVTracks);
            courseIV = itemView.findViewById(R.id.idIVCourse);
        }
    }
}

Paso 9: 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.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
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.JsonArrayRequest;
import com.android.volley.toolbox.Volley;
import com.facebook.shimmer.ShimmerFrameLayout;
  
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
  
import java.util.ArrayList;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for
    // our ui components.
    private RecyclerView courseRV;
  
    // variable for our adapter
    // class and array list
    private CourseRVAdapter adapter;
    private ArrayList<CourseModal> courseModalArrayList;
    private ShimmerFrameLayout shimmerFrameLayout;
  
    // below line is the variable for url from
    // where we will be querying our data.
    String url = "https://jsonkeeper.com/b/WO6S";
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our variables.
        courseRV = findViewById(R.id.idRVCourses);
        shimmerFrameLayout = findViewById(R.id.shimmerLayout);
        shimmerFrameLayout.startShimmer();
          
        // below line we are creating a new array list
        courseModalArrayList = new ArrayList<>();
          
        // calling a method to load data.
        getData();
          
        // calling method to
        // build recycler view.
        buildRecyclerView();
    }
  
    private void getData() {
        // creating a new variable for our request queue
        RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
         
        // in this case the data we are getting is in the form
        // of array so we are making a json array request.
        // below is the line where we are making an json array
        // request and then extracting data from each json object.
        JsonArrayRequest jsonArrayRequest = new JsonArrayRequest(Request.Method.GET, url, null, new Response.Listener<JSONArray>() {
            @Override
            public void onResponse(JSONArray response) {
                  
                // on below line we are stopping our shimmer
                // and making its visibility to gone.
                shimmerFrameLayout.stopShimmer();
                shimmerFrameLayout.setVisibility(View.GONE);
                  
                // on below line we are making the 
                // recycler view visibility visible.
                courseRV.setVisibility(View.VISIBLE);
                for (int i = 0; i < response.length(); i++) {
                    // creating a new json object and
                    // getting each object from our json array.
                    try {
                          
                        // we are getting each json object.
                        JSONObject responseObj = response.getJSONObject(i);
                          
                        // 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 = responseObj.getString("courseName");
                        String courseTracks = responseObj.getString("courseTracks");
                        String courseMode = responseObj.getString("courseMode");
                        String courseImageURL = responseObj.getString("courseimg");
                        courseModalArrayList.add(new CourseModal(courseName, courseImageURL, courseMode, courseTracks));
                        buildRecyclerView();
                    } catch (JSONException e) {
                        e.printStackTrace();
                    }
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Toast.makeText(MainActivity.this, "Fail to get the data..", Toast.LENGTH_SHORT).show();
            }
        });
        queue.add(jsonArrayRequest);
    }
  
    private void buildRecyclerView() {
          
        // initializing our adapter class.
        adapter = new CourseRVAdapter(courseModalArrayList, MainActivity.this);
          
        // adding layout manager
        // to our recycler view.
        LinearLayoutManager manager = new LinearLayoutManager(this);
        courseRV.setHasFixedSize(true);
          
        // setting layout manager
        // to our recycler view.
        courseRV.setLayoutManager(manager);
          
        // setting adapter to
        // our recycler view.
        courseRV.setAdapter(adapter);
    }
}

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

Producción: