RecyclerView load 10000+ image from backend api

Question

I get JSON data in my back-end API.

[
  {
    id: "is random"
    image: "my url"
  },
  ......10000+
]

My id is random number without continuity.

Each json object has image.

I call api and put data in RecyclerView .

But when RecyclerView is displayed, it will get stuck or crash.

I use Glide load image.

GlideApp.with(context).load(myUrl).placeholder(myPlaceholder).into(uiImage)

How can I let RecyclerView read it smoothly?

Can I use Paging Library to let it display five data at the beginning?

But I don't know which kind of DataSource is suitable for my json format.

ItemKeyedDataSource? or PageKeyedDataSource? or PositionalDataSource?

Update:

class MyAdapter(): ListAdapter<Item, ItemHolder>(Item.DIFF_CALLBACK){
   override fun onCreateViewHolder(parent: ViewGroup, type: Int): ItemHolder=
        ItemHolder(LayoutInflater.from(parent.context), parent).also {}

   override fun onBindViewHolder(holder: ItemHolder, position: Int): Unit = 
     with(holder) {
        val item = getItem(position)
        uiTextView.text = item.id
        GlideApp.with(context).load(item.image).placeholder(myPlaceholder).into(uiImage)
    }
}

Update:

class ItemHolder(inflater: LayoutInflater, parent: ViewGroup)
    : RecyclerView.ViewHolder(inflater.inflate(R.layout.my_Item, parent, false)) {
    val uiTextView: TextView = itemView.findViewById(R.id.my_textView)
    val uiImage: ImageView = itemView.findViewById(R.id.my_image)
}

Sometimes it crashes if I remove the placeholder.

GlideApp.with(context).load(myUrl).into(uiImage)

Log message:

I/Choreographer: Skipped 3660 frames!  The application may be doing too much work on its main thread.

can you please post your adapter code? because ideally whatever the number of items, list should not crash as ViewHolder is efficient enough to handle that. — rafa, Feb 27 '19 at 02:35
The type of datasource depends on how the API supports pagination. — EpicPandaForce, Feb 27 '19 at 02:38
Why worry? RecyclerView makes sure only visible items are loaded. Your Glide load should be in onBind, which is only called when it is becoming visible. — AIMIN PAN, Feb 27 '19 at 02:40
By the way, when Glide didn't add a placeholder, it would often crash. — JerryLi, Feb 27 '19 at 02:54
Try it by removing the whole image thing. Check whether it is still crashing while loading data? — PushpikaWan, Feb 27 '19 at 03:09
what is your ItemHolder class? can you please post the code for that too? — rafa, Feb 27 '19 at 03:29
Can you please add the log message which contains the exception for the crash? — rafa, Feb 27 '19 at 05:24

Sandip Savaliya · Accepted Answer · 2019-02-27T08:12:49.230

1

inject GlideApp, instead of creating new instance every-time, which will make your app more smooth.

And also if you are using Paging Library, then use PagedListAdapter.

edited Feb 27 '19 at 08:12

answered Feb 27 '19 at 06:32

Sandip Savaliya

784
6
19

1

ListAdapter extends Recyclerview.Adapter with DIFF feature. So it works same as Recyclerview.Adapter with some added functionality. https://developer.android.com/reference/android/support/v7/recyclerview/extensions/ListAdapter – rafa Feb 27 '19 at 07:04
Thank you so much for updating my knowledge about new ListAdapter. :) @rafa – Sandip Savaliya Feb 27 '19 at 08:13

RecyclerView load 10000+ image from backend api

1 Answers1