Page MenuHomePhabricator

Improve gradient scrim on top of images.
Closed, ResolvedPublic

Description

We currently display the page title, as well as the Toolbar, on top of the lead image of the current article. Since the lead image can often be a very light color, we overlay a dark gradient on top of the image, and show the text on top of it, so that the text can stand out.

The gradient that we've been using is a simple linear gradient. This means that the gradient ends with a "seam" in the middle of the image, an effect which is often noticeable in especially light images. Ideally, we need a more "asymptotic" gradient, which would trail off gradually, and blend seamlessly with the underlying image.

Details

Event Timeline

Dbrant raised the priority of this task from to Medium.
Dbrant updated the task description. (Show Details)
Dbrant moved this task to Needs Triage on the Wikipedia-Android-App-Backlog board.
Dbrant subscribed.

Example of clearly visible gradient seam:

device-2015-07-05-122454.png (1×1 px, 379 KB)

..and proposed solution:

device-2015-07-05-123123.png (1×1 px, 389 KB)

Change 222531 had a related patch set uploaded (by Dbrant):
Smooth gradients in Lead Image and Gallery.

https://gerrit.wikimedia.org/r/222531

Change 222531 merged by jenkins-bot:
Smooth gradients in Lead Image and Gallery.

https://gerrit.wikimedia.org/r/222531

2.0.105-alpha-2015-07-21 emulator Nexus 5 API 22 x86

Screen Shot 2015-07-21 at 3.04.50 PM.png (907×539 px, 177 KB)

Signed off by design.
Assume we have to look at some specific cases around readability of the title as a separate ticket, which might be related to extracting presence of white in the title area.

2.0.108-alpha-2015-08-06 - Checked on Nexus5(Android 5.1)
Samsung Tablet Ce0168(Android 4.0.4)