Added a UI for the Interests Prototype.

chrome/android/java/src/org/chromium/chrome/browser/ntp/InterestsItemView.java

+// Copyright 2015 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.ntp;
+
+import android.content.Context;
+import android.content.res.Resources;
+import android.content.res.TypedArray;
+import android.graphics.Color;
+import android.graphics.Rect;
+import android.graphics.drawable.BitmapDrawable;
+import android.graphics.drawable.Drawable;
+import android.os.AsyncTask;
+import android.support.v4.graphics.drawable.RoundedBitmapDrawable;
+import android.support.v4.graphics.drawable.RoundedBitmapDrawableFactory;
+import android.support.v7.widget.AppCompatTextView;
+import android.text.TextUtils;
+import android.util.LruCache;
+import android.util.TypedValue;
+import android.view.Gravity;
+import android.view.View;
+import android.view.View.OnClickListener;
+
+import org.chromium.base.Log;
+import org.chromium.chrome.R;
+import org.chromium.chrome.browser.ntp.InterestsPage.InterestsListener;
+import org.chromium.chrome.browser.ntp.InterestsService.Interest;
+import org.chromium.chrome.browser.widget.RoundedIconGenerator;
+
+import java.io.IOException;
+import java.io.InputStream;
+import java.net.URL;
+
+/**
+ * Displays the interest name along with an image of it. This item can be clicked.
+ */
+class InterestsItemView extends AppCompatTextView implements OnClickListener {
+
+    private static final String TAG = "interests_item_view";
+
+    /**
+     * Drawing-related values that can be shared between instances of InterestsItemView.
+     */
+    static final class DrawingData {
+
+        private final int mPadding;
+        private final int mMinHeight;
+        private final int mImageSize;
+        private final int mTextSize;
+        private final int mImageTextSize;
+
+        /**
+         * Initialize shared values used for drawing the image.
+         *
+         * @param context The view context in which the InterestsItemView will be drawn.
+         */
+        DrawingData(Context context) {
+            Resources res = context.getResources();
+            mPadding = res.getDimensionPixelOffset(R.dimen.ntp_list_item_padding);
+            mMinHeight = res.getDimensionPixelSize(R.dimen.ntp_interest_item_min_height);
+            mTextSize = res.getDimensionPixelSize(R.dimen.ntp_interest_item_text_size);
+            mImageSize = res.getDimensionPixelSize(R.dimen.ntp_interest_item_image_size);
+            mImageTextSize = res.getDimensionPixelSize(R.dimen.ntp_interest_item_image_text_size);
+        }
+    }
+
+    private Interest mInterest;
+    private DownloadImageTask mDownloadTask;
+
+    private final Context mContext;
+    private final DrawingData mDrawingData;
+    private final LruCache<String, Drawable> mImageCache;
+    private final InterestsListener mListener;
+    private final RoundedIconGenerator mIconGenerator;
+
+    /**
+     * @param context The view context in which this item will be shown.
+     * @param name The name of the interest.
+     * @param imageUrl The URL for the interet's image.

[Marc Treib, 2015/11/19 12:42:18]

name and imageUrl don't exist; listener and drawingData don't have a comment

[PEConn, 2015/11/20 11:23:40]

Done.

+     * @param imageCache A cache to store downloaded images.
+     */
+    InterestsItemView(Context context, Interest interest, InterestsListener listener,
+            LruCache<String, Drawable> imageCache, DrawingData drawingData) {
+        super(context);
+
+        mContext = context;
+        mListener = listener;
+        mImageCache = imageCache;
+        mDrawingData = drawingData;
+
+        setTextSize(TypedValue.COMPLEX_UNIT_PX, mDrawingData.mTextSize);
+        setMinimumHeight(mDrawingData.mMinHeight);
+        setGravity(Gravity.CENTER);
+        setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
+
+        mIconGenerator = new RoundedIconGenerator(
+                mDrawingData.mImageSize,
+                mDrawingData.mImageSize,
+                mDrawingData.mImageSize / 2,
+                Color.GRAY,
+                mDrawingData.mImageTextSize);
+
+        setOnClickListener(this);
+
+        reset(interest);
+    }
+
+    /**
+     * Resets the view contents so that it can be reused in the grid view.
+     *
+     * @param name The title of the page.
+     * @param imageUrl The URL of the page.
+     */
+    public void reset(Interest interest) {
+        // Reset Drawable state so ripples don't continue when the View is reused.
+        jumpDrawablesToCurrentState();
+
+        // Exit early if this View is already displaying the Interest given.
+        if (mInterest != null
+                && TextUtils.equals(interest.getName(), mInterest.getName())
+                && TextUtils.equals(interest.getImageUrl(), mInterest.getImageUrl())) {
+            return;

[Marc Treib, 2015/11/19 12:42:18]

Hm, I'd still set mInterest = interest here

[PEConn, 2015/11/20 11:23:40]

Done.

+        }
+
+        mInterest = interest;
+
+        setText(mInterest.getName());
+
+        Drawable image = mImageCache.get(mInterest.getImageUrl());
+        if (image == null) {
+            // Cache miss, download the image and use a temporary in the meantime.
+            mDownloadTask = new DownloadImageTask(mInterest.getImageUrl());
+            mDownloadTask.execute();
+
+            mIconGenerator.setBackgroundColor(getTileColor(mInterest.getName()));
+            image = new BitmapDrawable(mContext.getResources(),
+                                       mIconGenerator.generateIconForText(mInterest.getName()));
+        }
+        setImage(image);
+    }
+
+    /**
+     * @return The image URL for the interest.
+     */
+    public String getImageUrl() {
+        return mInterest.getImageUrl();
+    }
+
+    /**
+     * @return The name of the interest.
+     */
+    public String getName() {
+        return mInterest.getName();
+    }
+
+    private void setImage(Drawable image) {
+        image.setBounds(new Rect(0, 0, mDrawingData.mImageSize, mDrawingData.mImageSize));
+        setCompoundDrawables(null, image, null, null);
+    }
+
+    private int getTileColor(String str) {
+        // Rough copy of LetterTileDrawable.pickColor.
+        // TODO(peconn): Move this to a more general class.
+        TypedArray colors = mContext.getResources().obtainTypedArray(R.array.letter_tile_colors);
+        return colors.getColor(Math.abs(str.hashCode() % colors.length()), Color.DKGRAY);
+    }
+
+    @Override
+    public void onClick(View v) {
+        mListener.onInterestClicked(getName());
+    }
+
+    private void onImageDownloaded(Drawable image, String url) {
+        if (image == null) {
+            return;
+        }
+
+        mImageCache.put(url, image);
+
+        // If the Interest this View is displaying has changed while downloading, do not update
+        // the image.

[Marc Treib, 2015/11/19 12:42:18]

Do we still want to cache the image? If not, this check could be merged into the
early-out check above.

[PEConn, 2015/11/20 11:23:40]

We've gone to the effort of loading it, so we may as well cache it. The use-case
I see is a user opening the tab then immediately scrolling down so the images
for the first few elements are loaded, cached and not displayed. Then the cached
images are likely to be used.

+        if (url == mInterest.getImageUrl()) {
+            setImage(image);
+        }
+    }
+
+    private class DownloadImageTask extends AsyncTask<Void, Void, Drawable> {
+
+        private final String mUrl;
+
+        public DownloadImageTask(String url) {
+            mUrl = url;
+        }
+
+        @Override
+        protected Drawable doInBackground(Void... voids) {
+            // This is run on a background thread.
+            try {
+                // TODO(peconn): Replace this with something from the C++ Chrome stack.
+                URL imageUrl = new URL(mUrl);
+                InputStream in = imageUrl.openStream();
+                RoundedBitmapDrawable img =
+                        RoundedBitmapDrawableFactory.create(getResources(), in);
+
+                // TODO(peconn): Modify image so it does not get stretched.
+                img.setCircular(true);
+                return img;
+            } catch (IOException e) {
+                Log.e(TAG, "Error downloading image: " + e.toString());
+            }
+            return null;
+        }
+
+        @Override
+        protected void onPostExecute(Drawable image) {
+            // This is run on the main thread.
+            onImageDownloaded(image, mUrl);
+        }
+    }
+}