Skeleton View design till the view gets loaded

Question

how to achieve below mentioned view the URL kind of loading View , similar to many of the apps using it like TvShowTime

Answer 1

This is called shimmer effect. Facebook has open sourced a library that provide facebook like shimmer effect. https://github.com/facebook/shimmer-android Also, there is another library for that https://github.com/team-supercharge/ShimmerLayout

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