如何在Android底部导航布局中增加图标大小？

Question

我正在使用谷歌在设计库25中最近引入的Android底部布局导航风格。在所有的教程和问题中，我发现它们图标中的图片大小都很正常，但是我的很小，尽管我保存到drawable文件夹中的图片大小为72x72。这里是一个截图： 这些图标应该至少是两倍，甚至三倍于此的大小。我该怎么办？以下是我的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>

而在我的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" />

谢谢

- jjjjjjjj

Answer 1

将 app:itemIconSize 属性设置为您喜欢的值。

- Jonatan

---

但是如果我为app:itemIconSize设置值，则项目文本将重叠图标，有什么解决办法吗？ - zeleven

是的，请查看这个。 - Jonatan

Answer 2

图标大小在项目布局中硬编码为24dp（参见design_bottom_navigation_item.xml）。 这可以通过编程进行更改：

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

编辑

针对您遇到的图标覆盖文字的问题:

您可以覆盖底部导航视图的一些默认尺寸。例如高度。

<dimen name="design_bottom_navigation_height" tools:override="true">56dp</dimen>

查看底部导航的指南获取默认规格。

- beeb

---

这确实可以使图标变大，但现在图标遮盖了我的文本。 - jjjjjjjj

亲爱的beeb，五年后我需要你的代码！我设法让上面的代码工作了，但我不明白我需要在哪里解析<dimen name...>。我把它放在widget.BottonNavigationView下面，但他无法识别名称“design_bottom...”。请帮忙！ - Maude

@Maude 如您在 design_bottom_navigation_item.xml 中所见，将使用一些尺寸。如果您只需在 dimen.xml 中添加另一个尺寸，它应该会自动工作。 - beeb

无法解析符号'design' @android.support.design.R.id.icon - blueware

Answer 3

将这两行添加到底部导航中：

app:menu="@menu/main_bottom_navigation"
app:itemIconSize="@dimen/bottom_navigation_icon_size"

在 dimens.xml 文件中添加：

<dimen name="bottom_navigation_icon_size" tools:override="true">32dp</dimen>
<dimen name="design_bottom_navigation_height" tools:override="true">72dp</dimen>

要增加图标的大小，请增加bottom_navigation_icon_size。您可能需要更改design_bottom_navigation_height的值，以便文本不重叠或者获得过多的白色空间。

- Dan Bray

---

将底部导航高度添加到布局中：layout_height="@dimen/design_bottom_navigation_height"。 - Rahul Khatri

Answer 4

我建议你使用 Android Asset Studio来生成一个通用图标，请确保：

• 图标大小为24dp
• 无需填充（padding）

注意：如果您希望使用自定义图标，则可以这样做。

然后，它会为您生成相应的可绘制对象并放入正确的目录（mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi）。

如果您的静态可绘制对象尺寸为72x72，则会根据手机的密度而改变图标大小，不同的手机会以不同的方式转换像素。

只需简单地将图标下载为zip文件，并将可绘制对象文件夹提取到资源目录中，这样就可以解决您的问题。

- Bradley Wilson

---

我尝试了这个，导入了我的图标，但当我点击下载按钮时什么也没发生。 - jjjjjjjj

我不确定我能在这方面提供多少帮助，尝试使用其他浏览器？下载按钮在我的火狐和谷歌浏览器上都可以正常工作。 - Bradley Wilson

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

您可以根据自己的需要调整图像的大小。 编程愉快！

- Minkoo

---

与此相同：https://dev59.com/iFcQ5IYBdhLWcg3wFPya#43363896，只是没有解释。 - Flummox - don't be evil SE

Answer 6

在dimens.xml中覆盖：

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

- Evgeniy Pavlov

Answer 7

在 Kotlin 中

对于那些想要尝试在 Android-X 上并且只想改变其中一个项目大小的人，这是我稍微修改过的代码。来自 @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);
            }
        }

- Abbas Khan Waliullahi