更改BottomNavigationView的图标大小

Question

我一直在尝试定制新的BottomNavigationView并进行实验。

到目前为止，我已经成功通过以下方法改变了高度和边距：

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

我希望增加图标的大小。

怎样才能做到？

编译版本：com.android.support:design:25.0.1

- Steve Cortis

---

请参见 https://dev59.com/k1gQ5IYBdhLWcg3wtmSq#47030341。 - Kobus Pitzer

Answer 1

晚了但是最新的

使用implementation 'com.android.support:design:28.0.0'设计支持库。

有一个属性可以改变图标大小：

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

通过编程实现：

dashboardNavigation.setItemIconSize(24);

更新:

如果您正在使用材料库，则情况将相同。只需按照以下方式更改包名称即可。

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" />

通过程序 - 与上述内容相同。

谢谢。

- Pratik Butani

---

你知道是否可以通过编程来进行更改吗？ - Mxwan

如何在BottomNavigationView中更改文本大小 - Chirag Patel

Answer 2

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

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

- ot.

---

我无法相信他们硬编码了尺寸，而没有使用样式属性来设置值，这会给开发人员带来更多的灵活性... - KunYu Tsai

为什么我们需要调用bottomNavigationView.getChildAt(0)？或者BottomNavigationView和BottomNavigationMenuView之间有什么区别？ - Yousef Gamal

AndroidX包的资源名称将是什么？ - ozmank

@ozmank 对于AndroidX，请使用此ID - andcom.google.android.material.R.id.ico。 - walkmn

自从 Material 版本 1.4.0 以后，现在要使用的 ID 是：com.google.android.material.R.id.navigation_bar_item_icon_view。 - Jejefcgb

Answer 3

androidx 使用此 ID 来使用图标：andcom.google.android.material.R.id.icon 完整代码：

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

- walkmn

---

自1.4.0版本起，现在要使用的ID是：com.google.android.material.R.id.navigation_bar_item_icon_view。 - Jejefcgb

Answer 4

这对我来说非常完美，适用于AndroidX 你的XML布局

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

- user2288580

Answer 5

如果您想更改其中一个BottomNavigationView的图标大小，这里有一个快速简单的解决方案。

假设您的BottomNavigationView上有5个项目，并且您想更改中间图标的大小：

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

现在你已经改变了它 ;)

- blueware

---

看起来有点粗糙，不是最好的想法，也不具备可伸缩性。当你这样做时：“NavigationBarItemView.setIconSize 只能从同一库组（groupId=com.google.android.material）中调用”。 - Rafael Ruiz Muñoz

Answer 6

Kotlin扩展，它与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
}

- Campino

Answer 7

针对 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;

- ievgen