5

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

enter image description here

Amr Barakat
  • 686
  • 1
  • 7
  • 16

6 Answers6

4

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)
            }
        })
Key HeHa
  • 79
  • 1
  • 2
  • 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
2

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.

Kartik Shandilya
  • 3,796
  • 5
  • 24
  • 42
1

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?) {}
        })
Rishabh876
  • 3,010
  • 2
  • 20
  • 37
  • @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
0

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.

Suri
  • 693
  • 7
  • 16
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

-1

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>
 .......
Parth
  • 791
  • 7
  • 17