Анимация заполнителя контента с использованием Shimmer в Android с RecyclerView

Опубликовано: 2 Сентября, 2022

Мы видели реализацию Content Placeholder Animation с использованием Shimmer в Android для простого просмотра. В этой статье мы рассмотрим реализацию Content Placeholder Animation с помощью Shimmer в Android с RecyclerView.

Что мы собираемся построить в этой статье?

Мы создадим простое приложение, в котором мы будем просто отображать данные в нашем Android RecyclerView из нашего API. Для загрузки данных мы будем отображать заполнитель контента для загрузки. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье. Обратите внимание, что мы собираемся реализовать этот проект на языке Java .

Пошаговая реализация

Шаг 1: Создайте новый проект

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio». Обратите внимание, что в качестве языка программирования выберите Java .

Шаг 2: Добавление зависимости для использования макета Facebook Shimmer

Перейдите к приложению > Gradle Scripts > файлу build.gradle и добавьте к нему приведенную ниже зависимость.

// below line is used for volley library
implementation ‘com.android.volley:volley:1.1.1’
// below line is used for image loading library
implementation ‘com.squareup.picasso:picasso:2.71828’
// depenancy for using facebook shimmer layout.
implementation ‘com.facebook.shimmer:shimmer:0.5.0’

Теперь синхронизируйте свой проект и перейдите к файлу XML.

Шаг 3: Добавление разрешений для Интернета в Android

Перейдите к приложению > AndroidManifest.xml и добавьте к нему разрешения для Интернета, поскольку мы загружаем данные из Интернета.

XML

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

Шаг 4: Создание модального класса для хранения наших данных

Перейдите к приложению> java> имя пакета вашего приложения> щелкните его правой кнопкой мыши> Создать> класс Java и назовите его как CourseModal и добавьте к нему приведенный ниже код.

Java

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;
    }
}

Шаг 5: Создание файла макета для элемента нашего RecyclerView в Android

Перейдите к приложению> res> layout> щелкните его правой кнопкой мыши> New> файл ресурсов макета и назовите его как course_rv_item и добавьте к нему приведенный ниже код.

XML

<?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>

Шаг 6: Создание файла макета для нашего мерцающего макета

Перейдите к приложению> res> layout> щелкните его правой кнопкой мыши> New> файл ресурсов макета и назовите его как shimmer_layout и добавьте к нему приведенный ниже код.

XML

<?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>

Шаг 7: Работа с файлом activity_main.xml

Перейдите к приложению > res > layout > activity_main.xml и добавьте приведенный ниже код в этот файл. Ниже приведен код файла activity_main.xml .

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>

Шаг 8: Создание класса адаптера для установки данных в наш элемент RecyclerView

Перейдите к приложению> java> имя пакета вашего приложения> Щелкните его правой кнопкой мыши> Создать> Класс Java

Technical Scripter Java

Анимация заполнителя контента с использованием Shimmer в Android с RecyclerView

Что мы собираемся построить в этой статье?

Пошаговая реализация

XML

Java

XML

XML

XML

РЕКОМЕНДУЕМЫЕ СТАТЬИ