How to change text padding in android bottom navigation view

Question

I am using the bottom navigation view for an android app. I have increased the size of my icon, but now the icon runs over the text. Here is what I see:

Here is a diagram of the bottom navigation view according to google design docs:

The number 10, I want to change that padding, but when I look in the properties for the navigation bar, I don't see where I can do it. How can I change it to a smaller number? In my bottom_layout.xml I am setting my items up like so:

<item
    android:id="@+id/menu_notifications"
    android:title="Professionals"
    android:icon="@drawable/ic_action_name"
    app:showAsAction="ifRoom"
    />

How can I change the bottom text padding?

thanks

Answer 1

You change the height of BottomNavigationView by overriding the below dimension

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

This will increase the height and bring down the text to avoid overlapping.

Answer 2

I was able to change the top and bottom padding of the items using a shape, and setting it in the app:itemBackground property of the BottomNavigationView.

Create my_shape.xml, here you can change the top and bottom padding

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <padding
        android:bottom="5dp"
        android:top="5dp"
    />
</shape>

Then, create my_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_checked="true"
        android:drawable="@drawable/my_shape" />

</selector>

And finally, set the itemBackground of your BottomNavigationView to:

app:itemBackground="@drawable/my_selector"