CODEWITHSUNDEEP
androidbottomnavigationviewandroid-bottomnav
Big_Chair
Big_Chair

Reputation: 3239

Android BottomNavigationView: too much space between icon and text

As of recently the bottom nav bar started to include some strange space between the text and icons (I think after I updated the dependency):

enter image description here
(Colored red to see the boundaries)

There seems to be a spacer inbetween the icon and text now, which pushes both to the extreme ends of the bar. All I found so far is to use app:itemPaddingTop to try and manually push the icons back down, but this breaks the view on smaller devices.

This is the xml:

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="?android:attr/windowBackground"
        app:itemBackground="@color/darkGalaxy"
        app:itemIconTint="@color/bottom_nav_color_selector"
        app:itemTextColor="@color/bottom_nav_color_selector"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

Is there some way to make them both centered vertically with minimal margin?

Basically to look like this:
enter image description here

Upvotes: 5

Views: 7630

Answers (2)

Andrew Panasiuk
Andrew Panasiuk

Reputation: 656

After some investigation, it appears that 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 the top edge of the view and icon, and then the bottom edge and label respectively but that also makes it possible to increase/decrease space between icon and label.

Upvotes: 1

Big_Chair
Big_Chair

Reputation: 3239

After some testing, I found that it was because of the custom height that I set with app:layout_constraintHeight_percent="0.1". Stretching the bar higher than it is weirdly spaces the content like this (it wasn't like that when I first made it some months ago).

Anyway, I only had this percentage based height in there, because using android:layout_height="wrap_content" on the bottom nav bar made it take up most of the screen. But through the testing I found that this only happened because I was using android:background="?android:attr/windowBackground". I cannot remember why I used it, but removing it makes wrap_content work.

Upvotes: 4

Related Questions