Change specific icon of bottom navigation view with image url.
In this blog, We will talk about the bottom navigation which we normally used in the android apps, and will get to know how you can update an icon of navigation with an Image URL. It sounds to be confusing. I will load an image from the URL and set it to the bottom navigation view Item.
I'm using the GLIDE library for loading an image and yes we can use the PICASSO library too. But I would prefer to glide over it.
Add these libraries in the build.grade(module)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="utf-8"?> | |
| <layout xmlns:android="http://schemas.android.com/apk/res/android" | |
| xmlns:app="http://schemas.android.com/apk/res-auto"> | |
| <androidx.constraintlayout.widget.ConstraintLayout | |
| android:layout_width="match_parent" | |
| android:layout_height="match_parent" | |
| android:background="@color/white"> | |
| <FrameLayout | |
| android:id="@+id/frameLayout" | |
| android:layout_width="match_parent" | |
| android:layout_height="0dp" | |
| app:layout_constraintBottom_toTopOf="@id/appBarContainer" | |
| app:layout_constraintLeft_toLeftOf="parent" | |
| app:layout_constraintTop_toTopOf="parent" /> | |
| <com.google.android.material.appbar.AppBarLayout | |
| android:id="@+id/appBarContainer" | |
| android:layout_width="match_parent" | |
| android:layout_height="wrap_content" | |
| android:background="@color/dashboard_purple" | |
| android:elevation="16dp" | |
| app:layout_constraintBottom_toBottomOf="parent"> | |
| <com.google.android.material.bottomnavigation.BottomNavigationView | |
| android:id="@+id/bottomNavigation" | |
| android:layout_width="wrap_content" | |
| android:layout_height="wrap_content" | |
| android:elevation="16dp" | |
| android:padding="8dp" | |
| app:labelVisibilityMode="labeled" | |
| app:menu="@menu/menu_dashboard" /> | |
| </com.google.android.material.appbar.AppBarLayout> | |
| </androidx.constraintlayout.widget.ConstraintLayout> | |
| </layout> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| implementation 'com.github.bumptech.glide:glide:4.12.0' | |
| annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0' | |
| implementation 'jp.wasabeef:glide-transformations:4.3.0' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| package com.sway.android.screens.dashboard | |
| import android.content.Context | |
| import android.content.Intent | |
| import android.graphics.Bitmap | |
| import android.graphics.Color | |
| import android.graphics.drawable.BitmapDrawable | |
| import android.graphics.drawable.Drawable | |
| import android.os.Bundle | |
| import android.view.Menu | |
| import androidx.appcompat.app.AppCompatActivity | |
| import androidx.lifecycle.Observer | |
| import butterknife.BindView | |
| import butterknife.ButterKnife | |
| import com.bumptech.glide.Glide | |
| import com.bumptech.glide.request.RequestOptions | |
| import com.bumptech.glide.request.target.CustomTarget | |
| import com.bumptech.glide.request.target.SimpleTarget | |
| import com.bumptech.glide.request.transition.Transition | |
| import com.google.android.material.bottomnavigation.BottomNavigationView | |
| import com.squareup.picasso.Picasso | |
| import com.squareup.picasso.Target | |
| import com.sway.android.R | |
| import com.sway.android.screens.chat.ChatFragment | |
| import com.sway.android.screens.company_discover.CompanyDiscoverFragment | |
| import com.sway.android.screens.company_profile.CompanyProfileFragment | |
| import com.sway.android.screens.company_search.CompanySearchFragment | |
| import com.sway.android.screens.influencer_discover.InfluencerDiscoverFragment | |
| import com.sway.android.screens.influencer_search.InfluencerSearchFragment | |
| import com.sway.android.screens.offer.OffersFragment | |
| import com.sway.android.screens.profile.ProfileFragment | |
| import com.sway.android.utils.* | |
| import org.koin.android.viewmodel.ext.android.viewModel | |
| import timber.log.Timber | |
| import java.lang.Exception | |
| class DashboardActivity : AppCompatActivity() { | |
| companion object { | |
| fun start(context: Context) { | |
| val intent = Intent(context, DashboardActivity::class.java) | |
| intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK | |
| context.startActivity(intent) | |
| } | |
| } | |
| @BindView(R.id.bottomNavigation) | |
| lateinit var bottomNavigationView: BottomNavigationView | |
| private val localViewModel: DashboardViewModel by viewModel() | |
| lateinit var menu: Menu | |
| override fun onCreate(savedInstanceState: Bundle?) { | |
| super.onCreate(savedInstanceState) | |
| changeStatusBarColor(Color.TRANSPARENT) | |
| setContentView(R.layout.activity_dashboard) | |
| ButterKnife.bind(this) | |
| configureViewModel() | |
| configureViews() | |
| } | |
| override fun onDestroy() { | |
| localViewModel.clear() | |
| super.onDestroy() | |
| } | |
| private fun configureViews() { | |
| bottomNavigationView.setOnNavigationItemSelectedListener { | |
| renderSelectedItem(it.itemId) | |
| true | |
| } | |
| menu = bottomNavigationView.menu | |
| /*Picasso.get().load(getProfileImage()) | |
| .placeholder(R.drawable.logo_profile) | |
| .resize(20, 20) | |
| .into(target) | |
| */ | |
| bottomNavigationView.itemIconTintList = null | |
| val menuItem = menu.findItem(R.id.action_profile) | |
| Glide.with(this) | |
| .asBitmap() | |
| .load(getProfileImage()) | |
| .apply( | |
| RequestOptions | |
| .circleCropTransform() | |
| .override(20, 20) | |
| .placeholder(R.drawable.logo_profile) | |
| ) | |
| .into(object : CustomTarget<Bitmap>() { | |
| override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) { | |
| menuItem?.icon = BitmapDrawable(resources, resource) | |
| } | |
| override fun onLoadCleared(placeholder: Drawable?) { | |
| } | |
| }) | |
| localViewModel.selectAction(R.id.action_discover) | |
| } | |
| val target: Target = object : Target { | |
| override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) { | |
| Timber.e("onBitmapLoaded") | |
| menu.getItem(4).icon = BitmapDrawable(resources, bitmap) | |
| } | |
| override fun onBitmapFailed(e: Exception?, errorDrawable: Drawable?) { | |
| Timber.e("onBitmapFailed") | |
| } | |
| override fun onPrepareLoad(placeHolderDrawable: Drawable?) { | |
| Timber.e("onPrepareLoad") | |
| menu.getItem(4).icon = getDrawable(R.drawable.logo_profile) | |
| } | |
| } | |
| private fun configureViewModel() { | |
| localViewModel.listenForNavigationActions() | |
| localViewModel.navigationItemLiveData.observe( | |
| this, | |
| Observer { item -> | |
| bottomNavigationView.selectedItemId = item | |
| } | |
| ) | |
| } | |
| private fun renderSelectedItem(item: Int) { | |
| val userType = getStringPref(USER_TYPE, INFLUENCER) | |
| when (item) { | |
| R.id.action_offers -> { | |
| OffersFragment.loadFragment(this) | |
| } | |
| R.id.action_chats -> { | |
| ChatFragment.loadFragment(this) | |
| } | |
| R.id.action_discover -> { | |
| if (userType == INFLUENCER) { | |
| InfluencerDiscoverFragment.loadFragment(this) | |
| } else { | |
| CompanyDiscoverFragment.loadFragment(this) | |
| } | |
| } | |
| R.id.action_search -> { | |
| if (userType == INFLUENCER) { | |
| InfluencerSearchFragment.loadFragment(this) | |
| } else { | |
| CompanySearchFragment.loadFragment(this) | |
| } | |
| } | |
| R.id.action_profile -> { | |
| if (userType == INFLUENCER) { | |
| ProfileFragment.loadFragment(this) | |
| } else { | |
| CompanyProfileFragment.loadFragment(this) | |
| } | |
| } | |
| else -> { | |
| } | |
| } | |
| } | |
| } |
No comments :
Post a Comment