BottomNavigationView Custom Item Image

Question

I wanna to set a custom image to "Profile" item in the BottomNavigationView as the user is logged in. I have user's image URL.

This is the suggested design

Check this http://joerichard.net/android/android-how-to-load-navigationview-menu-item-icon-from-url-using-picasso/ — Kartik Shandilya, Oct 22 '17 at 07:36

score 4 · Answer 1 · answered Nov 12 '18 at 08:42

I used this code for make it works. (Kotlin)

navigation is the BottomNavigationView

val menu = navigation.menu
val menuItem = menu.findItem(R.id.my_account)
Glide.with(this)
        .asBitmap()
        .load("https://my_account_image_url")
        .apply(RequestOptions
                .circleCropTransform()
                .placeholder(R.drawable.ic_avatar))
        .into(object : SimpleTarget<Bitmap>() {
            override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                menuItem?.icon = BitmapDrawable(resources, resource)
            }
        })

i don't know what's wrong with glide but it is showing black image as if it was icon not coloured, didn't helped — Asylzat, Mar 26 '22 at 17:29

score 2 · Answer 2 · answered Oct 22 '17 at 07:32

You can do something like this:

BottomNavigationView navigation;

And then in your onCreate:

    navigation = findViewById(R.id.navigation);
    Menu a = navigation.getMenu();
    MenuItem b = a.findItem(R.id.profile_menu);
    if(userloggedIn){
        b.setIcon(R.drawable.icons_logged_in);
    }
    else{
        b.setIcon(R.drawable.icon_logged_out);
    }

If you want to load from URL you can use either Glide or Picasso.

score 1 · Answer 3 · answered Sep 23 '19 at 09:11

From AppCompat 1.1.0 you will also need to remove tint for this.

val menu = navigation.menu
val menuItem = menu.findItem(R.id.profile_menu_item)

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        menuItem?.iconTintList = null
        menuItem?.iconTintMode = null
}

Glide.with(this)
        .asBitmap()
        .load("url")
        .apply(RequestOptions
                .circleCropTransform()
                .placeholder(R.drawable.placeholder))
        .into(object : CustomTarget<Bitmap>(24.toPixel(), 24.toPixel()) {
            override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                menuItem?.icon = BitmapDrawable(resources, resource)
            }

            override fun onLoadCleared(placeholder: Drawable?) {}
        })

@Jovan Yes, above solution worked on version below O as well. — Rishabh876, Oct 09 '19 at 12:03
on versions bellow O, we get just circle instead of the image in tint colors that are set inside xml. I'm using selector for iconTint color. Check out my question if you have a few minutes https://stackoverflow.com/questions/58285700/bottomnavigationview-set-custom-icon-downloaded-from-some-url — Jovan, Oct 15 '19 at 14:02

Suri · Answer 4 · 2019-10-24T01:29:30.953

You can use Glide to set the profile image in your bottom navigation view. Before setting the profile image, you need to load the image as bitmap. Then, convert the Bitmap to a Drawable type in order to set up the item icon.

Here is how it's done.

Firstly call in the app level build.gradle

implementation 'com.github.bumptech.glide:glide:4.9.0'

then click Sync now.

After that, in the activity where your BottomNavigationView is located, you can do something like this.

Glide.with(getApplicationContext()).asBitmap().load(*yourImageUrl*)
.into(new CustomTarget<Bitmap>() {

  @Override
  public void onResourceReady(@NonNull Bitmap resource, @Nullable Transition<? super Bitmap> transition) {
    Drawable profileImage = new BitmapDrawable(getResources(), resource);
    bottomNavigationView.getMenu().getItem(*yourItemIndex*).setIcon(profileImage);
  }

  @Override
  public void onLoadCleared(@Nullable Drawable placeholder) {

  }
}

if you want to make the profile image in circular shape, you can either call .circleCrop() or .optionalCircleCrop(). However, I think using .optionalCircleCrop is better.

score 0 · Answer 5 · answered Sep 14 '21 at 20:29

0

you can get ImageView from NavigationItemView , and load image by glide or another image loader libraries in imageview! please see my answer : https://stackoverflow.com/a/69175500/8780115

answered Sep 14 '21 at 20:29

farshad rezaei

79
5

score -1 · Answer 6 · answered Jul 29 '19 at 10:08

Right now, There is no proper solution can be found for this but you can do something like this. works for me.

  ..........
   <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:elevation="0dp"
        app:itemBackground="@color/bottomMenuColor"
        app:itemHorizontalTranslationEnabled="false"
        app:itemTextAppearanceActive="@style/BottomNavigationView"
        app:itemTextAppearanceInactive="@style/BottomNavigationView"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/main_menu" />

    <ImageView
        android:id="@+id/imgView"
        android:layout_width="@dimen/scale_30dp"
        android:layout_height="@dimen/scale_30dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="@dimen/scale_40dp"
        android:src="@drawable/temp_person" />
</RelativeLayout>
 .......

Wow, great solution. :D – Prashant Jajal Jul 29 '19 at 10:09 — Prashant Jajal, Jul 29 '19 at 10:09

BottomNavigationView Custom Item Image

6 Answers6