I’m having an issue with my BottomNavigationView where the icons are not vertically centered. In the Android Studio preview, everything looks perfect, but when I run the app on an emulator, the height of the BottomNavigationView is larger, causing the icons to appear above the middle. I’m using Kotlin and XML for my layout.

Here is my layout XML:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/main_activity_nav" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:background="@drawable/nav_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_nav_menu"
        app:itemIconSize="28dp"
        app:labelVisibilityMode="unlabeled"
        app:itemIconTint="@drawable/nav_item_selector"
        app:itemBackground="@drawable/nav_item_background"
        app:itemRippleColor="@null"
        app:itemActiveIndicatorStyle="@null"
</androidx.constraintlayout.widget.ConstraintLayout>

nav_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="100dp"/>
            <solid android:color="@color/white"/>
        </shape>
    </item>
</selector>

What I’ve tried:

1. Setting a Fixed Height:

   • I tried setting a fixed height (e.g., 56dp or 72dp) for the BottomNavigationView, but this caused the icons to be cut off and only half-visible.

2. Ensuring No Padding in Drawable Resources:

   • I verified that there is no padding set in the drawable resources, such as nav_background.xml, nav_item_selector.xml, and nav_item_background.xml.

3. Adjusting itemIconSize:

   • I tried lowering the itemIconSize to see if it makes any difference, but it did not solve the issue.

4. Maintaining wrap_content Height:

   • When I set the height to wrap_content, the icons are not centered and appear above the middle.

Android Emulator:

Android Studio Preview: