Android Bottom Navigation: space between icon and text

Question

How to change the vertical space between icon and text in BottomNavigation programmatically? The only way I found is to modify dimens.xml:

<dimen name="design_bottom_navigation_height" tools:override="true">60dp</dimen>

But it's not possible to modify dimens from the code. What should I do? How to find which parameter is changing when we modify "design_bottom_navigation_height"? Thanks in advance.

Arrio

Currently there isn't a public method to do it – Dorotheadorothee

How to adapt Bottom Navigation for using with large tablets then? The text and icons are to small to use without any adaptation. But when you increasing the size of icon and the text size programmatically they overlap each other. – Arrio

Answer 1

Put this on your theme

<style name="text_active">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/red_button</item>
</style>

<style name="text_inactive">
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/your_navigation_background_color</item>
</style>

and then assign them to the bottom navigation view like this

app:itemTextAppearanceActive="@style/text_active"
app:itemTextAppearanceInactive="@style/text_inactive"
app:labelVisibilityMode="labeled"

Foote

Answer 2

app:itemPaddingTop and app:itemPaddingBottom attributes can help to adjust the space between the icon and label inside BottomNavigationView item.

Actually, they're just managing space between top edge and icon, and bottom edge and label respectively but that also makes possible to increase/decrease space between icon and label.

Kick