Download Home : Loading/downloading animation for images

Bug: 868555
Change-Id: I5e96263d5d3cea491a65b9b94b69ad89fdf5eb5a
Reviewed-on: https://chromium-review.googlesource.com/1164575
Commit-Queue: Shakti Sahu <shaktisahu@chromium.org>
Reviewed-by: Theresa <twellington@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582049}

chrome/android/java/res/drawable/contextual_suggestions_placeholder_thumbnail_background.xml

@@ -5,7 +5,7 @@
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid
-        android:color="@color/contextual_suggestions_thumbnail_bg_color" />
+        android:color="@color/placeholder_thumbnail_bg_color" />
     <corners
         android:radius="@dimen/snippets_thumbnail_small_corner_radius" />
 </shape>
\ No newline at end of file

chrome/android/java/res/drawable/image_loading_progress.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2018 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    tools:targetApi="21">
+
+    <aapt:attr name="android:drawable">
+        <vector
+            android:width="100dp"
+            android:height="100dp"
+            android:viewportWidth="100.0"
+            android:viewportHeight="100.0">
+
+            <path
+                android:name="circle"
+                android:fillColor="@color/download_image_loading_color"
+                android:pathData="M 20,60 c 0,-11 9,-20 20,-20 l0, 20 l20,0 c 0,11 -9,20 -20,20 c -11,0 -20,-9 -20,-20"/>
+            <path
+                android:name="square"
+                android:fillColor="@color/download_image_loading_color"
+                android:pathData="M 40,40 l0,-15 l35,0 l0,35 l-15,0 c 0,-11 -9,-20 -20,-20 C"/>
+            <path
+                android:name="arc"
+                android:fillColor="@color/download_image_loading_color"
+                android:pathData="M 40,60 l 0,-20 c 11,0 20,9 20,20"/>
+
+        </vector>
+    </aapt:attr>
+
+    <target android:name="circle">
+        <aapt:attr name="android:animation">
+            <set android:ordering="sequentially">
+                <objectAnimator
+                    android:startOffset="0"
+                    android:duration="450"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="fillAlpha"
+                    android:valueFrom="1"
+                    android:valueTo="0.5"
+                    android:valueType="floatType"/>
+                <objectAnimator
+                    android:startOffset="0"
+                    android:duration="833"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="fillAlpha"
+                    android:valueFrom="0.5"
+                    android:valueTo="1"
+                    android:valueType="floatType"/>
+            </set>
+        </aapt:attr>
+    </target>
+
+    <target android:name="square">
+        <aapt:attr name="android:animation">
+            <set android:ordering="sequentially">
+                <objectAnimator
+                    android:startOffset="83"
+                    android:duration="767"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="fillAlpha"
+                    android:valueFrom="1"
+                    android:valueTo="0.5"
+                    android:valueType="floatType"/>
+                <objectAnimator
+                    android:duration="517"
+                    android:startOffset="0"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="fillAlpha"
+                    android:valueFrom="0.5"
+                    android:valueTo="1"
+                    android:valueType="floatType"/>
+            </set>
+        </aapt:attr>
+    </target>
+
+    <target android:name="arc">
+        <aapt:attr name="android:animation">
+            <set android:ordering="sequentially">
+                <objectAnimator
+                    android:startOffset="150"
+                    android:duration="417"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="fillAlpha"
+                    android:valueFrom="0"
+                    android:valueTo="0.3"
+                    android:valueType="floatType"/>
+                <objectAnimator
+                    android:startOffset="0"
+                    android:duration="933"
+                    android:interpolator="@android:interpolator/fast_out_slow_in"
+                    android:propertyName="fillAlpha"
+                    android:valueFrom="0.3"
+                    android:valueTo="0"
+                    android:valueType="floatType"/>
+            </set>
+        </aapt:attr>
+    </target>
+
+</animated-vector>

chrome/android/java/res/layout/download_manager_image_item.xml

@@ -17,6 +17,7 @@
         android:id="@+id/thumbnail"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="@color/placeholder_thumbnail_bg_color"
         android:scaleType="centerCrop"
         android:layout_gravity="center"
         android:adjustViewBounds="true"

chrome/android/java/res/values/colors.xml

@@ -186,6 +186,9 @@
     <!-- Bookmark UI colors -->
     <color name="bookmark_detail_section">#7C7B79</color>
 
+    <!-- Download home colors -->
+    <color name="download_image_loading_color">#BDC1C6</color>
+
     <!-- Favicon colors -->
     <color name="default_favicon_background_color">#787878</color>
 
@@ -214,7 +217,7 @@
     <color name="bottom_system_nav_color">@android:color/white</color>
     <color name="bottom_system_nav_divider_color">@color/black_alpha_12</color>
     <color name="search_box_hint">@color/black_alpha_54</color>
-    <color name="contextual_suggestions_thumbnail_bg_color">#DADCE0</color>
+    <color name="placeholder_thumbnail_bg_color">#DADCE0</color>
     <color name="clear_browsing_data_selected_tab_color">@color/modern_blue_600</color>
 
 </resources>

chrome/android/java/src/org/chromium/chrome/browser/download/home/list/holder/ImageViewHolder.java

@@ -11,12 +11,14 @@ import android.widget.ImageView;
 
 import org.chromium.chrome.R;
 import org.chromium.chrome.browser.download.home.list.ListItem;
+import org.chromium.chrome.browser.download.home.view.LoadingBackground;
 import org.chromium.chrome.browser.modelutil.PropertyModel;
 import org.chromium.components.offline_items_collection.OfflineItemVisuals;
 
 /** A {@link RecyclerView.ViewHolder} specifically meant to display an image {@code OfflineItem}. */
 public class ImageViewHolder extends ThumbnailAwareViewHolder {
     private final int mImageHeightPx;
+    private LoadingBackground mLoadingBackground;
 
     public static ImageViewHolder create(ViewGroup parent) {
         View view = LayoutInflater.from(parent.getContext())
@@ -29,6 +31,7 @@ public class ImageViewHolder extends ThumbnailAwareViewHolder {
     public ImageViewHolder(View view, int thumbnailSizePx) {
         super(view, thumbnailSizePx, thumbnailSizePx);
         mImageHeightPx = thumbnailSizePx;
+        mLoadingBackground = new LoadingBackground(view.getContext());
     }
 
     // ThumbnailAwareViewHolder implementation.
@@ -47,4 +50,14 @@ public class ImageViewHolder extends ThumbnailAwareViewHolder {
     void onVisualsChanged(ImageView view, OfflineItemVisuals visuals) {
         view.setImageBitmap(visuals == null ? null : visuals.icon);
     }
+
+    @Override
+    protected void showLoadingView(ImageView view) {
+        mLoadingBackground.show(view);
+    }
+
+    @Override
+    protected void hideLoadingView() {
+        mLoadingBackground.hide();
+    }
 }

chrome/android/java/src/org/chromium/chrome/browser/download/home/list/holder/ThumbnailAwareViewHolder.java

@@ -103,6 +103,9 @@ abstract class ThumbnailAwareViewHolder extends MoreButtonViewHolder implements
         // Clear any associated bitmap from the thumbnail.
         if (mId != null) onVisualsChanged(mThumbnail, null);
 
+        // Show the loading animation if we are in loading state.
+        showLoadingView(mThumbnail);
+
         // Clear out any outstanding thumbnail request.
         if (mCancellable != null) mCancellable.run();
 
@@ -133,10 +136,22 @@ abstract class ThumbnailAwareViewHolder extends MoreButtonViewHolder implements
         mCancellable = null;
         mIsRequesting = false;
 
+        // Hide the loading view.
+        hideLoadingView();
+
         // Notify of the new visuals (if any).
         onVisualsChanged(mThumbnail, visuals);
     }
 
+    /**
+     * Show UI to indicate that thumbnail loading in progress.
+     * @param view The view that should show the loading image.
+     */
+    protected void showLoadingView(ImageView view) {}
+
+    /** Hide the loading view. */
+    protected void hideLoadingView() {}
+
     /**
      * Called when the contents of the thumbnail should be changed to due an event (either this
      * {@link RecyclerView.ViewHolder} being rebound to another {@link ListItem} or a thumbnail

chrome/android/java/src/org/chromium/chrome/browser/download/home/view/LoadingBackground.java

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+package org.chromium.chrome.browser.download.home.view;
+
+import android.content.Context;
+import android.graphics.drawable.Drawable;
+import android.support.graphics.drawable.Animatable2Compat;
+import android.support.graphics.drawable.AnimatedVectorDrawableCompat;
+import android.widget.ImageView;
+
+import org.chromium.chrome.R;
+
+/**
+ * A helper class to display the loading image and animation for image and video items. This class
+ * can also be extended and/or modified to include download progress.
+ */
+public class LoadingBackground {
+    private AnimatedVectorDrawableCompat mLoadingDrawable;
+
+    public LoadingBackground(Context context) {
+        mLoadingDrawable =
+                AnimatedVectorDrawableCompat.create(context, R.drawable.image_loading_progress);
+        Animatable2Compat.AnimationCallback animationCallback =
+                new Animatable2Compat.AnimationCallback() {
+                    @Override
+                    public void onAnimationEnd(Drawable drawable) {
+                        mLoadingDrawable.start();
+                    }
+                };
+
+        mLoadingDrawable.registerAnimationCallback(animationCallback);
+    }
+
+    /** Show loading animation for the given {@link view}. */
+    public void show(ImageView view) {
+        view.setImageDrawable(mLoadingDrawable);
+        mLoadingDrawable.start();
+    }
+
+    /** Hide the loading animation. */
+    public void hide() {
+        mLoadingDrawable.clearAnimationCallbacks();
+    }
+}

chrome/android/java_sources.gni

@@ -511,6 +511,7 @@ chrome_java_sources = [
   "java/src/org/chromium/chrome/browser/download/home/storage/StorageCoordinator.java",
   "java/src/org/chromium/chrome/browser/download/home/storage/StorageSummaryProvider.java",
   "java/src/org/chromium/chrome/browser/download/home/toolbar/DownloadHomeToolbar.java",
+  "java/src/org/chromium/chrome/browser/download/home/view/LoadingBackground.java",
   "java/src/org/chromium/chrome/browser/download/home/view/SelectionView.java",
   "java/src/org/chromium/chrome/browser/download/items/DownloadBlockedOfflineContentProvider.java",
   "java/src/org/chromium/chrome/browser/download/items/OfflineContentAggregatorFactory.java",