Changing BottomNavigationView's Icon Size

Asked 7/1, 2017 at 0:38 Answered 25/2, 2023 at 6:49

I have been experimenting with the new BottomNavigationView and trying to customise it.

So far I have managed to change the height and margins by using the below:

<dimen name="design_bottom_navigation_height" tools:override="true">75dp</dimen>
<dimen name="design_bottom_navigation_margin" tools:override="true">5dp</dimen>

I want to increase the size of the icons.

How can this be done?

Compile Version: com.android.support:design:25.0.1

Brake answered 7/1, 2017 at 0:38 Comment(1)

See #42319454 – Highly 31/10, 2017 at 7:55

Late but Latest

Use implementation 'com.android.support:design:28.0.0' Design Support Library.

There is an property to change Icon Size:

<android.support.design.widget.BottomNavigationView
    app:itemIconSize="@dimen/_26sdp">
    ....
    ....
</android.support.design.widget.BottomNavigationView>

Programmatically:

dashboardNavigation.setItemIconSize(24);

UPDATE:

If you are using a material library then it will be the same. Just change the package name as below.

implementation 'com.google.android.material:material:1.1.0'

XML:

<com.google.android.material.bottomnavigation.BottomNavigationView
                app:itemIconSize="@dimen/_26sdp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

Programmatically - Same as above.

Thank you.

Monoploid answered 1/10, 2018 at 14:13 Comment(2)

Do you if it is possible to change it programmatically? – Holocrine 7/10, 2018 at 11:45

how to change text size in BottomNavigationView – Astigmatic 23/6, 2020 at 6:58

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

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, 32, displayMetrics);
    layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    iconView.setLayoutParams(layoutParams);
}

Formosa answered 25/1, 2017 at 7:49 Comment(7)

I can't believe they hard code the size and didn't use style attributes to set the value which can bring more flexibility for developers... – Excrescence 2/6, 2017 at 22:20

I love you bro, you saved my day! – Telles 9/5, 2018 at 22:1

How to get the bottomNavigationView on kotlin, cause I get NPE on: val bottomNavigationView = bottom_navigation_view – Saturniid 21/8, 2018 at 3:20

Why do we need to call bottomNavigationView.getChildAt(0) ? Or what's the difference between BottomNaviagationView and BottomNavigationMenuView ? – Downthrow 27/8, 2018 at 4:57

what will be resource name for androidx package – Pinnule 8/4, 2019 at 18:22

@Pinnule for androidx use this id - andcom.google.android.material.R.id.ico – Ford 26/12, 2019 at 12:12

Since material:1.4.0 the id to use now is : com.google.android.material.R.id.navigation_bar_item_icon_view – Roslyn 3/1, 2022 at 15:53

For androidx use this id for icons andcom.google.android.material.R.id.icon

The full code:

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(com.google.android.material.R.id.icon);
    final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();
    final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    iconView.setLayoutParams(layoutParams);
}

Ford answered 26/12, 2019 at 12:11 Comment(1)

Since material:1.4.0 the id to use now is : com.google.android.material.R.id.navigation_bar_item_icon_view – Roslyn 3/1, 2022 at 15:53

This worked perfectly for me with AndroidX Your XML layout

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    style="@style/DA_Bottom_Nav"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    app:itemIconSize="50dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/nav_menu"/>

Res/values/dimens.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_height" tools:override="true">80dp</dimen>
</resources>

Mccollough answered 22/4, 2020 at 7:46 Comment(0)

If you're looking to change one of your BottomNavigationView's icon's size, here is a quick and easy solution.

Let's say, you've 5 items on your BottomNavigationView and you want to change the middle icon size:

BottomNavigationMenuView menuView = (BottomNavigationMenuView)
            mainBinding.bottomNavView.getChildAt(0);
// Here the index: 2 at 'getChildAt(2)' means the middle icon
BottomNavigationItemView navigationItemView = (BottomNavigationItemView) menuView.getChildAt(2);

final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
            
navigationItemView.setIconSize((int)
            TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 40,
                    displayMetrics));

Now you have it changed ;)

Jealous answered 2/2, 2021 at 11:6 Comment(1)

Seems hacky but not the best idea, or scalable. When you do that: "NavigationBarItemView.setIconSize can only be called from within the same library group (groupId=com.google.android.material)" – Deter 25/2, 2022 at 17:13

Kotlin extension, it works with material:1.4.0

fun BottomNavigationView.resizeIcon(indexIcon:Int, sizeDp:Float){
    val menuView = getChildAt(0) as BottomNavigationMenuView
    val iconView = menuView.getChildAt(indexIcon).findViewById<View>(com.google.android.material.R.id.navigation_bar_item_icon_view)
    val layoutParams = iconView.layoutParams
    val displayMetrics = resources.displayMetrics
    val newSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, sizeDp, displayMetrics).toInt()
    layoutParams.height =newSize
    layoutParams.width = newSize
    val fl = FrameLayout.LayoutParams(newSize,newSize, Gravity.CENTER)
    iconView.layoutParams = fl
}

Lacedaemon answered 11/1, 2023 at 0:33 Comment(0)

For androidx com.google.android.material:material:1.8.0

BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(2); // icon index

final View iconView = itemView.findViewById(com.google.android.material.R.id.navigation_bar_item_icon_view);
final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
iconView.getLayoutParams().width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 38, displayMetrics);
iconView.getLayoutParams().height = MATCH_PARENT;

final View iconContainerView = itemView.findViewById(com.google.android.material.R.id.navigation_bar_item_icon_container);
iconContainerView.getLayoutParams().width = MATCH_PARENT;
iconContainerView.getLayoutParams().height = MATCH_PARENT;

Leninist answered 25/2, 2023 at 6:49 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

UPDATE:

Recommended topics

Hot tags