How to make BottomNavigationView in Android scroll when there are more icons than will fit without shrinking them?

Question

I have a navigation bar with three tabs.

I'd like to add a fourth and have them scroll. Instead when I add a fourth, the icons shrink and the names disappear until one of he tabs is selected.

Is it possible?

Answer 1

setLabelVisibilityMode gives the option for label to be displayed permanently against the items.

BottomNavigationView doesn't allow scrolling functionality as it is against the design guidelines.

Don’t.

Bottom navigation bar destinations don’t scroll.

If you were insistent, you could create a similar design using a RadioGroup and a series of ToggleButtons similar to this answer.

Answer 2

You can use this for showing both text and icons on BottomNevigationView for 3 to 5 items and stop shifting.

    app:labelVisibilityMode="labeled"

1. Add this some line of code in BottomNevigationView as shown

    <android.support.design.widget.BottomNavigationView
     android:id="@+id/bottom_navigation"
     android:layout_width="match_parent"
     android:layout_height="@dimen/seventy_dp"
     android:layout_semitransparent="true"
     android:background="@color/colorBottomNev"
     android:showAsAction="always|withText"
     app:itemIconTint="@drawable/bottom_navigation_colors"
     app:itemTextColor="@drawable/bottom_navigation_colors"
     app:itemTextAppearanceActive="@style/BottomNavigationViewTextStyle"
     app:itemTextAppearanceInactive="@style/BottomNavigationViewTextStyle"
     app:menu="@menu/bottom_navigation_menu"
     app:labelVisibilityMode="labeled"/>

2. Add Menu Items like as follows:-

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/action_catalogue"
        android:icon="@drawable/catalogue"
        android:title="@string/catalogue"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_contracts"
        android:icon="@drawable/contract"
        android:title="@string/contracts"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_prospects"
        android:icon="@drawable/prospect"
        android:title="@string/prospects"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_performance"
        android:icon="@drawable/performance"
        android:title="@string/performance"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_advance"
        android:icon="@drawable/advance"
        android:title="@string/advance"
        android:enabled="true"
        app:showAsAction="ifRoom" />

</menu>

3. Add this style in style.xml file:

     <style name="BottomNavigationViewTextStyle">
                <item name="android:fontFamily">@font/montmedium</item>
                <item name="android:textSize">10sp</item>
                <item name="android:duplicateParentState">true</item>
                <item name="android:ellipsize">end</item>
                <item name="android:maxLines">1</item>
       </style>

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">10sp</dimen>
</resources>