Achieving content placeholders as progress indicators in Android

Question

My question is quite similar to this question. I want to achieve progress indicators that use this style:

That is replacing content like text and images with grey rectangles that animate like here.

I have seen this quite a lot in the past, e.g. Facebook. I am pretty sure that the YouTube app used to have this style.

Questions devided

The obvious first question is on how to this on Android and especially if there is an idiomatic, standard or simple way of achieving this and the second one is closely connected to this because here is my

Problem

How would I ever achieve converting a TextView into such a loading rectangle. I could image replacing my whole view structure with this, but I also do not know where to start with the animation.

Carolecarolee

Answer 1

Take a look at this library - ShimmerLayout

ShimmerLayout can be used to add shimmer effect (like the one used at Facebook or at LinkedIn) to your Android application.

Also, if you curious about how to implement animation, take a look at the library sources.

Athanasia

This is very nice. It is what I am searching for. I hope we will gather other results as well, but this looks quite promising. Mentioning the original project: github.com/facebook/shimmer-android – Carolecarolee

There is something about this that does not really help though because this only adds the shimmer effect and not the grey rectangles. – Carolecarolee

@Carolecarolee did you figured out a simple way of adding the rectangles? – Slothful

Answer 2

You need to create the skeleton layout and inflate it on the whole screen. Then you can use different libraries to add the shimmer effect.

drawable/skeleton.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <solid android:color="@color/skeleton"/>
<corners android:radius="4dp"/>
</shape>

layout/skeleton_row_layout.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
  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="@dimen/row_layout_height">

  <View
    android:id="@+id/icon"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_margin="15dp"
    android:layout_gravity="center_vertical"
    android:background="@drawable/skeleton"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

  <View
    android:id="@+id/topText"
    android:layout_width="200dp"
    app:layout_constraintTop_toTopOf="@id/icon"
    app:layout_constraintStart_toEndOf="@id/icon"
    android:layout_height="15dp"
    android:layout_marginLeft="16dp"
    android:background="@drawable/skeleton"/>

  <View
    android:id="@+id/bottomText"
    android:layout_width="250dp"
    android:layout_height="15dp"
    app:layout_constraintTop_toBottomOf="@id/topText"
    android:layout_marginTop="10dp"
    app:layout_constraintStart_toEndOf="@id/icon"
    android:layout_marginLeft="16dp"
    android:background="@drawable/skeleton"/>

  <View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="@drawable/skeleton"
    app:layout_constraintTop_toBottomOf="@id/icon"
    android:layout_marginTop="10dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"/>

</android.support.constraint.ConstraintLayout>

Check out this tutorial I wrote to see how to use it: https://medium.com/@sha17187/upgrade-progress-loading-with-a-skeleton-and-shimmer-effect-in-android-863ea4ff5b0b

Landbert