BottomNavigationView: How to remove hypheanted labels

Question

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.

I'm sorry I can't post an image directly, as it won't allow me due to reputation — Julián M., Sep 03 '18 at 03:32
I don't know about the others, but I just adjust the height and width manually in the XML design. Giving it more spaces (padding manually) — Angus, Sep 03 '18 at 03:42
@AngusTay How? I've only found how to change text sizes and BottomNavigation height — Julián M., Sep 03 '18 at 03:50

score 16 · Accepted Answer · answered Sep 08 '18 at 01:54

16

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!

answered Sep 08 '18 at 01:54

Julián M.

912
8
11

Why it show "attribute :itemTextAppearanceActive not found" in my fragment layout? – quangkid Sep 18 '18 at 16:37
@quangkid you need to add android:theme="@style/MaterialBaseTheme" to your view xml and then add to your style file , also add implementation 'com.google.android.material:material:1.1.0-alpha10' to your build.gradle – Ahmed na Sep 19 '19 at 02:45

BottomNavigationView: How to remove hypheanted labels

1 Answers1

Linked