1

My current Android application employs com.google.android.material.bottomnavigation.BottomNavigationView

I have four icons, one of which is the standard android vector image for person outline

enter image description here

which looks like above

however in the Apps bottom navigation window it resembles the following:-

enter image description here

my xml layout for the navigation bar resembles this:-

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/home_bottom_navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemTextColor="@color/bottom_navigation_bar_color"
    app:itemIconTint="@color/bottom_navigation_bar_color"
    android:layout_alignParentBottom="true"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    app:labelVisibilityMode="unlabeled"
    app:menu="@menu/bottom_nav_menu" />

What have I done wrong to not have the outlined icon display correctly?

Hector
  • 4,016
  • 21
  • 112
  • 211
  • 2
    I don't think Bottom navigation view fills the icon. Maybe you should double check to make sure you are using the same drawable you intend to use. – Quanta Jun 21 '20 at 10:11
  • @Qunata, good thought, however I've double checked it and I am employing the outlined version of the icon. Maybe bottom navigation bar doesnt correctly support vector graphics? – Hector Jun 21 '20 at 11:13
  • It happens because the icons are tinted by `app:itemIconTint`.You have to use `bottomNavigationView.setItemIconTintList(null);` but it works for all the icons. – Gabriele Mariotti Jun 21 '20 at 11:37

2 Answers2

1

This worked for me:

bottomNavView.itemIconTintList = null
Nouman Ch
  • 4,023
  • 4
  • 29
  • 42
0

With app:itemIconTint="@color/bottom_navigation_bar_color" you set the color to the icon. I think that this might solve your problem. See the docs: https://material.io/develop/android/components/bottom-navigation/

xWarlord
  • 13
  • 5