What's the best way to place multiple images onto the screen simultaneously?

Issue

So my app needs to have a maximum of 50 images on the screen at the same time in a FrameView, they need to be placed on top of a base image. If I put these images into drawable, the app crashes after a few images are placed with an OutOfMemoryError. But it works when I put the images in mipmap for some reason without crashing. So I placed them all into the mipmap folders. The images are VERY small too, the largest among them is 2.2 KB and the smallest is 398 bytes. The app works as intended, but performance is horrible after you place a few images onto the screen. The first few images will load quickly, but as you continue to place images onto the screen it gets progressively slower to the point where it may take multiple seconds to place the image onto the screen. I'm just using an ArrayList to put all the Drawables in, and then another ArrayList to put all the ImageViews and I load them into the view within my onTouchListener. Here's an idea. The index is used to decide which image is to be inserted:

    drawableOverlays.set(index, getResources().getDrawable(R.mipmap.exampleImage, null));           
    imageOverlays.get(index).setImageDrawable(drawableOverlays.get(index));
    frame.addView(imageOverlays.get(index));

I've also tried using Glide and Picasso and those loaded in even slower. Am I approaching this wrong? Is there a more efficient way to accomplish this?

Solution

The best way is create a RecyclerView with ImageViews as items, and then load the images with Glide or Picasso, any of those libraries will give you the best performance

Answered By - cherif