Shimmer effect only when you download a thumbnail and you only display gray during the progression

Signed-off-by: Abdourahamane Boinaidi <abdourahamane.boinaidi@infomaniak.com>

src/main/java/com/owncloud/android/ui/adapter/OCFileListAdapter.java

@@ -25,6 +25,7 @@
 package com.owncloud.android.ui.adapter;
 
 import android.accounts.AccountManager;
+import android.animation.ValueAnimator;
 import android.app.Activity;
 import android.content.ContentValues;
 import android.content.Context;
@@ -50,6 +51,7 @@ import android.widget.TextView;
 
 import com.bumptech.glide.Glide;
 import com.bumptech.glide.request.target.BitmapImageViewTarget;
+import com.facebook.shimmer.Shimmer;
 import com.facebook.shimmer.ShimmerFrameLayout;
 import com.nextcloud.client.account.User;
 import com.nextcloud.client.account.UserAccountManager;
@@ -361,7 +363,8 @@ public class OCFileListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHol
                          asyncTasks,
                          gridView,
                          activity,
-                         gridViewHolder.shimmerFrameLayout);
+                         gridViewHolder.shimmerFrameLayout,
+                         gridViewHolder.shimmerThumbnail);
 
             if (highlightedItem != null && file.getFileId() == highlightedItem.getFileId()) {
                 gridViewHolder.itemLayout.setBackgroundColor(activity.getResources()
@@ -607,7 +610,7 @@ public class OCFileListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHol
                                     List<ThumbnailsCacheManager.ThumbnailGenerationTask> asyncTasks,
                                     boolean gridView,
                                     Context context) {
-        setThumbnail(file, thumbnailView, user, storageManager, asyncTasks, gridView, context, null);
+        setThumbnail(file, thumbnailView, user, storageManager, asyncTasks, gridView, context, null, null);
     }
 
     public static void setThumbnail(OCFile file,
@@ -617,18 +620,13 @@ public class OCFileListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHol
                                     List<ThumbnailsCacheManager.ThumbnailGenerationTask> asyncTasks,
                                     boolean gridView,
                                     Context context,
-                                    ShimmerFrameLayout shimmerFrameLayout) {
-        if (shimmerFrameLayout != null){
-            shimmerFrameLayout.startShimmer();
-        }
-
-        boolean stopShimmer = false;
+                                    ShimmerFrameLayout shimmerFrameLayout,
+                                    View shimmerThumbnail) {
         if (file.isFolder()) {
             thumbnailView.setImageDrawable(MimeTypeUtil
                                                .getFolderTypeIcon(file.isSharedWithMe() || file.isSharedWithSharee(),
                                                                   file.isSharedViaLink(), file.isEncrypted(),
                                                                   file.getMountType(), context));
-            stopShimmer = true;
         } else {
             if (file.getRemoteId() != null && file.isPreviewAvailable()) {
                 // Thumbnail in cache?
@@ -647,7 +645,6 @@ public class OCFileListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHol
                             BitmapUtils.setRoundedBitmap(thumbnail, thumbnailView);
                         }
                     }
-                    stopShimmer = true;
                 } else {
                     // generate new thumbnail
                     if (ThumbnailsCacheManager.cancelPotentialThumbnailWork(file, thumbnailView)) {
@@ -659,6 +656,17 @@ public class OCFileListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHol
                                                                                    asyncTasks,
                                                                                    !gridView);
 
+                            if (shimmerFrameLayout != null){
+                                if (!shimmerFrameLayout.isShimmerStarted()){
+                                    Shimmer.AlphaHighlightBuilder shimmerBuilder = new Shimmer.AlphaHighlightBuilder();
+                                    shimmerBuilder.setRepeatCount(ValueAnimator.INFINITE);
+                                    shimmerBuilder.setRepeatMode(ValueAnimator.RESTART);
+                                    shimmerFrameLayout.setShimmer(shimmerBuilder.build());
+                                    thumbnailView.setVisibility(View.GONE);
+                                    shimmerThumbnail.setVisibility(View.VISIBLE);
+                                }
+                            }
+
                             if (thumbnail == null) {
                                 thumbnail = BitmapUtils.drawableToBitmap(
                                     MimeTypeUtil.getFileTypeIcon(file.getMimeType(),
@@ -673,12 +681,12 @@ public class OCFileListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHol
                             task.setListener(() -> {
                                 if (shimmerFrameLayout != null) {
                                     shimmerFrameLayout.hideShimmer();
-                                    thumbnailView.setBackground(null);
+                                    shimmerThumbnail.setVisibility(View.GONE);
+                                    thumbnailView.setVisibility(View.VISIBLE);
                                 }
                             });
 
                             thumbnailView.setImageDrawable(asyncDrawable);
-                            thumbnailView.setBackgroundColor(Color.GRAY);
                             asyncTasks.add(task);
                             task.execute(new ThumbnailsCacheManager.ThumbnailGenerationTaskObject(file,
                                                                                                   file.getRemoteId()));
@@ -696,14 +704,8 @@ public class OCFileListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHol
                                                                             file.getFileName(),
                                                                             user.toPlatformAccount(),
                                                                             context));
-                stopShimmer = true;
             }
         }
-
-        if (stopShimmer && shimmerFrameLayout != null){
-            shimmerFrameLayout.hideShimmer();
-            thumbnailView.setBackground(null);
-        }
     }
 
     private String getFooterText() {
@@ -1223,6 +1225,9 @@ public class OCFileListAdapter extends RecyclerView.Adapter<RecyclerView.ViewHol
         @BindView(R.id.thumbnail)
         public ImageView thumbnail;
 
+        @BindView(R.id.thumbnail_shimmer)
+        public View shimmerThumbnail;
+
         @BindView(R.id.shimmer_view_container)
         public ShimmerFrameLayout shimmerFrameLayout;
 

src/main/res/layout/grid_image.xml

@@ -26,21 +26,35 @@
     android:gravity="center_horizontal"
     android:orientation="vertical">
 
-    <com.facebook.shimmer.ShimmerFrameLayout
-        android:id="@+id/shimmer_view_container"
+    <FrameLayout
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:shimmer_auto_start="false">
+        android:layout_height="wrap_content">
 
-        <ImageView
-            android:id="@+id/thumbnail"
+        <com.facebook.shimmer.ShimmerFrameLayout
+            android:id="@+id/shimmer_view_container"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            android:contentDescription="@null"
-            android:padding="@dimen/standard_eigth_padding"
-            android:scaleType="centerCrop"
-            android:src="@drawable/folder" />
+            app:shimmer_auto_start="false"
+            app:shimmer_base_alpha="1"
+            android:clipChildren="true">
+
+            <View
+                android:id="@+id/thumbnail_shimmer"
+                android:layout_width="match_parent"
+                android:layout_height="@dimen/standard_list_item_size"
+                android:background="@color/grey_200"
+                android:padding="@dimen/standard_eigth_padding"
+                android:visibility="gone" />
 
+            <ImageView
+                android:id="@+id/thumbnail"
+                android:layout_width="match_parent"
+                android:layout_height="match_parent"
+                android:contentDescription="@null"
+                android:padding="@dimen/standard_eigth_padding"
+                android:scaleType="centerCrop"
+                android:src="@drawable/folder" />
+        </com.facebook.shimmer.ShimmerFrameLayout>
 
         <ImageView
             android:id="@+id/favorite_action"
@@ -94,6 +108,6 @@
             android:layout_marginRight="@dimen/standard_quarter_margin"
             android:contentDescription="@string/checkbox"
             android:src="@android:drawable/checkbox_off_background" />
-    </com.facebook.shimmer.ShimmerFrameLayout>
+    </FrameLayout>
 
 </LinearLayout>

src/main/res/layout/grid_item.xml

@@ -25,20 +25,34 @@
     android:gravity="center"
     android:orientation="vertical">
 
-    <com.facebook.shimmer.ShimmerFrameLayout
-        android:id="@+id/shimmer_view_container"
+    <FrameLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        app:shimmer_auto_start="false"
         android:layout_gravity="center_horizontal">
 
-        <ImageView
-            android:id="@+id/thumbnail"
-            android:layout_width="@dimen/standard_list_item_size"
-            android:layout_height="@dimen/standard_list_item_size"
-            android:layout_gravity="center"
-            android:src="@drawable/folder"
-            android:contentDescription="@null"/>
+        <com.facebook.shimmer.ShimmerFrameLayout
+            android:id="@+id/shimmer_view_container"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            app:shimmer_auto_start="false"
+            app:shimmer_base_alpha="1"
+            android:layout_gravity="center">
+
+            <View
+                android:id="@+id/thumbnail_shimmer"
+                android:layout_width="@dimen/standard_list_item_size"
+                android:layout_height="@dimen/standard_list_item_size"
+                android:background="@color/grey_200"
+                android:visibility="gone" />
+
+            <ImageView
+                android:id="@+id/thumbnail"
+                android:layout_width="@dimen/standard_list_item_size"
+                android:layout_height="@dimen/standard_list_item_size"
+                android:layout_gravity="center"
+                android:contentDescription="@null"
+                android:src="@drawable/folder" />
+        </com.facebook.shimmer.ShimmerFrameLayout>
 
         <ImageView
             android:id="@+id/favorite_action"
@@ -93,7 +107,7 @@
             android:src="@android:drawable/checkbox_off_background"
             android:contentDescription="@string/checkbox"/>
 
-    </com.facebook.shimmer.ShimmerFrameLayout>
+    </FrameLayout>
 
     <TextView
         android:id="@+id/Filename"

src/main/res/layout/list_item.xml

@@ -27,183 +27,187 @@
     android:baselineAligned="false"
     android:orientation="horizontal">
 
-    <com.facebook.shimmer.ShimmerFrameLayout
-        android:id="@+id/shimmer_view_container"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:shimmer_auto_start="false">
+    <RelativeLayout
+        android:layout_width="@dimen/standard_list_item_size"
+        android:layout_height="@dimen/standard_list_item_size"
+        android:paddingStart="@dimen/zero"
+        android:paddingTop="@dimen/standard_padding"
+        android:paddingEnd="@dimen/standard_quarter_padding"
+        android:paddingBottom="@dimen/standard_padding">
+
+        <com.facebook.shimmer.ShimmerFrameLayout
+            android:id="@+id/shimmer_view_container"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_centerInParent="true"
+            app:shimmer_base_alpha="1"
+            app:shimmer_auto_start="false"
+            android:layout_marginStart="@dimen/standard_half_margin">
+
+            <View
+                android:id="@+id/thumbnail_shimmer"
+                android:layout_width="@dimen/file_icon_size"
+                android:layout_height="@dimen/file_icon_size"
+                android:background="@color/grey_200"
+                android:visibility="gone" />
+
+            <ImageView
+                android:id="@+id/thumbnail"
+                android:layout_width="@dimen/file_icon_size"
+                android:layout_height="@dimen/file_icon_size"
+                android:layout_centerInParent="true"
+                android:layout_marginStart="@dimen/standard_half_margin"
+                android:contentDescription="@null"
+                android:src="@drawable/folder"/>
+        </com.facebook.shimmer.ShimmerFrameLayout>
+
+        <ImageView
+            android:id="@+id/favorite_action"
+            android:layout_width="@dimen/list_item_favorite_action_layout_width"
+            android:layout_height="@dimen/list_item_favorite_action_layout_height"
+            android:layout_alignParentTop="true"
+            android:layout_alignParentEnd="true"
+            android:layout_marginEnd="@dimen/standard_quarter_margin"
+            android:contentDescription="@string/favorite"
+            android:src="@drawable/favorite" />
+
+        <ImageView
+            android:id="@+id/localFileIndicator"
+            android:layout_width="@dimen/list_item_local_file_indicator_layout_width"
+            android:layout_height="@dimen/list_item_local_file_indicator_layout_height"
+            android:layout_alignParentEnd="true"
+            android:layout_alignParentBottom="true"
+            android:layout_marginEnd="@dimen/standard_quarter_margin"
+            android:contentDescription="@string/downloader_download_succeeded_ticker"
+            android:scaleType="fitCenter"
+            android:src="@drawable/ic_synced" />
+
+    </RelativeLayout>
+
+    <LinearLayout
+        android:layout_width="0dp"
+        android:layout_height="match_parent"
+        android:layout_weight="1"
+        android:gravity="top"
+        android:orientation="vertical"
+        android:paddingTop="@dimen/standard_padding">
+
+        <TextView
+            android:id="@+id/Filename"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_gravity="center_vertical"
+            android:ellipsize="middle"
+            android:singleLine="true"
+            android:text="@string/placeholder_filename"
+            android:textColor="@color/text_color"
+            android:textSize="@dimen/two_line_primary_text_size" />
 
         <LinearLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:orientation="horizontal"
-            android:baselineAligned="false">
-            <RelativeLayout
-                android:layout_width="@dimen/standard_list_item_size"
-                android:layout_height="@dimen/standard_list_item_size"
-                android:paddingBottom="@dimen/standard_padding"
-                android:paddingEnd="@dimen/standard_quarter_padding"
+            android:orientation="horizontal">
+
+            <TextView
+                android:id="@+id/file_size"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:text="@string/placeholder_fileSize"
+                android:textColor="@color/list_item_lastmod_and_filesize_text"
+                android:textSize="@dimen/two_line_secondary_text_size" />
+
+            <TextView
+                android:id="@+id/file_separator"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:gravity="end"
                 android:paddingStart="@dimen/zero"
-                android:paddingTop="@dimen/standard_padding">
-
-                <ImageView
-                    android:id="@+id/thumbnail"
-                    android:layout_width="@dimen/file_icon_size"
-                    android:layout_height="@dimen/file_icon_size"
-                    android:layout_centerInParent="true"
-                    android:layout_marginStart="@dimen/standard_half_margin"
-                    android:contentDescription="@null"
-                    android:src="@drawable/folder"/>
-
-                <ImageView
-                    android:id="@+id/favorite_action"
-                    android:layout_width="@dimen/list_item_favorite_action_layout_width"
-                    android:layout_height="@dimen/list_item_favorite_action_layout_height"
-                    android:layout_alignParentEnd="true"
-                    android:layout_alignParentTop="true"
-                    android:layout_marginEnd="@dimen/standard_quarter_margin"
-                    android:contentDescription="@string/favorite"
-                    android:src="@drawable/favorite"/>
-
-                <ImageView
-                    android:id="@+id/localFileIndicator"
-                    android:layout_width="@dimen/list_item_local_file_indicator_layout_width"
-                    android:layout_height="@dimen/list_item_local_file_indicator_layout_height"
-                    android:layout_alignParentBottom="true"
-                    android:layout_alignParentEnd="true"
-                    android:layout_marginEnd="@dimen/standard_quarter_margin"
-                    android:contentDescription="@string/downloader_download_succeeded_ticker"
-                    android:scaleType="fitCenter"
-                    android:src="@drawable/ic_synced" />
-
-            </RelativeLayout>
-
-            <LinearLayout
-                android:layout_width="0dp"
-                android:layout_height="match_parent"
-                android:layout_weight="1"
-                android:gravity="top"
-                android:orientation="vertical"
-                android:paddingTop="@dimen/standard_padding">
-
-                <TextView
-                    android:id="@+id/Filename"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_gravity="center_vertical"
-                    android:ellipsize="middle"
-                    android:singleLine="true"
-                    android:text="@string/placeholder_filename"
-                    android:textColor="@color/text_color"
-                    android:textSize="@dimen/two_line_primary_text_size"/>
-
-                <LinearLayout
-                    android:layout_width="match_parent"
-                    android:layout_height="wrap_content"
-                    android:orientation="horizontal">
-
-                    <TextView
-                        android:id="@+id/file_size"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:text="@string/placeholder_fileSize"
-                        android:textColor="@color/list_item_lastmod_and_filesize_text"
-                        android:textSize="@dimen/two_line_secondary_text_size"/>
-
-                    <TextView
-                        android:id="@+id/file_separator"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:gravity="end"
-                        android:paddingEnd="@dimen/standard_quarter_padding"
-                        android:paddingStart="@dimen/zero"
-                        android:text="@string/info_separator"
-                        android:textColor="@color/list_item_lastmod_and_filesize_text"
-                        android:textSize="@dimen/two_line_secondary_text_size"/>
-
-                    <TextView
-                        android:id="@+id/last_mod"
-                        android:layout_width="wrap_content"
-                        android:layout_height="wrap_content"
-                        android:gravity="end"
-                        android:text="@string/placeholder_media_time"
-                        android:textColor="@color/list_item_lastmod_and_filesize_text"
-                        android:textSize="@dimen/two_line_secondary_text_size"/>
-
-                </LinearLayout>
-
-            </LinearLayout>
-
-            <RelativeLayout
+                android:paddingEnd="@dimen/standard_quarter_padding"
+                android:text="@string/info_separator"
+                android:textColor="@color/list_item_lastmod_and_filesize_text"
+                android:textSize="@dimen/two_line_secondary_text_size" />
+
+            <TextView
+                android:id="@+id/last_mod"
                 android:layout_width="wrap_content"
-                android:layout_height="match_parent"
-                android:layout_gravity="center_vertical"
-                android:paddingEnd="@dimen/zero"
-                android:paddingStart="@dimen/standard_half_padding">
-
-                <ImageView
-                    android:id="@+id/unreadComments"
-                    android:layout_width="wrap_content"
-                    android:layout_height="match_parent"
-                    android:layout_centerVertical="true"
-                    android:clickable="true"
-                    android:contentDescription="@string/unread_comments"
-                    android:focusable="true"
-                    android:paddingEnd="@dimen/list_item_share_right_margin"
-                    android:paddingStart="@dimen/standard_half_padding"
-                    android:src="@drawable/ic_comment"
-                    android:visibility="gone"/>
-
-                <ImageView
-                    android:id="@+id/sharedIcon"
-                    android:layout_width="wrap_content"
-                    android:layout_height="match_parent"
-                    android:layout_centerVertical="true"
-                    android:layout_toEndOf="@id/unreadComments"
-                    android:clickable="true"
-                    android:contentDescription="@string/shared_icon_share"
-                    android:focusable="true"
-                    android:paddingEnd="@dimen/list_item_share_right_margin"
-                    android:paddingStart="@dimen/standard_half_padding"
-                    android:src="@drawable/ic_unshared"/>
-
-                <RelativeLayout
-                    android:id="@+id/sharedAvatars"
-                    android:layout_width="100dp"
-                    android:layout_height="@dimen/file_icon_size"
-                    android:layout_centerVertical="true"
-                    android:layout_alignEnd="@id/sharedIcon"
-                    android:layout_toEndOf="@id/sharedIcon"
-                    android:contentDescription="@string/shared_avatar_desc"
-                    android:visibility="visible"/>
-
-                <ImageView
-                    android:id="@+id/custom_checkbox"
-                    android:layout_width="wrap_content"
-                    android:layout_height="match_parent"
-                    android:layout_centerVertical="true"
-                    android:layout_toEndOf="@id/sharedAvatars"
-                    android:clickable="false"
-                    android:contentDescription="@string/checkbox"
-                    android:focusable="false"
-                    android:paddingEnd="@dimen/alternate_padding"
-                    android:paddingStart="@dimen/standard_half_padding"
-                    android:src="@drawable/ic_checkbox_blank_outline"/>
-
-                <ImageView
-                    android:id="@+id/overflow_menu"
-                    android:layout_width="wrap_content"
-                    android:layout_height="match_parent"
-                    android:layout_centerVertical="true"
-                    android:layout_toEndOf="@id/custom_checkbox"
-                    android:clickable="true"
-                    android:contentDescription="@string/overflow_menu"
-                    android:focusable="true"
-                    android:paddingEnd="@dimen/alternate_padding"
-                    android:paddingStart="@dimen/standard_half_padding"
-                    android:src="@drawable/ic_dots_vertical"/>
-
-            </RelativeLayout>
+                android:layout_height="wrap_content"
+                android:gravity="end"
+                android:text="@string/placeholder_media_time"
+                android:textColor="@color/list_item_lastmod_and_filesize_text"
+                android:textSize="@dimen/two_line_secondary_text_size" />
+
         </LinearLayout>
-    </com.facebook.shimmer.ShimmerFrameLayout>
+
+    </LinearLayout>
+
+    <RelativeLayout
+        android:layout_width="wrap_content"
+        android:layout_height="match_parent"
+        android:layout_gravity="center_vertical"
+        android:paddingStart="@dimen/standard_half_padding"
+        android:paddingEnd="@dimen/zero">
+
+        <ImageView
+            android:id="@+id/unreadComments"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_centerVertical="true"
+            android:clickable="true"
+            android:contentDescription="@string/unread_comments"
+            android:focusable="true"
+            android:paddingStart="@dimen/standard_half_padding"
+            android:paddingEnd="@dimen/list_item_share_right_margin"
+            android:src="@drawable/ic_comment"
+            android:visibility="gone" />
+
+        <ImageView
+            android:id="@+id/sharedIcon"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_centerVertical="true"
+            android:layout_toEndOf="@id/unreadComments"
+            android:clickable="true"
+            android:contentDescription="@string/shared_icon_share"
+            android:focusable="true"
+            android:paddingStart="@dimen/standard_half_padding"
+            android:paddingEnd="@dimen/list_item_share_right_margin"
+            android:src="@drawable/ic_unshared" />
+
+        <RelativeLayout
+            android:id="@+id/sharedAvatars"
+            android:layout_width="100dp"
+            android:layout_height="@dimen/file_icon_size"
+            android:layout_alignEnd="@id/sharedIcon"
+            android:layout_centerVertical="true"
+            android:layout_toEndOf="@id/sharedIcon"
+            android:contentDescription="@string/shared_avatar_desc"
+            android:visibility="visible" />
+
+        <ImageView
+            android:id="@+id/custom_checkbox"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_centerVertical="true"
+            android:layout_toEndOf="@id/sharedAvatars"
+            android:clickable="false"
+            android:contentDescription="@string/checkbox"
+            android:focusable="false"
+            android:paddingStart="@dimen/standard_half_padding"
+            android:paddingEnd="@dimen/alternate_padding"
+            android:src="@drawable/ic_checkbox_blank_outline" />
+
+        <ImageView
+            android:id="@+id/overflow_menu"
+            android:layout_width="wrap_content"
+            android:layout_height="match_parent"
+            android:layout_centerVertical="true"
+            android:layout_toEndOf="@id/custom_checkbox"
+            android:clickable="true"
+            android:contentDescription="@string/overflow_menu"
+            android:focusable="true"
+            android:paddingStart="@dimen/standard_half_padding"
+            android:paddingEnd="@dimen/alternate_padding"
+            android:src="@drawable/ic_dots_vertical" />
+
+    </RelativeLayout>
 </LinearLayout>