Как сделать плэйсхолдер для загрузки как в Facebook

Надоели стандартные progress bar и однотипные страницы? Наверняка вы видели в других приложениях, как при загрузке контента страницы, часть страницы заполнена квадратиками и прямоугольниками, мигающими и имитирующими контент и тем самым заполняя страницу на время, пока контент грузится. В этом уроке рассмотрим как сделать такой загрузчик, который оживит ваше приложение и улучшит восприятие для пользователя.

Эффект мерцания (shimmer effect) выделит ваше приложение и сделает страницу более интересной во время загрузки контента

1) Добавляем зависимость в проект

implementation 'io.supercharge:shimmerlayout:2.1.0'

2) Создаём layout который имитирует структуру контента страницы и помещаем его внутрь View ShimmerLayout. Данный layout должен находиться внутри layout того экрана к которому вы хотите применить эффект мерцания. Например у вас есть главный экран, который имеет layout main_activity.xml. Соответсвенно в нем же должен находиться layout io.supercharge.shimmerlayout.ShimmerLayout c контентом для мерцания.

<io.supercharge.shimmerlayout.ShimmerLayout
    android:id="@+id/shimmer_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="30dp"
    tools:context="io.supercharge.shimmeringlayout.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/shimmer_avatar_1"
            android:layout_width="@dimen/monogram_width"
            android:layout_height="@dimen/monogram_width"
            android:layout_marginRight="11dp"
            android:background="@drawable/avatar_background"/>

        <View
            android:layout_width="130dp"
            android:layout_height="19dp"
            android:layout_alignTop="@+id/shimmer_avatar_1"
            android:layout_toRightOf="@+id/shimmer_avatar_1"
            android:background="@color/shimmer_background_color"/>

        <View
            android:id="@+id/shimmer_description_1"
            android:layout_width="39dp"
            android:layout_height="13dp"
            android:layout_alignBottom="@+id/shimmer_avatar_1"
            android:layout_toRightOf="@+id/shimmer_avatar_1"
            android:background="@color/shimmer_background_color"/>

    </RelativeLayout>

</io.supercharge.shimmerlayout.ShimmerLayout>

3) Объявляем в MainActivity (или на любом другом экране, куда вы добавляете прелоадер) код, который запускает анимацию

ShimmerLayout shimmerText = (ShimmerLayout) findViewById(R.id.shimmer_text);
shimmerText.startShimmerAnimation();

Вот и всё! Как видите, сделать нестандартный загрузчик и тем самым улучшить интерфейс приложения достаточно просто, так что небольшими усилиями ваше приложение станет более приятным для использования. Попробуйте!

Ссылка на библиотеку