Android Placeholder Animation, как Facebook, с использованием макета Shimmer

Shimmer — это библиотека для Android, которая предоставляет простой способ добавления эффекта мерцания к любому представлению в вашем приложении для Android. Он полезен как ненавязчивый индикатор загрузки, изначально разработанный для Facebook Home.

Вы могли заметить эффект мерцания в мобильном приложении Facebook, когда данные загружаются из сети. Библиотека Shimmer используется для отображения анимации при загрузке данных, чтобы сделать пользовательский интерфейс более интересным и привлекательным, вместо использования традиционного ProgressBar.

Эта библиотека добавляет эффект Shimmer к любому пользовательскому представлению, которое мы определяем.
В этом блоге объясняется, как использовать библиотеку Shimmer в ваших приложениях, и приводится пример загрузки данных из API YoutubeData для отображения самых популярных видео.
Ниже приведен пример эффекта мерцания в приложении для Android:

В этом блоге мы узнаем, как использовать Shimmer в вашем приложении для Android. Мы будем извлекать данные из API данных Youtube с помощью Retrofit, а затем отображать данные в RecyclerView. Итак, приступим!

Ниже приведен фрагмент кода для получения эффекта мерцания.

<com.facebook.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmerFrameLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/toolbar"
    shimmer:duration="1000">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="vertical">
        //add your custom view here
        <include layout="@layout/placeholder_item" />
        <include
            layout="@layout/placeholder_item"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin5" />
        <include layout="@layout/placeholder_item" />
        <include layout="@layout/placeholder_item" />
        <include layout="@layout/placeholder_item" />
    </LinearLayout>
</com.facebook.shimmer.ShimmerFrameLayout>

Чтобы запустить анимацию, вызовите startShimmerAnimation() из своей активности.

ShimmerFrameLayout shimmerFrameLayout = findViewById(R.id.shimmerFrameLayout);
shimmerFrameLayout.startShimmerAnimation();

Чтобы остановить анимацию, вызовите stopShimmerAnimation() из своей активности.

ShimmerFrameLayout shimmerFrameLayout = findViewById(R.id.shimmerFrameLayout);
shimmerFrameLayout.stopShimmerAnimation();

Шаги по внедрению Shimmer в Android-приложение

Создать проект

Создайте новый проект с java Empty Activity в Android Studio

Добавить зависимости

Добавьте зависимости мерцания в файл Module: app build.gradle и синхронизируйте проект.

dependencies {
    implementation 'com.facebook.shimmer:shimmer:0.1.0@aar'  
}

Создать новый макет

Создайте новый XML-файл макета с именем placeholder_item.xml. В этом файле мы создадим аналогичные представления в соответствии с нашим фактическим представлением списка.

Теперь наше представление-заполнитель готово для добавления в макет активности (activity_main.xml).

Примечание. Я создал действие: MainActivity.java,activity_main.xml

Мы добавим заполнитель 5–6 раз, чтобы он имитировал список.

Мы будем вызывать этот метод в методеstartFetching()действия, чтобы запускать и останавливать анимацию мерцающего эффекта.

Добавьте приведенные ниже значения в соответствующие файлы.

Я использовал Retrofit Client для получения данных из API.

Загрузить исходный код с GitHub:

Загрузить APK из магазина Play:

Дополнительную документацию вы можете найти на странице Шиммера.

Если вам понравилась ❤ статья, не забудьте 👏 похлопать в ладоши и поделиться ею с друзьями.

В случае, если вы обнаружите какую-либо ошибку или у вас есть какие-либо вопросы или вам нужны дополнительные объяснения, пожалуйста, прокомментируйте ниже. Следите за новостями в блогах AndroidDev.

Удачного кодирования😊

Команда CodingWithDarshana!