How to increase icon size in android bottom navigation layout?

Question

I am using the bottom layout navigation style in android that was recently introduced by google in design library 25. In all the tutorials and questions i see, the images in their icons are a normal size, but mine are extra small, despite the fact that the image I'm saving to drawable folder is 72x72. Here is a screenshot:

How can I do it? Here is my code in my bottom_layout.xml:

  <?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/menu_home"
    android:title="test"
    android:icon="@drawable/tabbarglossary"
    app:showAsAction="always|withText"
    />
  <item
    android:id="@+id/menu_search"
    android:title="test2"
    android:icon="@drawable/mediationtabbar"
    app:showAsAction="always|withText"
    />

  <item
    android:id="@+id/menu_notifications"
    android:title="test3"
    android:icon="@drawable/ic_action_name"
    app:showAsAction="always|withText"
    />

</menu>

Answer 1

The icon size is hardcoded to 24dp in the item layout (see design_bottom_navigation_item.xml ) This can be changed programmatically:

BottomNavigationView bottomNavigationView = (BottomNavigationView) activity.findViewById(R.id.bottom_navigation_view);
BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
    final View iconView = menuView.getChildAt(i).findViewById(android.support.design.R.id.icon);
    final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();
    final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    // set your height here
    layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    // set your width here
    layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    iconView.setLayoutParams(layoutParams);
}

EDIT

For your problem that the icon covers your text:

You can override some default dimensions of the bottom navigation view. For example the height.

<dimen name="design_bottom_navigation_height" tools:override="true">56dp</dimen>

Check guidelines bottom navigation for default specs.

Answer 2

使用您的首选值设置app:itemIconSize属性。

Answer 3

Add these two lines to your bottom navigation:

app:menu="@menu/main_bottom_navigation"
app:itemIconSize="@dimen/bottom_navigation_icon_size"

In dimens.xml add:

<dimen name="bottom_navigation_icon_size" tools:override="true">32dp</dimen>
<dimen name="design_bottom_navigation_height" tools:override="true">72dp</dimen>

To increase the size of the icons, increase bottom_navigation_icon_size . You may need to change the value of design_bottom_navigation_height so that the text does not overlap or you get too much white space.

Answer 4

I would try using the Android Asset Studio to generate an generic icon for you, ensure that:

• The size of the icon is 24dp
• It has 0dp padding

Note : you can use a custom icon if you wish to do so.

It'll then generate you the corresponding drawable the with correct directory (mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).

Having static drawable dimensions such as 72x72 in your case may change the size of the icon depending on the density of your phone, different phones will translate pixels differently.

Just simply download the icons in a zip file and extract the drawable folders to your resources directory, this should solve your problem.

Answer 5

Here:

BottomNavigationView bottomNavigationView = (BottomNavigationView) 
configurationActivity.findViewById(R.id.bottom_navigation_view);
BottomNavigationMenuView menuView = (BottomNavigationMenuView) 
bottomNavigationView.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
     final View iconView = 
menuView.getChildAt(i).findViewById(android.support.design.R.id.icon);
     final ViewGroup.LayoutParams layoutParams = 
iconView.getLayoutParams();
     final DisplayMetrics displayMetrics = 
getResources().getDisplayMetrics();
layoutParams.height = (int) 
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, 
displayMetrics);
layoutParams.width = (int) 
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, 
 displayMetrics);
iconView.setLayoutParams(layoutParams);
}

you can adjust the size of images as like you want. Happy Coding

Answer 6

在 dimens.xml 中覆盖：

<dimen name="design_bottom_navigation_icon_size" tools:override="true">'your size in dp'</dimen>

Answer 7

in Kotlin

For those who wana try it on android-X and want the only one item to change its size this is the code i have modified a little bit From @Minkoo

//the code start from here....

val bottomNavigationView: BottomNavigationView =findViewById(R.id.bottomNavigationView); val menuView: BottomNavigationMenuView = bottomNavigationView.getChildAt(0) as BottomNavigationMenuView

for (i in 0..menuView.getChildCount() - 1) {

        if (i == 2) {

            val iconView: View = menuView.getChildAt(i)
                .findViewById(com.google.android.material.R.id.icon) as View
            val layoutParams: ViewGroup.LayoutParams = iconView.getLayoutParams();
            val displayMetrics: DisplayMetrics = getResources().getDisplayMetrics();
            // set your height here
            layoutParams.height =
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 38f, displayMetrics)
                    .toInt()
            // set your width here
            layoutParams.width =
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 38f, displayMetrics)
                    .toInt()
            iconView.setLayoutParams(layoutParams);
        }
    }

Answer 8

For Androidx BottomNavigationView<\/strong>

val menuView: BottomNavigationMenuView = bottomNavigationView.getChildAt(0) as BottomNavigationMenuView
        for (i in 0 until menuView.childCount) {
            if (i == 3) {
                val displayMetrics: DisplayMetrics = resources.displayMetrics
                (menuView.getChildAt(i) as NavigationBarItemView).setIconSize(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 41f, displayMetrics).toInt())
            }
        }