Page MenuHomePhabricator

Cleaner look for tabs
Closed, ResolvedPublic

Assigned To
Authored By
scblr
May 3 2019, 9:31 AM
Referenced Files
F29266142: Screenshot_1559063606.png
May 28 2019, 5:17 PM
F29266151: Screenshot_1559063651.png
May 28 2019, 5:17 PM
F29266146: Screenshot_1559063624.png
May 28 2019, 5:17 PM
F29258672: Screenshot_20190527-151839.png
May 27 2019, 1:39 PM
F29075453: Screenshot_1558047092.png
May 16 2019, 11:22 PM
F28913756: 03-tab-redesign-multiple.png
May 3 2019, 9:43 AM
F28913749: 01-tab-redesign-with-image.png
May 3 2019, 9:43 AM
F28913751: 02-tab-redesign-without-image.png
May 3 2019, 9:43 AM

Description

timebox: 1 hour

Why are we doing this?

Tabs look ugly when stacked (shadows are too intense) and they use placeholder images, which we try to avoid since T218201.

Suggested solution

A visual overhaul, tab behavior stays exactly the same.

BeforeAfter (w/ image)After (w/o image)After (multiple)
Screenshot_20190503-102023.png (2×1 px, 657 KB)
01-tab-redesign-with-image.png (1×824 px, 818 KB)
02-tab-redesign-without-image.png (1×824 px, 243 KB)
03-tab-redesign-multiple.png (1×824 px, 807 KB)

Changes in written form:

  • Reduce tab shadow to what’s specified on Zeplin
  • Remove tab header placeholder image
  • Change tab header and frame color to paper_color
  • Add border-bottom to tab header when there’s no article image tab_placeholder_text_color
  • Change tab view background color to android:colorBackground

👉 Cleaner look for tabs on Zeplin.

Event Timeline

scblr added subscribers: Charlotte, Sharvaniharan, Dbrant.

FYI: added “Changes in written form“ section to the task’s description (as just discussed in standup @Charlotte @Dbrant @Sharvaniharan).

Note:

From my initial work, I've noticed that the following requests cannot be done from our side.

It will need the author of the library to have the methods available, which may take times.

Reduce tab shadow to what’s specified on Zeplin
Remove tab header placeholder image

Note:

Since the 3rd party library has limitation on customizing the layout, it would be nice to build our own version of Tab screen using the ViewPager2

https://developer.android.com/jetpack/androidx/releases/viewpager2

We can wait until it releases the stable version from Google.

Hi @schoenbaechler

Due to the limitation of the 3rd party library, the Tabs layout does not have too many options on customization.

The following screenshot shows the changes we can do currently:

Screenshot_1558047092.png (2×1 px, 686 KB)

The following items that we cannot change for the Tabs layout:

  1. Header text size, font-family, line-height
  2. Header text position, margin, padding
  3. Header icon visibility
  4. Tabs layout elevations

My suggestion is that we can apply the new design if it looks good to you, and create a sub ticket of advanced design changes.

We may send requests to the 3rd party library for more layout customizing options, but the time for the author to finish the work will be unknown.

Not necessarily worth it, I think, to ask the library author to add more customising options. We can certainly do so, but there's no guarantee that the author will do this, or that the options will be usable for our purposes if completed.

It would be good to reduce our dependence on these third-party libraries if Google is coming out with something that will work for us. We can revisit once there's a stable version of the class @cooltey mentions.

Meanwhile, @schoenbaechler, would the user experience be materially improved by making the changes that are able to be done with the current library?

Thanks @cooltey for investigating on this! It makes a lot of sense to wait with that until ViewPager2 is stable. We should not forget about it though, since lately I see repeating feedback about the laggy tab behavior on Google Play (will add it to Android Pulse).


@Charlotte:

(...) would the user experience be materially improved by making the changes that are able to be done with the current library?

UX wouldn’t be materially improved but @cooltey’s changes make it look a bit cleaner, so we should roll it out.

UX wouldn’t be materially improved but @cooltey’s changes make it look a bit cleaner, so we should roll it out.

I see. Thanks @schoenbaechler and will move it to Code Review column.

Hi @cooltey, you implemented it perfectly but some combinations I initially suggested don’t work well in dark and black mode. Sorry for that. Had to try out a few things – can you adapt to the colors below?

Screenshot_20190527-151839.png (2×1 px, 311 KB)

Also added all screens (in the ideal design for the future) to Zeplin:
https://app.zeplin.io/project/57a120b91998d8977642a238/dashboard?seid=5ccc0a9343a94567de7b311e

Feel free to move it to QA signoff once done! Thanks!

Hi @schoenbaechler, here are the screenshots I took after applied the changes.

Dark:

  1. the status bar color does not consistent with the tab background.
  2. First tab is a "screenshot" of the article itself, so it will have the original background color (which we cannot change programmatically)

Screenshot_1559063606.png (2×1 px, 469 KB)

Sepia: the status bar color does not consistent with the tab background.

Screenshot_1559063624.png (2×1 px, 356 KB)

Black

Screenshot_1559063651.png (2×1 px, 330 KB)

@cooltey, thanks much for the screens.

As mentioned on Slack yesterday evening. I wasn’t aware that the first tab is a screenshot. In addition, I just compared all the screens from the Alpha with the latest “official” version in the Play Store and have to admit, it’s not worth investing more time! It’s ok in its current state.

So let’s leave it as it is in the current Play Store version (2.7.50282-r-2019-05-24) and revisit the tabs as soon as we have more control over it (ViewPager2). Deal?

Sorry for the detour!

Yes, that's keep the current screen background and update the app:tabBackgroundColor="?attr/main_toolbar_color" based on our conversation on Slack.