Page MenuHomePhabricator

Update NavTabLayout and ArticleTabLayout to use BottomNavigationView
Closed, ResolvedPublic

Description

From the docs[0]:

Represents a standard bottom navigation bar for application. It is an implementation of material design bottom navigation[1].

[0] https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html
[1] https://material.google.com/components/bottom-navigation.html

Details

Event Timeline

Change 329227 had a related patch set uploaded (by Mhutti1):
Update NavTabLayout to use BottomNavigationView

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

BottomNavigationView doesn't seem to be appropriate for ArticleTabLayout in its current form as the buttons are actions not navigations. With more than 3 tabs the view is animated and it makes no sense to have an action continuously selected (and so larger than the others).

@RHo, are you cool with this change? This will let us use the latest and greatest Google components. Sample APK and screenshots below

screenshot-2017-01-03-14-07-03-214108444.png (1×1 px, 1 MB)
screenshot-2017-01-03-14-37-07-147796185.png (1×1 px, 677 KB)

screenshot-2017-01-03-14-07-09-594747035.png (1×1 px, 1 MB)

hi @Niedzielski – no issue with changing to use the standard bottom navigation component. However, current screenshots show a couple of minor visual discrepancies with respect to application of the guidelines [1] which should be addressed:

  • Decrease the width of the active item from what appears to be using the maximum 168dp width so that the items appear more evenly spaced on the nav bar:
    pasted_file (618×1 px, 290 KB)
  • Spacing between the active item label and the icon should be 6dp, but screenshots show label almost touching icon.

pasted_file (654×1 px, 286 KB)

[1] https://material.io/guidelines/components/bottom-navigation.html#bottom-navigation-style

So I spent some time trying to find the issue here and I think its with the support library. The issue also occurs in this project https://medium.com/@hitherejoe/exploring-the-android-design-support-library-bottom-navigation-drawer-548de699e8e0#.6qjobx3m9 if you add a 4th item to the menu. They havn't implemented their own guidelines right.

https://code.google.com/p/android/issues/detail?id=230653 fixes one of them.

@RHo Is it ok if I submit an issue to Google with your screenshots to fix the other?
I can add it to https://code.google.com/p/android/issues/detail?id=229845&q=BottomNavigationView&colspec=ID%20Status%20Priority%20Owner%20Summary%20Stars%20Reporter%20Opened

hi @Mhutti1 – yes, please feel free to submit the issues with my screenshot. And thanks for looking into these issues :)

Change 329227 merged by jenkins-bot:
Update NavTabLayout to use BottomNavigationView

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