如何减少BottomNavigationView图标与文字下方的空白区域？

问题场景 #

使用com.google.android.material.bottomnavigation.BottomNavigationView实现底部导航栏时，图标和文字下方存在过多空白。直接缩小layout_height会导致图标顶部被截断，因为图标和文字的位置并未随导航栏高度调整。

当前布局代码：

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="0dp"
        android:layout_height="120dp"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="#FFFFFF"
        app:itemPaddingTop="10dp"
        app:itemIconSize="27dp"
        app:itemTextAppearanceActive="@style/BtmNavSelectedTextStyle"
        app:itemTextAppearanceInactive="@style/BtmNavUnselectedTextStyle"
        app:labelVisibilityMode="labeled"
        app:itemHorizontalTranslationEnabled="false"
        app:itemBackground="@android:color/transparent"
        app:itemActiveIndicatorStyle="@android:color/transparent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/menu_bottom_nav" />

解决方案 #

核心是调整底部导航项的内边距，而非直接修改控件整体高度：

• 调整Item内边距，修正元素位置
  当前设置的app:itemPaddingTop="10dp"会让图标文字整体上移，加剧下方空白。移除该属性，同时设置底部负内边距，把图标文字整体向下偏移，抵消默认的底部空白：

  app:itemPaddingTop="0dp"
  app:itemPaddingBottom="-8dp" <!-- 数值可根据实际视觉效果微调 -->
  

• 匹配合理的控件高度
  调整完内边距后，再把layout_height缩小到需求值，比如改为80dp，此时图标文字会处于导航栏的合理位置，不会被截断：

  android:layout_height="80dp"
  

• 自定义Item布局（精细控制方案）
  如果上述方法达不到预期，可以自定义导航项布局，完全掌控图标和文字的位置：

  1. 创建layout/bottom_nav_item.xml：

     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:gravity="center"
         android:orientation="vertical"
         android:paddingTop="0dp"
         android:paddingBottom="4dp">
     
         <ImageView
             android:id="@+id/icon"
             android:layout_width="27dp"
             android:layout_height="27dp"/>
     
         <TextView
             android:id="@+id/label"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="4dp"/>
     </LinearLayout>
     

  2. 在BottomNavigationView中配置自定义布局：

     app:itemLayout="@layout/bottom_nav_item"
     

关键说明 #

BottomNavigationView内部有默认的内边距和布局规则，直接修改layout_height只会裁剪控件，不会调整内部元素位置。通过调整itemPaddingTop和itemPaddingBottom改变内部元素的整体位置，再配合合适的控件高度，就能消除下方多余空白。

内容的提问来源于stack exchange，提问作者ny_k