如何在BottomNavigationView中设置自定义图标。

Question

如标题所述，我正在尝试将自定义的image.png添加到我的底部导航栏中，但我找不到确切的方法。

我已经尝试过：

矢量资产和图像资产不显示我的image.png

为我的图像创建一个selector xml，并将其添加到我的导航菜单中，但它只显示一个灰色正方形，而不是图像。

我认为解决方案一定很简单，但在这个论坛上找不到任何相关的内容。

先谢谢了。

编辑：

bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/airplane"
        android:icon="@drawable/vegetables"
        android:title="Vegetable"
        />


</menu>

vegetables.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/veg" android:state_checked="false"/>
    <item android:drawable="@drawable/veg1" android:state_checked="true" />
</selector>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottom_navigation"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:background="?android:attr/windowBackground"
        app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

- nick isra

---

请提供一些你已经尝试过的工作。 - Md. Asaduzzaman

@Md.Asaduzzaman 我只是做了一个简单的底部导航菜单，但我不知道如何将我的自定义 image.png 设置为图标。 - nick isra

请添加您的image.png文件。 - Md. Asaduzzaman

@Md.Asaduzzaman https://imgur.com/a/Y8xP9O4 - nick isra

Answer 1

我建议使用矢量图。

在 Android 底部导航视图组件中，默认情况下所有 SVG 对象显示为白色。勾选符号对象在圆圈中，但其颜色被转换为白色，因此变得不可见。

一种解决方法是重新绘制 SVG 图像。但有时不可能。另一种解决方法是告诉底部导航视图显示原始图像颜色。您可以在活动代码中设置：

在 create() 中只需设置：

bottomNavigationView.setItemIconTintList(null);

- Jon

---

运行得非常好！！感谢@Jon。 - Gabriel Rogath

Answer 2

请按照以下方式在navigation.xml中更新您的图标：

<item
    android:id="@+id/navigation_more"
    android:icon="@drawable/ic_navigation_more"
    app:showAsAction="always|withText"
    android:title="@string/title_more" />

以下是关于编程的示例，文件名为 ic_navigation_more.xml：

：

<vector 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z"/>
</vector>

- Md. Asaduzzaman

---

什么是路径数据？我需要一个图片.png的路径。 - nick isra

你的image.png不适合作为菜单图标。你可以使用24dp的矢量可绘制对象或者在Android Studio中创建PNG文件来进行优化。 - Md. Asaduzzaman

我尝试在线将我的png转换为svg，然后在Android Studio中打开“创建新矢量资源”，并找到了转换后的svg文件，但是它显示了一个错误，即我的选定svg中没有矢量。 - nick isra

那不是正确的方法，请查看有关该方面的在线教程。 - Md. Asaduzzaman

Answer 3

1. 为底部导航创建菜单文件
2. 通过 android:icon="@drawable/your_drawable" 为每个菜单项设置图标
3. 在声明 BottomNavigationView 的 xml 文件中添加 app:menu="@menu/your_menu"

- Milan Kundacina

---

已经完成了，但是我为我的菜单项设置的图标是自定义的image.png图片，如果我使用android:icon="@drawable/image.png"来设置它，它会显示为灰色的方块。 - nick isra

尝试设置 android:icon="@android:drawable/ic_dialog_info"，如果它正常工作，则问题在于使用 png 格式，你应该在那里使用 svg 格式。 - Milan Kundacina

它可以在默认图标上工作，但我需要一张自定义图片，我想将其设置为图标。 - nick isra

尝试使用在线转换器将png转换为svg，同时缩小它的大小，因为你的png可能太大了。 - Milan Kundacina

请问您能否向我解释一下如何使用SVG？我尝试将其重新缩放，因为我认为PNG文件太大了，我将其调整为24像素x24像素。但它仍然显示为灰色正方形。 - nick isra

我尝试在线将我的PNG转换为SVG，然后在Android Studio中打开“创建新矢量资源”，并找到已转换的SVG，但它显示错误，即我的选定SVG中没有矢量。我该如何解决？ - nick isra

Answer 4

你的 image.png 必须有一个透明区域，NavigationView 将会像状态栏上的通知图标一样着色它。

- Hababa

---

它已经具有透明的背景，如果需要，我可以编辑我的帖子并上传我的图像。 - nick isra

我试着用透明背景画了些东西，它正常工作，所以我认为如果您不介意的话，可以上传您的图像（我下载了您在imgur上上传的图像，但那并不是真正的透明）。 - Hababa

Answer 5

android:icon="@drawable/your_drawable"

为解决颜色问题，请使用tint

- M000

Answer 6

我认为除非您将图标色调列表“setItemIconTintList”设置为null，否则无法将.png图像添加为导航视图。 在我的情况下 //navView.setItemIconTintList(null)

- Evansito Robbie

Answer 7

尝试使用导航菜单项ID的自定义图像。

对于Kotlin：

val navView: BottomNavigationView = findViewById(R.id.nav_view)
val BVMenu = navView.getMenu()  
BVMenu.findItem(R.id.navigation_home).setIcon(R.drawable.ic_favorite_black_24dp);

对于Java：

Menu navView = bottomNavigationView.getMenu();
navView.findItem(R.id.navigation_home).setIcon(R.drawable.ic_favorite_black_24dp);

- Jane Alam

---

我不能在XML中设置它吗？当我尝试将图标设置为我的自定义图像时，它只显示一个灰色的正方形。 - nick isra

这里我给你提供了一种编程方式来设置图像。 - Jane Alam

Answer 8

在你的xml文件中，将menu属性添加到BottomNavigationView标签中：

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:menu="@menu/menu_navigation_items" /> `

@menu/menu_navigation_items 是一个带有<item>标签的菜单。在每个item标签中添加icon属性：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto">
<item
    android:id="@+id/id1"
    android:enabled="true"
    android:icon="@drawable/your_icon"
    android:title="Your Title"
    app:showAsAction="ifRoom" />

<item
    android:id="@+id/id2"
    android:enabled="true"
    android:icon="@drawable/your_icon"
    android:title="Your Title"
    app:showAsAction="ifRoom" />
</menu>

- Calin Baciu

---

是的，我已经做过了，但是android:icon="@drawable/image"中的image.png在我的情况下无法正确地显示我的图标，我只能看到一个灰色的正方形，我需要将我的自定义image.png设置为此导航栏上的图标。 - nick isra

你能提供BottomNavigationView和它的菜单的代码片段吗？ - Calin Baciu

抱歉我迟到了，不得不将它复制到手机上才能发布。我已经编辑了上面的帖子，加入了所需的代码。 - nick isra