4

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

Big_Chair
  • 2,781
  • 3
  • 31
  • 58
  • Can you wrap_content the height with `android:layout_height="wrap_content"` – Zain May 15 '22 at 18:13
  • @Zain Then the bottom bar just randomly takes up like 80% of the screen, that's why I had to make it 10% of the screen height. – Big_Chair May 16 '22 at 08:06
  • Not sure of that as couldn't reproduce it, probably something set globally in style file – Zain May 16 '22 at 18:13
  • Yes, also tried with the constraints and contents go in the middle. There could be a workaround using a custom style with arbitrary multiple lines which tends to get the title much space in below `` – Zain May 16 '22 at 19:39
  • 1
    @Zain Thank you for your time, I have found the issue, see my answer below. – Big_Chair May 16 '22 at 19:49

2 Answers2

3

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.

Big_Chair
  • 2,781
  • 3
  • 31
  • 58
1

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.

Andrew Panasiuk
  • 626
  • 1
  • 8
  • 17