Nick Mowen Nick Mowen - 1 month ago 8
Android Question

Which view should be used for new Material Design Bottom Navigation?

I am sure that y'all have heard about the addition of bottom navigation to the material design guidelines. I am planning on adding it to my app. However, I am not sure what the best way to approach it is. What kind of a view would be best to show the bottom bar?

Answer

A LinearLayout with equal weights for its views, horizontal orientation. Buttons in the LinearLayout with drawableTop set to the icon of choice.

Add it to the bottom:

In a FrameLayout or CoordinatorLayout you can add it to the bottom with layout_gravity="bottom" or in a RelativeLayout use android:layout_alignParentBottom="true"

Dimensions, font size etc:

Please refer to the material design bottom navigation specs about it for the margins and font sizes etc:

Height: 56dp

Icon: 24 x 24dp

Content alignment:
Text and icon are centered horizontally within view.

Padding:

  • 6dp above icon (active view), 8dp above icon (inactive view)
  • 10dp under text
  • 12dp left and right of text

Text label:

  • Roboto Regular 14sp (active view)

  • Roboto Regular 12sp (inactive view)

Hide on scroll

Use a CoordinatorLayout from android design support library. Add this LinearLayout as a child in the xml and set a Behavior to to hide on scroll.


Update

There is now an open source library available that is built to spec: https://github.com/roughike/BottomBar

Update 2

It is now part of the support lib.

Comments