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
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
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)
}
})
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.
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?) {}
})
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.
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
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>
.......