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

score 49 · Answer 1 · edited Nov 03 '18 at 05:40

49

set app:itemIconSize property with your preferred value.

edited Nov 03 '18 at 05:40

karan

8,637
3
41
78

answered Nov 02 '18 at 20:55

Jonatan

1,182
8
20

1

But if I set value for the `app:itemIconSize`, the item text would overlap the icon, any solution? – zeleven Apr 26 '19 at 01:27
1

Yes, check [this](https://stackoverflow.com/questions/43386768/how-to-change-text-padding-in-android-bottom-navigation-view) out. – Jonatan May 16 '19 at 21:34

beeb · Answer 2 · 2017-04-12T08:52:04.287

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.

this does work for making the icon bigger, but now the icon covers my text. — jjjjjjjj, Apr 12 '17 at 08:24
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 . I put it under widget.BottonNavigationView but he doesn't recognize the name "design_bottom...". Please help! — Maude, Apr 30 '17 at 22:34
@Maude 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. — beeb, May 02 '17 at 09:31
Cannot resolve symbol 'design' @android.support.`design`.R.id.icon — blueware, Feb 02 '21 at 10:37

score 13 · Answer 3 · answered Jun 12 '19 at 14:53

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.

add bottom navigation height in layout_height="@dimen/design_bottom_navigation_height" — Rahul Khatri, Aug 21 '19 at 13:05

Bradley Wilson · Answer 4 · 2017-04-12T09:23:09.887

6

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.

edited Apr 12 '17 at 09:23

answered Apr 12 '17 at 09:00

Bradley Wilson

1,197
1
13
26

I tried this and imported my icon, and nothing happened when I clicked the download button. – jjjjjjjj Apr 12 '17 at 09:30
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 – Bradley Wilson Apr 12 '17 at 09:40

score 4 · Answer 5 · answered Nov 11 '17 at 09:16

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

Same as: https://stackoverflow.com/a/43363896/4421627, just without the explanation. — Flummox - don't be evil SE, Oct 25 '19 at 13:38

score 3 · Answer 6 · answered Mar 05 '19 at 05:00

3

override in dimens.xml:

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

answered Mar 05 '19 at 05:00

Evgeniy Pavlov

429
8
12

Abbas Khan Waliullahi · Answer 7 · 2021-09-16T05:35:54.043

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

How to increase icon size in android bottom navigation layout?

7 Answers7

Linked