Dbrant has uploaded a new change for review. https://gerrit.wikimedia.org/r/222531
Change subject: Smooth gradients in Lead Image and Gallery. ...................................................................... Smooth gradients in Lead Image and Gallery. When viewed on top of especially light images, the gradients that we display on top of the Lead Image, as well as the Gallery images, can have a noticeably abrupt "end", because these gradients are linear. This patch modifies the gradients to follow a cubic function, so that the gradient trails off more smoothly than a linear function. I've also removed the corresponding unused XML gradient drawables. Change-Id: Ic66637ea649ea7945d9ffe688c5d03b20f47810d --- D wikipedia/res/drawable/gallery_toolbar_shape.xml D wikipedia/res/drawable/lead_title_gradient.xml D wikipedia/res/drawable/toolbar_lead_gradient.xml M wikipedia/res/layout/activity_gallery.xml M wikipedia/res/layout/activity_page.xml M wikipedia/res/values/colors.xml M wikipedia/src/main/java/org/wikipedia/page/PageActivity.java M wikipedia/src/main/java/org/wikipedia/page/gallery/GalleryActivity.java M wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java A wikipedia/src/main/java/org/wikipedia/util/GradientUtil.java M wikipedia/src/main/java/org/wikipedia/views/ViewUtil.java 11 files changed, 130 insertions(+), 34 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/apps/android/wikipedia refs/changes/31/222531/1 diff --git a/wikipedia/res/drawable/gallery_toolbar_shape.xml b/wikipedia/res/drawable/gallery_toolbar_shape.xml deleted file mode 100644 index f822213..0000000 --- a/wikipedia/res/drawable/gallery_toolbar_shape.xml +++ /dev/null @@ -1,8 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<shape xmlns:android="http://schemas.android.com/apk/res/android"; - android:shape="rectangle"> - <gradient - android:startColor="#b8000000" - android:endColor="#00000000" - android:angle="270"/> -</shape> \ No newline at end of file diff --git a/wikipedia/res/drawable/lead_title_gradient.xml b/wikipedia/res/drawable/lead_title_gradient.xml deleted file mode 100644 index 4366dbe..0000000 --- a/wikipedia/res/drawable/lead_title_gradient.xml +++ /dev/null @@ -1,8 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<shape xmlns:android="http://schemas.android.com/apk/res/android"; - android:shape="rectangle"> - <gradient - android:startColor="#b8000000" - android:endColor="#00000000" - android:angle="90"/> -</shape> \ No newline at end of file diff --git a/wikipedia/res/drawable/toolbar_lead_gradient.xml b/wikipedia/res/drawable/toolbar_lead_gradient.xml deleted file mode 100644 index 0441981..0000000 --- a/wikipedia/res/drawable/toolbar_lead_gradient.xml +++ /dev/null @@ -1,8 +0,0 @@ -<?xml version="1.0" encoding="utf-8"?> -<shape xmlns:android="http://schemas.android.com/apk/res/android"; - android:shape="rectangle"> - <gradient - android:startColor="#60000000" - android:endColor="#00000000" - android:angle="270"/> -</shape> \ No newline at end of file diff --git a/wikipedia/res/layout/activity_gallery.xml b/wikipedia/res/layout/activity_gallery.xml index 49dca67..d87599a 100644 --- a/wikipedia/res/layout/activity_gallery.xml +++ b/wikipedia/res/layout/activity_gallery.xml @@ -19,8 +19,7 @@ <android.support.v7.widget.Toolbar android:id="@+id/gallery_toolbar" android:layout_width="match_parent" - android:layout_height="72dp" - android:background="@drawable/gallery_toolbar_shape"> + android:layout_height="80dp"> </android.support.v7.widget.Toolbar> <ProgressBar android:id="@+id/gallery_progressbar" @@ -38,8 +37,7 @@ android:layout_gravity="bottom" android:orientation="vertical" android:paddingBottom="32dp" - android:paddingTop="64dp" - android:background="@drawable/lead_title_gradient"> + android:paddingTop="64dp"> <TextView android:id="@+id/gallery_description_text" android:layout_width="match_parent" diff --git a/wikipedia/res/layout/activity_page.xml b/wikipedia/res/layout/activity_page.xml index 37273b3..7e9f29f 100644 --- a/wikipedia/res/layout/activity_page.xml +++ b/wikipedia/res/layout/activity_page.xml @@ -46,12 +46,11 @@ <FrameLayout android:id="@+id/main_toolbar_container" android:layout_width="match_parent" - android:layout_height="72dp"> + android:layout_height="80dp"> <LinearLayout android:id="@+id/main_toolbar_gradient" android:layout_width="match_parent" android:layout_height="match_parent" - android:background="@drawable/toolbar_lead_gradient" android:orientation="vertical"> </LinearLayout> <LinearLayout diff --git a/wikipedia/res/values/colors.xml b/wikipedia/res/values/colors.xml index 910828a..1ff9686 100644 --- a/wikipedia/res/values/colors.xml +++ b/wikipedia/res/values/colors.xml @@ -24,7 +24,8 @@ <color name="actionbar_background">#ff303030</color> <color name="actionbar_highlight">#ff808080</color> <color name="search_bar">#ff404040</color> - <color name="search_text_hint">#ff808080</color> + <color name="search_text_hint">#ff808080</color>b8000000 + <color name="lead_gradient_start">#b8000000</color> <!-- Make the main toolbar have its own unique color (but indistinguishable from actionbar_background). This is because we'll be setting its opacity programmatically diff --git a/wikipedia/src/main/java/org/wikipedia/page/PageActivity.java b/wikipedia/src/main/java/org/wikipedia/page/PageActivity.java index d12e1d1..7c1e3f1 100644 --- a/wikipedia/src/main/java/org/wikipedia/page/PageActivity.java +++ b/wikipedia/src/main/java/org/wikipedia/page/PageActivity.java @@ -22,7 +22,9 @@ import org.wikipedia.staticdata.MainPageNameData; import org.wikipedia.theme.ThemeChooserDialog; import org.wikipedia.util.ApiUtil; +import org.wikipedia.util.GradientUtil; import org.wikipedia.util.log.L; +import org.wikipedia.views.ViewUtil; import org.wikipedia.views.WikiDrawerLayout; import org.wikipedia.zero.ZeroMessage; @@ -191,6 +193,10 @@ getSupportActionBar().setTitle(""); searchBarHideHandler = new SearchBarHideHandler(this, toolbarContainer); + + // create a gradient for the toolbar + ViewUtil.setBackgroundDrawable(findViewById(R.id.main_toolbar_gradient), GradientUtil + .getCubicGradient(getResources().getColor(R.color.lead_gradient_start), Gravity.TOP)); // TODO: remove this when we drop support for API 10 boolean themeChanged = false; @@ -570,7 +576,9 @@ } //is the new title the same as what's already being displayed? if (!frag.getCurrentTab().getBackStack().isEmpty() - && frag.getCurrentTab().getBackStack().get(frag.getCurrentTab().getBackStack().size() - 1).getTitle().equals(title)) { + && frag.getCurrentTab().getBackStack() + .get(frag.getCurrentTab().getBackStack().size() - 1).getTitle() + .equals(title)) { //if we have a section to scroll to, then pass it to the fragment if (!TextUtils.isEmpty(title.getFragment())) { frag.scrollToSection(title.getFragment()); diff --git a/wikipedia/src/main/java/org/wikipedia/page/gallery/GalleryActivity.java b/wikipedia/src/main/java/org/wikipedia/page/gallery/GalleryActivity.java index 9953510..0eda1a6 100644 --- a/wikipedia/src/main/java/org/wikipedia/page/gallery/GalleryActivity.java +++ b/wikipedia/src/main/java/org/wikipedia/page/gallery/GalleryActivity.java @@ -15,6 +15,8 @@ import org.wikipedia.page.PageCache; import org.wikipedia.theme.Theme; import org.wikipedia.util.ApiUtil; +import org.wikipedia.util.GradientUtil; +import org.wikipedia.views.ViewUtil; import android.content.Intent; import android.net.Uri; @@ -103,12 +105,19 @@ setContentView(R.layout.activity_gallery); final Toolbar toolbar = (Toolbar) findViewById(R.id.gallery_toolbar); + // give it a gradient background + ViewUtil.setBackgroundDrawable(toolbar, GradientUtil.getCubicGradient( + getResources().getColor(R.color.lead_gradient_start), Gravity.TOP)); setSupportActionBar(toolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setTitle(""); toolbarContainer = (ViewGroup) findViewById(R.id.gallery_toolbar_container); infoContainer = (ViewGroup) findViewById(R.id.gallery_info_container); + // give it a gradient background + ViewUtil.setBackgroundDrawable(infoContainer, GradientUtil.getCubicGradient( + getResources().getColor(R.color.lead_gradient_start), Gravity.BOTTOM)); + progressBar = (ProgressBar) findViewById(R.id.gallery_progressbar); descriptionText = (TextView) findViewById(R.id.gallery_description_text); diff --git a/wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java b/wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java index 9d6b050..39834fe 100755 --- a/wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java +++ b/wikipedia/src/main/java/org/wikipedia/page/leadimages/LeadImagesHandler.java @@ -4,10 +4,12 @@ import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; +import android.graphics.drawable.Drawable; import android.text.Html; import android.text.TextUtils; import android.util.TypedValue; import android.graphics.PointF; +import android.view.Gravity; import android.view.View; import android.view.ViewGroup; import android.view.animation.Animation; @@ -33,7 +35,9 @@ import org.wikipedia.page.PageViewFragmentInternal; import org.wikipedia.util.ApiUtil; import org.wikipedia.util.DimenUtil; +import org.wikipedia.util.GradientUtil; import org.wikipedia.views.ObservableWebView; +import org.wikipedia.views.ViewUtil; public class LeadImagesHandler implements ObservableWebView.OnScrollChangeListener, ImageViewWithFace.OnImageLoadListener { private final Context context; @@ -57,7 +61,7 @@ /** * The height, in dp, that the gradient will extend above the page title. */ - private static final int TITLE_GRADIENT_HEIGHT_DP = 48; + private static final int TITLE_GRADIENT_HEIGHT_DP = 56; /** * Maximum height of the page title text. If the text overflows this size, then the @@ -98,6 +102,7 @@ private View pageTitleContainer; private TextView pageTitleText; private TextView pageDescriptionText; + private Drawable pageTitleGradient; private int displayHeightDp; private int imageBaseYOffset = 0; @@ -123,6 +128,9 @@ pageTitleContainer = imageContainer.findViewById(R.id.page_title_container); pageTitleText = (TextView)imageContainer.findViewById(R.id.page_title_text); pageDescriptionText = (TextView)imageContainer.findViewById(R.id.page_description_text); + + pageTitleGradient = GradientUtil.getCubicGradient( + parentFragment.getResources().getColor(R.color.lead_gradient_start), Gravity.BOTTOM); initDisplayDimensions(); @@ -492,7 +500,7 @@ pageDescriptionText.setTextColor(context.getResources().getColor(R.color.lead_text_color)); pageDescriptionText.setShadowLayer(2, 1, 1, context.getResources().getColor(R.color.lead_text_shadow)); // set the title container background to be a gradient - pageTitleContainer.setBackgroundResource(R.drawable.lead_title_gradient); + ViewUtil.setBackgroundDrawable(pageTitleContainer, pageTitleGradient); // set the correct padding on the container pageTitleContainer.setPadding(0, (int) (TITLE_GRADIENT_HEIGHT_DP * displayDensity), 0, 0); } diff --git a/wikipedia/src/main/java/org/wikipedia/util/GradientUtil.java b/wikipedia/src/main/java/org/wikipedia/util/GradientUtil.java new file mode 100644 index 0000000..2872eb9 --- /dev/null +++ b/wikipedia/src/main/java/org/wikipedia/util/GradientUtil.java @@ -0,0 +1,88 @@ +package org.wikipedia.util; + +import android.graphics.Color; +import android.graphics.LinearGradient; +import android.graphics.Shader; +import android.graphics.drawable.Drawable; +import android.graphics.drawable.PaintDrawable; +import android.graphics.drawable.ShapeDrawable; +import android.graphics.drawable.shapes.RectShape; +import android.view.Gravity; + +public final class GradientUtil { + + /** + * Create a cubic gradient by using a compound gradient composed of a series of linear + * gradients with intermediate color values. + * adapted from: https://github.com/romannurik/muzei/blob/master/main/src/main/java/com/google/android/apps/muzei/util/ScrimUtil.java + * @param baseColor The color from which the gradient starts (the ending color is transparent). + * @param gravity Where the gradient should start from. + * @return The resulting cubic gradient drawable. + */ + public static Drawable getCubicGradient(int baseColor, int gravity) { + final int numStops = 8; + final int cubePower = 3; + PaintDrawable paintDrawable = new PaintDrawable(); + paintDrawable.setShape(new RectShape()); + final int[] stopColors = new int[numStops]; + + int red = Color.red(baseColor); + int green = Color.green(baseColor); + int blue = Color.blue(baseColor); + int alpha = Color.alpha(baseColor); + + for (int i = 0; i < numStops; i++) { + float x = i * 1f / (numStops - 1); + float opacity = (float) Math.pow(x, cubePower); + if (opacity < 0.0f) { + opacity = 0.0f; + } else if (opacity > 1.0f) { + opacity = 1.0f; + } + stopColors[i] = Color.argb((int) (alpha * opacity), red, green, blue); + } + + final float x0, x1, y0, y1; + switch (gravity & Gravity.HORIZONTAL_GRAVITY_MASK) { + case Gravity.LEFT: + x0 = 1; + x1 = 0; + break; + case Gravity.RIGHT: + x0 = 0; + x1 = 1; + break; + default: + x0 = 0; + x1 = 0; + break; + } + switch (gravity & Gravity.VERTICAL_GRAVITY_MASK) { + case Gravity.TOP: + y0 = 1; + y1 = 0; + break; + case Gravity.BOTTOM: + y0 = 0; + y1 = 1; + break; + default: + y0 = 0; + y1 = 0; + break; + } + + paintDrawable.setShaderFactory(new ShapeDrawable.ShaderFactory() { + @Override + public Shader resize(int width, int height) { + return new LinearGradient(width * x0, height * y0, width * x1, height * y1, + stopColors, null, Shader.TileMode.CLAMP); + } + }); + + return paintDrawable; + } + + private GradientUtil() { + } +} \ No newline at end of file diff --git a/wikipedia/src/main/java/org/wikipedia/views/ViewUtil.java b/wikipedia/src/main/java/org/wikipedia/views/ViewUtil.java index 71e51ee..2c2e740 100644 --- a/wikipedia/src/main/java/org/wikipedia/views/ViewUtil.java +++ b/wikipedia/src/main/java/org/wikipedia/views/ViewUtil.java @@ -1,6 +1,7 @@ package org.wikipedia.views; import android.annotation.TargetApi; +import android.graphics.drawable.Drawable; import android.os.Build; import android.support.v4.view.ViewCompat; import android.view.View; @@ -26,6 +27,14 @@ view.startAnimation(animation); } + public static void setBackgroundDrawable(View view, Drawable drawable) { + if (ApiUtil.hasJellyBean()) { + view.setBackground(drawable); + } else { + view.setBackgroundDrawable(drawable); + } + } + private ViewUtil() { } } \ No newline at end of file -- To view, visit https://gerrit.wikimedia.org/r/222531 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Ic66637ea649ea7945d9ffe688c5d03b20f47810d Gerrit-PatchSet: 1 Gerrit-Project: apps/android/wikipedia Gerrit-Branch: master Gerrit-Owner: Dbrant <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
