Bottom Navigation Bar: Text size is increasing on pressing?

Question

I am using the Bottom Navigation Bar in Android. By default when I select an item the text size of the label of that item increases. As seen here by the 'tournaments' label.

Is there a way to remove this so the word 'tournaments' stays the same size?

score 28 · Answer 1 · edited Feb 28 '19 at 07:46

You can set the active and inactive textAppearance for a BottomNavigationView via styles:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/BottomNavigationView"/>

Put below styles in styles.xml file

<style name="BottomNavigationView">
    <item name="itemTextAppearanceActive">@style/TextAppearance.BottomNavigationView.Active</item>
    <item name="itemTextAppearanceInactive">@style/TextAppearance.BottomNavigationView.Inactive</item>
</style>

 <!-- blank styles for better code readability-->
<style name="TextAppearance"/>
<style name="TextAppearance.BottomNavigationView"/>

<!-- inactive tab icon style -->
<style name="TextAppearance.BottomNavigationView.Inactive">
    <item name="android:textSize">12sp</item>
</style>

<!-- active tab icon style -->
<style name="TextAppearance.BottomNavigationView.Active">
    <item name="android:textSize">12sp</item>
</style>

With TextAppearance you can control more than just textSize, but also properties such as fontFamily, etc.

Reference to used attrs: https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/bottomnavigation/res/values/attrs.xml — nuamehas, Nov 28 '18 at 18:04

score 27 · Accepted Answer · answered Nov 27 '17 at 12:18

27

Try to add this code in dimens.xml file

<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>

answered Nov 27 '17 at 12:18

Mitesh Vanaliya

2,491
24
39

I don't get any error log. I even tried to change the value of text size in the library's value.xml file and set `badge_text_size` to 50sp. But still no luck. – viper Aug 02 '18 at 11:23
Thank you for the solution, it saved much of my time! – hetsgandhi Mar 30 '20 at 05:48

score 5 · Answer 3 · answered Dec 26 '18 at 07:21

You have to do 2 simple things if your using support library '28.0.0-alpha1' or higher -

Add below two lines in your dimen.xml file

<dimen name="design_bottom_navigation_text_size" tools:override="true">15sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">15sp</dimen>

And in view -

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:foreground="?attr/selectableItemBackground"
            app:itemIconTint="@color/colorAccent"
            app:itemTextColor="@color/colorAccent"
            android:elevation="16dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/navigation" />

Put app:labelVisibilityMode="labeled"

That's all enjoy :-)

score 2 · Answer 4 · answered Sep 06 '19 at 12:34

All control UI BottomNavigationView, below. I used dependence com.google.android.material:material for BottomNavigationView.

 private void editBottomNavigationViewItems(BottomNavigationView bottomNavigationView) {

        for (int i = 0; i < bottomNavigationView.getChildCount(); i++) {

            try {

                View item = bottomNavigationView.getChildAt( i );

                if (item instanceof BottomNavigationMenuView) {

                    BottomNavigationMenuView menu = (BottomNavigationMenuView) item;
                    for (int j = 0; j < menu.getChildCount(); j++) {

                        try {

                            View menuItem = menu.getChildAt( j );

                            // not chosen item menu  GO
                            View _small = menuItem.findViewById(com.google.android.material.R.id.smallLabel);//dependence com.google.android.material:material
                            //View _small = menuItem.findViewById(android.support.design.R.id.smallLabel);// dependence android.support.design
                            if ( _small instanceof TextView ) {
                                //_small.setPadding(0, 0, 0, 0);// remove all padding
                                TextView _tv = (TextView)_small;
                                _tv.setTextSize( 12 );// set size text
                            }// not chosen item menu  END

                            //this chosen item menu GO
                            View _large = menuItem.findViewById(com.google.android.material.R.id.largeLabel);//dependence com.google.android.material:material
                            //View _large = menuItem.findViewById(android.support.design.R.id.largeLabel);//dependence android.support.design.R.id.largeLabel
                            if ( _large instanceof TextView ) {
                                _large.setPadding(0,0,0,0);// remove all padding
                                TextView _tv = (TextView)_large;
                                _tv.setTextSize( 12 );// set size text
                            }// this chosen item menu  END

                        } catch ( NullPointerException npei ) {
                            Log.e("TAG", "get:BottomNavigationMenuView: " + npei.getMessage() );
                        }

                    }

                }

            } catch ( NullPointerException npe ) {
                Log.e("TAG", "get:BottomNavigationView: " + npe.getMessage() );
            }

        }

    }

this was the solution for me, iterate through each Large label and remove padding. Thanks! — Pedro Antonio, Jun 16 '20 at 15:01

Ankit Lathiya · Answer 5 · 2019-12-09T07:29:23.397

Use this method in onCreate() and before bottom_navigation_menu.setOnNavigationItemSelectedListener:-

public void removePaddingFromBottomNavigationItem() {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottom_navigation_menu.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);
            }
        }
    }

And use this code in styles.xml:-

<style name="TextAppearance.BottomNavigationView.Inactive">
    <item name="android:textSize">@dimen/_10ssp</item>
</style>

<style name="TextAppearance.BottomNavigationView.Active">
    <item name="android:textSize">@dimen/_10ssp</item>
</style>

score 0 · Answer 6 · answered Jul 01 '20 at 07:23

Try with below line in dimen.xml

<dimen name="design_bottom_navigation_text_size" tools:override="true">8sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">8sp</dimen>
<dimen name="design_bottom_navigation_icon_size">15dp</dimen>
<dimen name="design_bottom_navigation_height">45dp</dimen>

Bottom Navigation Bar: Text size is increasing on pressing?

6 Answers6

Linked