BottomNavigationView set custom icon downloaded from some url

Question

I have 4 tabs on the bottom of the screen and for the last tab I want to set a user profile image if he has it. I tried everything. Only the icon set from a drawable works fine. Every other case is a disaster.

I found out that if I remove icon tint and icon mode on android versions above 26 it works fine. For versions under it, it's not working.

Here is the code. Maybe somebody will have some ideas about how to help. This is how i set the icon from a drawable. This imageView is just a test to be sure that image is downloaded from the server.

@Override
public void loadUrlAsTabProfileImage(String url) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        navigationView.getMenu().getItem(presenter.getProfileTabPosition()).setIconTintList(null);
        navigationView.getMenu().getItem(presenter.getProfileTabPosition()).setIconTintMode(null);
    }
    Glide.with(HomeActivity.this)
            .asBitmap()
            .load(url)
            .apply(RequestOptions.circleCropTransform())
            .into(new SimpleTarget<Bitmap>() {
                @Override
                public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                    Drawable drawable = new BitmapDrawable(getResources(), resource);
                    imageView.setImageDrawable(drawable);
                    imageView.setVisibility(View.VISIBLE);

                    navigationView.getMenu().findItem(R.id.layout_profile).setIcon(drawable);
                }
            });
}

This is how menu looks like in xml

<item android:id="@+id/layout_feed"
    android:title="@string/feed"
    android:icon="@drawable/ic_feed_bottombar"
    app:showAsAction="always"/>

<item android:id="@+id/layout_inbox"
    android:title="@string/inbox"
    android:icon="@drawable/ic_inbox_bottombar"
    app:showAsAction="always"/>

<item android:id="@+id/layout_contacts"
    android:title="@string/contacts"
    android:icon="@drawable/ic_contacts_bottombar"
    app:showAsAction="always"/>

<item android:id="@+id/layout_profile"
    android:title="@string/profile"
    android:icon="@drawable/ic_profile_bottombar"
    app:showAsAction="always"/>

I tried with setting custom action layout with a tag app:actionViewClass="" but no luck. ImageView from the action class is not visible at all.

Here is how my layout looks like.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<androidx.viewpager.widget.ViewPager
    android:id="@+id/homePager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="@id/navigation_bar"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/plus_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end"
    android:layout_margin="16dp"
    android:backgroundTint="@color/bottombar_blue_color"
    android:foregroundGravity="bottom"
    android:tint="@color/white"
    app:srcCompat="@drawable/plus_icon"
    app:tint="@color/white"
    app:borderWidth="0dp"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintBottom_toTopOf="@id/navigation_bar"/>

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigation_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemBackground="@color/navigation_bar_background"
    app:itemIconTint="@color/navigation_bar_background"
    app:labelVisibilityMode="labeled"
    app:layout_constraintBottom_toBottomOf="parent"
    />

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:visibility="gone"/>

Answer 1

If you are still looking for answer here is the suggestion

create drawable selector for each item which have selected and deselected image. create selector for profile also.

<item android:id="@+id/layout_feed"
    android:title="@string/feed"
    android:icon="@drawable/feed_tab_color_selector"
    app:showAsAction="always"/>

feed_tab_color_selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/feed_selected" android:state_selected="true" />
    <item android:drawable="@drawable/feed_normal" android:state_focused="false" android:state_pressed="false" android:state_selected="false" />
</selector>

after that apply this code in your activity

public void loadUrlAsTabProfileImage(String url) {

bottomMenu.seIitemIconTintList(null) // this is important

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        navigationView.getMenu().getItem(presenter.getProfileTabPosition()).setIconTintList(null);
        navigationView.getMenu().getItem(presenter.getProfileTabPosition()).setIconTintMode(null);
    }
    Glide.with(HomeActivity.this)
            .asBitmap()
            .load(url)
            .apply(RequestOptions.circleCropTransform())
            .into(new SimpleTarget<Bitmap>() {
                @Override
                public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
                    Drawable drawable = new BitmapDrawable(getResources(), resource);
                    imageView.setImageDrawable(drawable);
                    imageView.setVisibility(View.VISIBLE);

                    navigationView.getMenu().findItem(R.id.layout_profile).setIcon(drawable);
                }
            });
}

Please try this this will resolve your problem