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:

The icons should be at least 2, maybe even 3 times that size. 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>

and in my activity_main.xml:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:focusable="false"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        design:menu="@menu/bottom_layout" />

Thanks

Buenrostro

Answer 1

set app:itemIconSize property with your preferred value.

Aceto

But if I set value for the app:itemIconSize, the item text would overlap the icon, any solution? – Psychosocial

Yes, check this out. – Aceto

Answer 2

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.

Joh

this does work for making the icon bigger, but now the icon covers my text. – Buenrostro

Dear beeb, 5 years later I need your code! I managed to make the above one work, but I do not understand where do I need to parse the <dimen name...>. I put it under widget.BottonNavigationView but he doesn't recognize the name "design_bottom...". Please help! – Pigeon

@Pigeon As you can see in the design_bottom_navigation_item.xml some dimensions will be used. If you just add the dimension in your dimen.xml with another size it should work automatically. – Joh

Cannot resolve symbol 'design' @android.support.design.R.id.icon – Oscitancy

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.

Anesthesiologist

add bottom navigation height in layout_height="@dimen/design_bottom_navigation_height" – Sibley

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.

Heilman

I tried this and imported my icon, and nothing happened when I clicked the download button. – Buenrostro

I'm not sure how much I can help with that, try a different browser? The download buttons works for me both on firefox and chrome – Heilman

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

Exhibitioner

Same as: https://mcmap.net/q/512469/-how-to-increase-icon-size-in-android-bottom-navigation-layout, just without the explanation. – Deva

Answer 6

override in dimens.xml:

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

Literalism

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

 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);
            }
        }

Chivy

Answer 8

 val menuView = navView.getChildAt(0) as BottomNavigationMenuView

        for (i in 0..<menuView.childCount) {
            
                val iconView: View? = menuView.getChildAt(i).findViewById(com.google.android.material.R.id.navigation_bar_item_icon_view)
                val layoutParams = iconView?.layoutParams;
                val displayMetrics: DisplayMetrics = getResources().displayMetrics;
                // set your height here
                layoutParams?.height =
                    TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32f, displayMetrics)
                        .toInt()
                // set your width here
                layoutParams?.width =
                    TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32f, displayMetrics)
                        .toInt()
                iconView?.setLayoutParams(layoutParams);
        }

some change answer @Abbas

and my task change size image of selecteble item Menu

  private fun ActivityMainBinding.changeSize(id: Int) {
    val menuView = navView.getChildAt(0) as BottomNavigationMenuView
    for (i in 0..<menuView.childCount) {
        val iconView: View? = menuView.getChildAt(i)
            .findViewById(com.google.android.material.R.id.navigation_bar_item_icon_view)
        val layoutParams = iconView?.layoutParams;
        val displayMetrics: DisplayMetrics = getResources().displayMetrics;
        // set your height here
        layoutParams?.height =
            TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                if (i == id) 40f else 24f,
                displayMetrics
            )
                .toInt()
        // set your width here
        layoutParams?.width =
            TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                if (i == id) 40f else 24f,
                displayMetrics
            )
                .toInt()
        iconView?.setLayoutParams(layoutParams);
    }
}

 override fun onNavigationItemSelected(item: MenuItem): Boolean {
    val navController = findNavController(R.id.nav_host_fragment)

    return when (item.itemId) {
        R.id.menu_history -> {
            binding.changeSize(0)
            if (navController.currentDestination?.id != R.id.mainHistoryFragment) {
                navController.navigate(R.id.mainHistoryFragment)
            }
            true
        }

        R.id.menu_orders -> {
            binding.changeSize(1)
            navController.popBackStack(R.id.ordersListFragment, false);
            true
        }
        

        R.id.menu_profile -> {
            binding.changeSize(2)
            navController.navigate(R.id.mainProfileFragment)
            true
        }

        else -> {
            false
        }
    }
}

Padding

Answer 9

bottomNavigationBar: BottomNavigationBar(
iconSize: 56,
),

Vento

Welcome to Stack Overflow! Your answer could be improved with additional supporting information. If possible, please edit your post to add further details. If a new user was looking for an answer here, what reason have you given them to try yours instead of one of the other proven solutions? You can find more information in How do I write a good answer? - "Brevity is acceptable, but fuller explanations are better." It might be helpful to review some highly upvoted answers as examples to follow. Thanks! – Ingalls