BottomNavigationView: How to remove hypheanted labels

user_9164993 0
Viewed 3999

Implementing a 5-item BottomNavigationView -with the labels always shown- I'm using the following approach:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation"
        app:labelVisibilityMode="labeled"/>

Unfortunately, the result hyphenates words when active, as shown in the picture:

Hyphenated active label

I tried setting different styles for the label's active text:

app:itemTextAppearanceActive="@style/text_navigation_active_labels"

-- styles.xml --

<style name="text_navigation_active_labels">
    <item name="android:breakStrategy">simple</item>
    <item name="android:hyphenationFrequency">none</item>
</style>

But the result is exactly the same (whether I only use break strategy, hyphenationFrequency or both). I'm currently testing it on an API 27 physical phone.

Any help is appreciated.

android-bottom-nav-view android
1 Answers

As 5 items might be a lot of space, it is necessary to compromise text size. In order to fix it, adding a custom style to the BottomNavigationView text gets the job done:

 <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        ...
        app:itemTextAppearanceActive="@style/navTextActive"
        app:itemTextAppearanceInactive="@style/navTextInactive"/>

on styles.xml:

<style name="navTextInactive">
    <item name="android:textSize">11sp</item>
</style>

<style name="navTextActive">
    <item name="android:textSize">12sp</item>
</style>

Result:

FixedNavBar

Hope it can help anyone out there!

user_91649930
Related