Page MenuHomePhabricator

[UX-Debt] App bar on Explore feed should appear as one single bar
Closed, ResolvedPublic

Description

There is a visual separation between the search bar and top of the first feed card appearing in a darker blue band below the blue app bar, when they should all appear on the single app bar.

Expected

Feed - Light.png (1×720 px, 545 KB)

Search bar and top of the first feed card should appear in the extended "flexible space" in the app bar, which upon scroll slide underneath the app bar. [see example interaction at https://material.io/guidelines/patterns/scrolling-techniques.html#scrolling-techniques-behavior ]

Actual

Screenshot_1500305416.png (1×1 px, 630 KB)

Proposed solutions

Per discussion in triage meeting

  • Hide the main toolbar activity in Explore and create a toolbar specific to Explore with search in the flex area Note: this may also resolve T171328
  • Use the same toolbar with flex-space for all menu items, but flex-space set to zero on all except for Explore
  • Hide the toolbar shadow until the search bar is scrolled under the toolbar

Event Timeline

Change 367928 had a related patch set uploaded (by Dbrant; owner: Dbrant):
[apps/android/wikipedia@master] Fake out Explore toolbar overlap as one single bar.

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

@RHo I believe I've managed to create the expected behavior by following the last option noted in the description (manually adding/removing the elevation on the toolbar). Feel free to try out the patch listed above. As I mentioned, changing the behavior of the Search bar will be a separate matter entirely, and is currently rather prohibitive, based on my experimentation. I'll leave some more notes on that ticket.

Change 367928 merged by jenkins-bot:
[apps/android/wikipedia@master] Fake out Explore toolbar overlap as one single bar.

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

Looks really good and swiping up to collapse is pretty smooth!

However, here's an update on the overall feed toolbar spacing:

Feed spacing on single and multi-column.png (1×2 px, 438 KB)

This seems to be looking great. I wanted to point out a little thing that I noticed. There's a possibility for the search bear to be partially under the hidden top bar in which case this doesn't seem to look pretty well. Not sure if it's that important.

Screenshot_20170731-185856.png (1×720 px, 502 KB)

In case this is considered for fixing, I guess T153573 could be considered parallely.

I pointed this out because, on seeing the Z-space diagram, side view found in the material design guideline for scrolling techniques, it seems the top bar should come above any other content on the screen. So, I thought the search bar should also be considered a content in this case.

I pointed this out because, on seeing the Z-space diagram, side view found in the material design guideline for scrolling techniques, it seems the top bar should come above any other content on the screen. So, I thought the search bar should also be considered a content in this case.

Hi @Kaartic - we are treating the search bar as part of the "flex space" described at the bottom of the scrolling techniques you mentioned, under "Flexible space with overlapping content". And yes, think the T153573 would be a separate bug.

Hi @Kaartic - we are treating the search bar as part of the "flex space" described at the bottom of the scrolling techniques you mentioned, under "Flexible space with overlapping content".

I see. I thought the search bar was a content. Didn't know you could consider the search bar as flex space. No issues.

Fortunately or Unfortunately, I happened to observe the odd behaviour depicted below.

Screenshot_20170802-115052.png (1×1 px, 96 KB)

I'm not pretty sure how to reproduce this but it seems to have occured as a result of a combination of events such as, switching from other apps and the wikipedia app and toggling the network connectivity on (or) off. I'll update the steps if I could find any.

BTW, it's a screenshot of the alpha dated 02-08-2017 on a moto g5 plus running android 7.0

+ @Dbrant - did you want to investigate this bug on this task or track separately?

That should be a separate task.

Hi @Kaartic - per the comment from @Dbrant I've created a separate bug ticket T172536 for the issue you're seeing.

Hi @Kaartic - per the comment from @Dbrant I've created a separate bug ticket T172536 for the issue you're seeing.

Thanks! I've updated the task with the Steps to reproduce

Same test as T171328, but check that upon scrolling, the search bar in that flex area should slide underneath the app bar.
open to view animated gif

hammerheadM4B30Zrho08092017123342.gif (960×540 px, 2 MB)

Tested using Nexus 5 (Android 6.0.1), Pixel (7.1.2) and Nexus 7 (5.1.1) on Wikipedia v2.6.200-alpha-2017-08-08

ABorbaWMF subscribed.

Tested on a Nexus 4 with Android 5.1 and a Pixel with Android 7.1.1

Looks great