CODEWITHSUNDEEP
androidbottomnavigationview
jjjjjjjj
jjjjjjjj

Reputation: 4483

How to increase icon size in android bottom navigation layout?

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:

enter image description here

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

Upvotes: 26

Views: 57258

Answers (9)

Sem Kaminskyi
Sem Kaminskyi

Reputation: 11

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

Upvotes: 0

puff
puff

Reputation: 11

bottomNavigationBar: BottomNavigationBar(
iconSize: 56,
),

Upvotes: -2

Abbas Khan Waliullahi
Abbas Khan Waliullahi

Reputation: 345

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

Upvotes: 2

Dan Bray
Dan Bray

Reputation: 7822

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.

Upvotes: 13

Evgeniy Pavlov
Evgeniy Pavlov

Reputation: 459

override in dimens.xml:

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

Upvotes: 4

Jonatan
Jonatan

Reputation: 1242

set app:itemIconSize property with your preferred value.

Upvotes: 52

Minkoo
Minkoo

Reputation: 439

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

Upvotes: 4

Bradley Wilson
Bradley Wilson

Reputation: 1197

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.

icon generator

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.

Upvotes: 6

beeb
beeb

Reputation: 1615

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.

Upvotes: 37

Related Questions