Kotlin: Recycler View Choppy

Question

My adapter is applying images correctly to the RecyclerView and scrolls properly... until I add a large amount of items. It then becomes fairly choppy and I know it's an issue with my approach. See the code below:

class FragmentMenuViewAdapter(private val menuItems: ArrayList<MenuItemModel>, private val clickListener: (MenuItemModel) -> Unit) : RecyclerView.Adapter<FragmentMenuViewAdapter.CustomViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CustomViewHolder {

        val policy = StrictMode.ThreadPolicy.Builder().permitAll().build()
        StrictMode.setThreadPolicy(policy)

        val layoutInflater = LayoutInflater.from(parent.context)
        val cellForRow = layoutInflater.inflate(R.layout.recyclerview_list_items, parent, false)
        return CustomViewHolder(cellForRow)
    }

    override fun getItemCount(): Int {

        return menuItems.size
    }

    override fun onBindViewHolder(holder: CustomViewHolder, position: Int) {

        var menuItemIconURI = RouteManager.mAppModel?.resourcesURL + menuItems[position].icon

        menuItemIconURI = menuItemIconURI.replace("\$platform", "iOS")
        menuItemIconURI = menuItemIconURI.replace("\$scale", "@3x")

        val inputStream = URL(menuItemIconURI).openStream()
        holder.view.menuButton.setImageBitmap(BitmapFactory.decodeStream(inputStream))
        holder.bind(menuItems[position], clickListener)
    }

class CustomViewHolder(val view: View): RecyclerView.ViewHolder(view) {

        fun bind(menuItem: MenuItemModel, clickListener: (MenuItemModel) -> Unit) {
            view.setOnClickListener{clickListener(menuItem)}
        }
    }
}

The image(s) are being set via URL links. I have it working, but I suspect I'm making a novice mistake somewhere, or am simply taking the wrong approach. Any advice on how to adjust my code would be much appreciated.

Answer 1

I think the problem comes from decoding bitmap image in main thread. Try to use Glide instead. It helps us to load images asynchronously when needed. For example if you want to scroll the RecyclerView fast, it doesn't need to decode and show all images. In addition it has a caching mechanism to make this process smoother.

build.gradle

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.7.1'
}

FragmentMenuViewAdapter.kt

override fun onBindViewHolder(holder: CustomViewHolder, position: Int) {

    var menuItemIconURI = RouteManager.mAppModel?.resourcesURL + menuItems[position].icon

    menuItemIconURI = menuItemIconURI.replace("\$platform", "iOS")
    menuItemIconURI = menuItemIconURI.replace("\$scale", "@3x")

    Glide.with(holder.view.menuButton.context)
        .load(menuItemIconURI)
        .into(holder.view.menuButton)

    holder.bind(menuItems[position], clickListener)
}