Long text cutting off in BottomNavigationView

Overview

Long texts cut off in BottomNavigationView only when tab is selected. When tab is unselected, it displays the text properly

When tab is unselected (Meine tickets)

When tab is selected (Meine tickets)

Reproduction steps

• Setup bottom navigation view with 5 menu items with titles as: “Starseite”, “Suchen”, “Meine Tickets”, “Verkaufen”, “Profil”

<menu
  xmlns:android="http://schemas.android.com/apk/res/android">
  <item
    android:id="@+id/action_home"
    android:icon="@drawable/tab_home_icon_selector"
    android:title="@string/nav_tab_home"/>

  <item
    android:id="@+id/action_explore"
    android:icon="@drawable/tab_explore_icon_selector"
    android:title="@string/nav_tab_explore"/>

  <item
    android:id="@+id/action_my_tickets"
    android:icon="@drawable/tab_tickets_icon_selector"
    android:title="@string/nav_tab_my_tickets"/>

  <item
    android:id="@+id/action_sell"
    android:icon="@drawable/tab_sell_icon_selector"
    android:title="@string/nav_tab_sell"/>

  <item
    android:id="@+id/action_profile"
    android:icon="@drawable/tab_profile_icon_selector"
    android:title="@string/nav_tab_profile"/>
</menu>

• View style is:

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/home.navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    app:menu="@menu/home"/>

Version number

• Found in version 1.0.0-alpha3

Operating system and device

• Found in Nexus 5X emulator running Android Oreo

[ppthakur]

Please add this property in your Xml app:labelVisibilityMode=“selected”

[dimasdark]

Use @sagrawal2418 answer:

BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);   
 for (int i = 0; i < menuView.getChildCount(); i++) {
        BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
        View activeLabel = item.findViewById(R.id.largeLabel);
        if (activeLabel instanceof TextView) {
            activeLabel.setPadding(0, 0, 0, 0);
        }
    }
}

in combination with @DhanalakshmiS answer, it works perfectly. There’s no padding at all and text remains the same:

<!-- Bottom Menu Override -->
<dimen name="design_bottom_navigation_text_size" tools:override="true">12sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>