Changing Bottomnavigationview's Icon Size

February 09, 2024 Post a Comment

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: Design Support Library.

There is an property to change Icon Size:

<android.support.design.widget.BottomNavigationViewapp: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.BottomNavigationViewapp:itemIconSize="@dimen/_26sdp"android:layout_width="match_parent"android:layout_height="wrap_content" />

Programmatically - Same as above.

Thank you.

Solution 2:

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

BottomNavigationViewbottomNavigationView= (BottomNavigationView) configurationActivity.findViewById(R.id.bottom_navigation_view);
BottomNavigationMenuViewmenuView= (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
for (inti=0; i < menuView.getChildCount(); i++) {
    finalViewiconView= menuView.getChildAt(i).findViewById(android.support.design.R.id.icon);
    final ViewGroup.LayoutParamslayoutParams= iconView.getLayoutParams();
    finalDisplayMetricsdisplayMetrics= 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);
}

Solution 3:

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

The full code:

BottomNavigationViewbottomNavigationView= (BottomNavigationView) configurationActivity.findViewById(R.id.bottom_navigation_view);
BottomNavigationMenuViewmenuView= (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
for (inti=0; i < menuView.getChildCount(); i++) {
    finalViewiconView= menuView.getChildAt(i).findViewById(com.google.android.material.R.id.icon);
    final ViewGroup.LayoutParamslayoutParams= iconView.getLayoutParams();
    finalDisplayMetricsdisplayMetrics= 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);
}

Solution 4:

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

Baca Juga

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

Solution 5:

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:

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

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

Now you have it changed ;)

bringthem-home