jenkins-bot has submitted this change and it was merged. Change subject: Color extraction for large feed card images. ......................................................................
Color extraction for large feed card images. - Moved the old ImageViewWithFace to a more general location. - Made CardLargeHeaderView use the color extraction feature, and set its own background based on the extracted color. - Made a performance improvement in FeedRecyclerAdapter, wherein it no longer unconditionally reloads the entire child View structure for every card. Instead, it now checks if a Card is being loaded into the same View. Change-Id: I4cdf6599f2e064b37d6f239e09fe2a515130c66c --- M app/src/main/java/org/wikipedia/feed/view/CardLargeHeaderView.java M app/src/main/java/org/wikipedia/feed/view/FeedRecyclerAdapter.java M app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderImageView.java M app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderView.java M app/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java R app/src/main/java/org/wikipedia/views/FaceAndColorDetectImageView.java M app/src/main/res/layout/view_article_header_image.xml M app/src/main/res/layout/view_card_header_large.xml 8 files changed, 80 insertions(+), 22 deletions(-) Approvals: BearND: Looks good to me, approved Mholloway: Looks good to me, but someone else must approve jenkins-bot: Verified diff --git a/app/src/main/java/org/wikipedia/feed/view/CardLargeHeaderView.java b/app/src/main/java/org/wikipedia/feed/view/CardLargeHeaderView.java index af8592b..444e1f5 100644 --- a/app/src/main/java/org/wikipedia/feed/view/CardLargeHeaderView.java +++ b/app/src/main/java/org/wikipedia/feed/view/CardLargeHeaderView.java @@ -1,23 +1,28 @@ package org.wikipedia.feed.view; +import android.animation.ArgbEvaluator; +import android.animation.ObjectAnimator; import android.content.Context; +import android.graphics.PointF; import android.net.Uri; +import android.support.annotation.ColorInt; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.annotation.StringRes; +import android.view.View; import android.widget.LinearLayout; import android.widget.TextView; -import com.facebook.drawee.view.SimpleDraweeView; - import org.wikipedia.R; +import org.wikipedia.views.FaceAndColorDetectImageView; import org.wikipedia.views.GoneIfEmptyTextView; import butterknife.BindView; import butterknife.ButterKnife; public class CardLargeHeaderView extends LinearLayout { - @BindView(R.id.view_card_header_large_image) SimpleDraweeView imageView; + @BindView(R.id.view_card_header_large_background) View backgroundView; + @BindView(R.id.view_card_header_large_image) FaceAndColorDetectImageView imageView; @BindView(R.id.view_card_header_large_title) TextView titleView; @BindView(R.id.view_card_header_large_page_title) TextView pageTitleView; @BindView(R.id.view_card_header_large_subtitle) GoneIfEmptyTextView subtitleView; @@ -27,10 +32,15 @@ inflate(getContext(), R.layout.view_card_header_large, this); ButterKnife.bind(this); + imageView.setOnImageLoadListener(new ImageLoadListener()); + resetBackgroundColor(); } @NonNull public CardLargeHeaderView setImage(@Nullable Uri uri) { - imageView.setImageURI(uri); + imageView.setVisibility(uri == null ? GONE : VISIBLE); + if (uri != null) { + imageView.loadImage(uri); + } return this; } @@ -53,4 +63,33 @@ pageTitleView.setText(title); return this; } + + private void resetBackgroundColor() { + backgroundView.setBackgroundColor(getResources().getColor(R.color.gray_background)); + } + + private class ImageLoadListener implements FaceAndColorDetectImageView.OnImageLoadListener { + @Override + public void onImageLoaded(final int bmpHeight, @Nullable final PointF faceLocation, @ColorInt final int mainColor) { + backgroundView.post(new Runnable() { + @Override + public void run() { + animateBackgroundColor(backgroundView, mainColor); + } + }); + } + + @Override + public void onImageFailed() { + resetBackgroundColor(); + } + + public void animateBackgroundColor(@NonNull View view, @ColorInt int targetColor) { + final int animDuration = 500; + final ObjectAnimator animator = ObjectAnimator.ofObject(view.getBackground(), "color", + new ArgbEvaluator(), targetColor); + animator.setDuration(animDuration); + animator.start(); + } + } } \ No newline at end of file diff --git a/app/src/main/java/org/wikipedia/feed/view/FeedRecyclerAdapter.java b/app/src/main/java/org/wikipedia/feed/view/FeedRecyclerAdapter.java index 5e4962a..cbc5139 100644 --- a/app/src/main/java/org/wikipedia/feed/view/FeedRecyclerAdapter.java +++ b/app/src/main/java/org/wikipedia/feed/view/FeedRecyclerAdapter.java @@ -40,6 +40,12 @@ Card item = item(position); CardView view = holder.getView(); + if (isCardAssociatedWithView(view, item)) { + // Don't bother reloading the same card into the same view + return; + } + associateCardWithView(view, item); + if (view instanceof IntegerListCardView) { ((IntegerListCardView) view).set((IntegerListCard) item); } else if (view instanceof ContinueReadingCardView) { @@ -88,4 +94,12 @@ throw new IllegalArgumentException("viewType=" + viewType); } } + + private boolean isCardAssociatedWithView(@NonNull CardView view, @NonNull Card card) { + return card.equals(view.getTag()); + } + + private void associateCardWithView(@NonNull CardView view, @NonNull Card card) { + view.setTag(card); + } } diff --git a/app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderImageView.java b/app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderImageView.java index aeeb195..b559341 100644 --- a/app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderImageView.java +++ b/app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderImageView.java @@ -3,18 +3,21 @@ import android.annotation.TargetApi; import android.content.Context; import android.graphics.PointF; +import android.net.Uri; import android.os.Build; import android.support.annotation.Nullable; +import android.text.TextUtils; import android.util.AttributeSet; import android.widget.FrameLayout; import org.wikipedia.R; +import org.wikipedia.views.FaceAndColorDetectImageView; import butterknife.BindView; import butterknife.ButterKnife; public class ArticleHeaderImageView extends FrameLayout { - @BindView(R.id.view_article_header_image_image) ImageViewWithFace image; + @BindView(R.id.view_article_header_image_image) FaceAndColorDetectImageView image; public ArticleHeaderImageView(Context context) { super(context); @@ -37,16 +40,16 @@ init(); } - public void setLoadListener(@Nullable ImageViewWithFace.OnImageLoadListener listener) { + public void setLoadListener(@Nullable FaceAndColorDetectImageView.OnImageLoadListener listener) { image.setOnImageLoadListener(listener); } public void load(@Nullable String url) { - if (url == null) { + if (TextUtils.isEmpty(url)) { setVisibility(GONE); } else { setVisibility(VISIBLE); - image.loadImage(url); + image.loadImage(Uri.parse(url)); } } @@ -64,7 +67,7 @@ return getVisibility() != GONE; } - public ImageViewWithFace getImage() { + public FaceAndColorDetectImageView getImage() { return image; } diff --git a/app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderView.java b/app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderView.java index ecbf8e5..da3b18e 100644 --- a/app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderView.java +++ b/app/src/main/java/org/wikipedia/page/leadimages/ArticleHeaderView.java @@ -31,7 +31,6 @@ import org.wikipedia.media.AvPlayer; import org.wikipedia.media.DefaultAvPlayer; import org.wikipedia.media.MediaPlayerImplementation; -import org.wikipedia.page.leadimages.ImageViewWithFace.OnImageLoadListener; import org.wikipedia.richtext.LeadingSpan; import org.wikipedia.richtext.ParagraphSpan; import org.wikipedia.richtext.AudioUrlSpan; @@ -40,6 +39,7 @@ import org.wikipedia.util.GradientUtil; import org.wikipedia.util.StringUtil; import org.wikipedia.views.AppTextView; +import org.wikipedia.views.FaceAndColorDetectImageView; import org.wikipedia.views.ObservableWebView; import org.wikipedia.views.ViewUtil; @@ -114,7 +114,7 @@ return image.getImage(); } - public void setOnImageLoadListener(@Nullable OnImageLoadListener listener) { + public void setOnImageLoadListener(@Nullable FaceAndColorDetectImageView.OnImageLoadListener listener) { image.setLoadListener(listener); } diff --git a/app/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java b/app/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java index 3b4a696..f05fdb1 100755 --- a/app/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java +++ b/app/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java @@ -28,6 +28,7 @@ import org.wikipedia.readinglist.AddToReadingListDialog; import org.wikipedia.util.DimenUtil; import org.wikipedia.util.UriUtil; +import org.wikipedia.views.FaceAndColorDetectImageView; import org.wikipedia.views.ObservableWebView; import static org.wikipedia.util.DimenUtil.getContentTopOffsetPx; @@ -358,7 +359,7 @@ } } - private class ImageLoadListener implements ImageViewWithFace.OnImageLoadListener { + private class ImageLoadListener implements FaceAndColorDetectImageView.OnImageLoadListener { @Override public void onImageLoaded(final int bmpHeight, @Nullable final PointF faceLocation, @ColorInt final int mainColor) { articleHeaderView.post(new Runnable() { diff --git a/app/src/main/java/org/wikipedia/page/leadimages/ImageViewWithFace.java b/app/src/main/java/org/wikipedia/views/FaceAndColorDetectImageView.java similarity index 92% rename from app/src/main/java/org/wikipedia/page/leadimages/ImageViewWithFace.java rename to app/src/main/java/org/wikipedia/views/FaceAndColorDetectImageView.java index ec261f9..50f3ae1 100644 --- a/app/src/main/java/org/wikipedia/page/leadimages/ImageViewWithFace.java +++ b/app/src/main/java/org/wikipedia/views/FaceAndColorDetectImageView.java @@ -1,4 +1,4 @@ -package org.wikipedia.page.leadimages; +package org.wikipedia.views; import android.content.Context; import android.graphics.Bitmap; @@ -25,7 +25,7 @@ import org.wikipedia.R; import org.wikipedia.util.log.L; -public class ImageViewWithFace extends SimpleDraweeView { +public class FaceAndColorDetectImageView extends SimpleDraweeView { private static final int BITMAP_COPY_WIDTH = 200; public interface OnImageLoadListener { @@ -36,15 +36,15 @@ private FacePostprocessor facePostprocessor = new FacePostprocessor(); @NonNull private OnImageLoadListener listener = new DefaultListener(); - public ImageViewWithFace(Context context) { + public FaceAndColorDetectImageView(Context context) { super(context); } - public ImageViewWithFace(Context context, AttributeSet attrs) { + public FaceAndColorDetectImageView(Context context, AttributeSet attrs) { super(context, attrs); } - public ImageViewWithFace(Context context, AttributeSet attrs, int defStyle) { + public FaceAndColorDetectImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @@ -52,8 +52,8 @@ this.listener = listener == null ? new DefaultListener() : listener; } - public void loadImage(String url) { - ImageRequest request = ImageRequestBuilder.newBuilderWithSource(Uri.parse(url)) + public void loadImage(@NonNull Uri uri) { + ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri) .setProgressiveRenderingEnabled(true) .setPostprocessor(facePostprocessor) .build(); diff --git a/app/src/main/res/layout/view_article_header_image.xml b/app/src/main/res/layout/view_article_header_image.xml index ed393e6..2ec7fe9 100644 --- a/app/src/main/res/layout/view_article_header_image.xml +++ b/app/src/main/res/layout/view_article_header_image.xml @@ -11,7 +11,7 @@ android:src="?lead_image_drawable" android:contentDescription="@null" /> - <org.wikipedia.page.leadimages.ImageViewWithFace + <org.wikipedia.views.FaceAndColorDetectImageView android:id="@+id/view_article_header_image_image" android:layout_width="match_parent" android:layout_height="match_parent" diff --git a/app/src/main/res/layout/view_card_header_large.xml b/app/src/main/res/layout/view_card_header_large.xml index 7024397..33d3a0f 100644 --- a/app/src/main/res/layout/view_card_header_large.xml +++ b/app/src/main/res/layout/view_card_header_large.xml @@ -9,6 +9,7 @@ android:orientation="horizontal"> <LinearLayout + android:id="@+id/view_card_header_large_background" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" @@ -64,8 +65,8 @@ </LinearLayout> - <com.facebook.drawee.view.SimpleDraweeView - style="@style/SimpleDraweeViewPlaceholder.Article" + <org.wikipedia.views.FaceAndColorDetectImageView + style="@style/SimpleDraweeViewPlaceholder" android:id="@+id/view_card_header_large_image" android:layout_width="128dp" android:layout_height="match_parent" /> -- To view, visit https://gerrit.wikimedia.org/r/295550 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I4cdf6599f2e064b37d6f239e09fe2a515130c66c Gerrit-PatchSet: 1 Gerrit-Project: apps/android/wikipedia Gerrit-Branch: master Gerrit-Owner: Dbrant <dbr...@wikimedia.org> Gerrit-Reviewer: BearND <bsitzm...@wikimedia.org> Gerrit-Reviewer: Brion VIBBER <br...@wikimedia.org> Gerrit-Reviewer: Mholloway <mhollo...@wikimedia.org> Gerrit-Reviewer: Niedzielski <sniedziel...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits