Low FPS with images in a ListView

Question

I'm making a App for the restaurant of my University.

I've a ScrollView with 2 ListView inside (one for the first dishes and the other for the second dishes).

I create the ListView with the next code:

ListView lista = (ListView)view.findViewById(R.id.listaprimero); //first dishes
ArrayList<Plato> arraydir = new ArrayList<Plato>(); //array for first dishes

ListView listaS = (ListView)view.findViewById(R.id.listasegundo); //second dishes
ArrayList<Plato> arraydirS = new ArrayList<Plato>(); //array for second dishes

Plato plato; //Object "dish"

//Now for each dish that I want to add, I use the object "Plato" 
//to create a dish with its photo and its name.
//Then I add it to the ArrayList

plato = new Plato(getResources().getDrawable(R.drawable.macarrones), "Macarrones", "Amenizador");
arraydir.add(plato);
plato = new Plato(getResources().getDrawable(R.drawable.arroz), "Arroz tres delicias", "CEO");
arraydir.add(plato);
plato = new Plato(getResources().getDrawable(R.drawable.ternera), "Ternera", "Amenizador");
arraydir.add(plato);
plato = new Plato(getResources().getDrawable(R.drawable.pollo), "Filetitos de pollo", "Directora RRHH");
arraydirS.add(plato);
plato = new Plato(getResources().getDrawable(R.drawable.merluza), "Merluza al horno", "Directora RRHH");
arraydirS.add(plato);

// I create the Adapter for the dishes
AdapterPlatos adapter = new AdapterPlatos(getActivity(), arraydir);
AdapterPlatos adapterS = new AdapterPlatos(getActivity(), arraydirS);

// Set it
lista.setAdapter(adapter);
listaS.setAdapter(adapterS); 

Now, when I run the app I have very low FPS and Android Studio console says everytime: "Skipped 32 frames! The application may be doing too much work on its main thread."

But when I create the dishes like this:

plato = new Plato(getResources().getDrawable(R.drawable.macarrones), "Dish 1", "Amenizador");
    arraydir.add(plato);
plato = new Plato(getResources().getDrawable(R.drawable.macarrones), "Dish 2", "Amenizador");
    arraydir.add(plato);
plato = new Plato(getResources().getDrawable(R.drawable.macarrones), "Dish 3", "Amenizador");
    arraydir.add(plato);
plato = new Plato(getResources().getDrawable(R.drawable.macarrones), "Dish 4", "Amenizador");
    arraydirS.add(plato);
...

With the same photo, no problems happens.

PD: The size of the photos are between 70 and 200Kb, not heavy files.

Why?

Thanks for all.

Answer 1

It still takes time to decode and load that Drawable(Bitmap) into memory to display.

It would be better if your Plato object only held on to the resource id of the drawable, and not the drawable itself. This will use a lot less memory. Then in your adapter getView(), you can use something like Glide to load that resource into your ImageView.

Glide.with(context).load(R.drawable.macarrones).into(imageView);