Search code examples
androidbottomnavigationviewandroid-bottom-nav-view

How to change a specific icon image from Bottom Navigation View


I need to implement a Bottom Navigation View in my android app. The middle icon needs to be an image, the company logo. But when I run the app it appears only a grey filled rounded icon. The images above show what I want and what I'm getting.

What I want: enter image description here

What I get: enter image description here

I already tried others questions in this website, but every answer tells to change the iconTintList from XML with a drawable, but the center icon is a vector with more than one color.

When I tried to set null to setIconTintList method, works for the middle icon but the others icons change to original color too.

//This doesn't work to other icons, only for the middle one 
mBottomNav.setItemIconTintList(null);

I also tried to get the menu and set the icon tint list only for the middle one, like the code above, but doesn't work too.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
    mBottomNav.getMenu().findItem(R.id.nav_buy).setIconTintList(null);
}

This is the XML implementation:

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/kmv_background"
        app:itemIconTint="@drawable/bottom_nav_item_color"
        app:itemTextColor="@drawable/bottom_nav_item_color"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_navigation" />

This is the java implementation:

mBottomNav = findViewById(R.id.bottomNavigationView);
mBottomNav.setOnNavigationItemSelectedListener(this);

Thanks for any help!


Solution

  • I don't think there's a short way. Use this first:

       mBottomNav.setItemIconTintList(null);
    

    Then do the designs yourself. Don't forget to separate the buttons as clicked and not clicked.

    Example Home Button XML

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

    And add them to the view: Example bottom_navigation.xml

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item
            android:id="@+id/homebuttons"
            android:icon="@drawable/homebuttonxml />
    
     <!--Other Buttons...-->
    
    </menu>
    

    And finally, Link view to bottomnavigationview

    <com.google.android.material.bottomnavigation.BottomNavigationView    
         android:id="@+id/bottomNavigationView"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         app:labelVisibilityMode="unlabeled"
         app:elevation="0dp"
         app:menu="@menu/bottom_navigation">  
       
    </com.google.android.material.bottomnavigation.BottomNavigationView>