Scrolling slow on listview with image thumbnail downloaded

Question

I'm having a very slow scrolling on my listview which has some text and an image thumbnail, the information is obtained by a json webservice. This is my class that creates the listview:

public class NoticiasFragment extends Fragment{
    private static final String TAG = "NoticiasFragment";
    private String resultado;
    private List<HashMap<String, String>> mAndroidMapList = new ArrayList<>();
    private ListView mListView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
        View view = inflater.inflate(R.layout.noticias_tab, container, false);

        /*ActionBar actionBar = ((AppCompatActivity)getActivity()).getSupportActionBar();
        actionBar.setTitle("Noticias");
        actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#FFFFFF")));*/

        Noticia noticia = new Noticia();
        try {
            resultado = noticia.execute("some-url").get();
        } catch (InterruptedException e) {
            e.printStackTrace();
        } catch (ExecutionException e) {
            e.printStackTrace();
        }

        armarListaNoticias(resultado, inflater, container, view);
        return view;
    }

    protected void armarListaNoticias(String resultado, LayoutInflater inflater, ViewGroup container, View view){
        mListView = (ListView) view.findViewById(R.id.listaNoticias);

        try {
            JSONArray jArray = new JSONArray(resultado);
            String titulo = null;
            for(int i=0; i < jArray.length(); i++) {
                JSONObject jObject = jArray.getJSONObject(i);
                HashMap<String, String> map = new HashMap<>();
                map.put("Thumbnail", jObject.getString("thumbnail_path"));
                titulo = jObject.getString("preview_title");
                if(titulo.length() > 58){
                    titulo = titulo.substring(0, 58) + "...";
                }
                map.put("Titulo", titulo);
                map.put("Titulo_completo", jObject.getString("full_title"));
                map.put("Thumbnail_path", jObject.getString("thumbnail_path"));
                map.put("Descripcion", jObject.getString("full_text"));
                map.put("Resumen", "Resumen");

                mAndroidMapList.add(map);
            }
        } catch (JSONException e) {

        }

        ListAdapter adapter = new SimpleAdapter(getActivity(), mAndroidMapList, R.layout.noticia_row,
                new String[] { "Titulo", "Resumen" },
                new int[] { R.id.titulo, R.id.resumen }){
            @Override
            public View getView(int position, View convertView, ViewGroup parent){
                // Get the current item from ListView

                View view = super.getView(position,convertView,parent);
                Bitmap bmp = null;

                ImageView imageView = (ImageView)view.findViewById(R.id.thumbnail);
                DescargaImagenes descargaImagenes = new DescargaImagenes();
                try {
                    bmp = descargaImagenes.execute("image-url" + mAndroidMapList.get(position).get("Thumbnail")).get();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                } catch (ExecutionException e) {
                    e.printStackTrace();
                }
                imageView.setImageBitmap(bmp);


                //CAMBIAR FUENTE

                TextView myTextView = (TextView)view.findViewById(R.id.titulo);
                Typeface typeFace=Typeface.createFromAsset(getActivity().getAssets(),"fonts/TitilliumWeb-Regular.ttf");
                myTextView.setTypeface(typeFace);

                myTextView = (TextView)view.findViewById(R.id.resumen);
                typeFace=Typeface.createFromAsset(getActivity().getAssets(),"fonts/TitilliumWeb-Regular.ttf");
                myTextView.setTypeface(typeFace);


                if(position % 2 == 1)
                {
                    // Set a background color for ListView regular row/item
                    view.setBackgroundColor(Color.parseColor("#7F1010"));
                }
                else
                {
                    // Set the background color for alternate row/item
                    view.setBackgroundColor(Color.parseColor("#9C1F1F"));
                }
                return view;
            }
        };

        mListView.setAdapter(adapter);

        mListView.setOnItemClickListener(new AdapterView.OnItemClickListener(){

            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                HashMap registro = mAndroidMapList.get(position);

                Intent i = new Intent(getActivity(), DetalleNoticia.class);

                i.putExtra("datos", registro);

                startActivity(i);
            }
        });
    }
}

I didn't know how to set the image, so what I thought, was downloading and setting the image with my list that already has the image path to download on the getView() method. I'm still new to Android so that was the first thing I could think of.

How do I improve performance?

I think the best solution would be to use default 'thumbnail` for all the images. then once the image is downloaded via webservice, then update the imageView. Or else try `lazy loading` concept. — Mohammad Tauqir, Jul 17 '17 at 03:40

score 3 · Accepted Answer · answered Jul 17 '17 at 03:41

You can use Picasso image download library. it will download images asynchronous way. so it will be good for the app performance.

Example:

Picasso.with(mContext).load("https://s3om/foodev/hotel/" + imageLocation).placeholder(R.drawable.ic_default_hotel).error(R.drawable.ic_default_hotel).into(holder.imageviewHotel);

for more information.

score 1 · Answer 2 · answered Jul 17 '17 at 03:41

first you should check here is async or not:

  DescargaImagenes descargaImagenes = new DescargaImagenes();
            try {
                bmp = descargaImagenes.execute("https://aguilaammo.com.mx/public/" + mAndroidMapList.get(position).get("Thumbnail")).get();
            } catch (InterruptedException e) {
                e.printStackTrace();
            } catch (ExecutionException e) {
                e.printStackTrace();
            }

second is here, every time you create typeface from assets in adapter, this is not recommend.:

            TextView myTextView = (TextView)view.findViewById(R.id.titulo);
            Typeface typeFace=Typeface.createFromAsset(getActivity().getAssets(),"fonts/TitilliumWeb-Regular.ttf");
            myTextView.setTypeface(typeFace);

            myTextView = (TextView)view.findViewById(R.id.resumen);
            typeFace=Typeface.createFromAsset(getActivity().getAssets(),"fonts/TitilliumWeb-Regular.ttf");
            myTextView.setTypeface(typeFace)

Instead you should replace the relative of typeface to here like this:

 private View getView(int position, View convertView, ViewGroup parent) {
    View v;
    if (convertView == null) {
        v = inflater.inflate(resource, parent, false);
          TextView myTextView = (TextView)view.findViewById(R.id.titulo);
            Typeface typeFace=Typeface.createFromAsset(getActivity().getAssets(),"fonts/TitilliumWeb-Regular.ttf");
            myTextView.setTypeface(typeFace);

            myTextView = (TextView)view.findViewById(R.id.resumen);
            typeFace=Typeface.createFromAsset(getActivity().getAssets(),"fonts/TitilliumWeb-Regular.ttf");
            myTextView.setTypeface(typeFace);
    } else {
        v = convertView;         
    }

   // bindView(position, v);
   // you type face bind create in here.

    return v;
}

At last. I recommend you use RecyclerView. It is very useful.

Thank you, could you explain more of the last part, the one that you commented on, please? — Aarón Gutiérrez, Jul 17 '17 at 04:25

score 0 · Answer 3 · answered Jul 17 '17 at 03:45

Now we usually use OkHttp+Retrofit to get data from net. Retrofit will convert JSON String to JavaBean, so you will not need to operate JSONObject ...

Then if you want to load net image to a ImageView, you can use Glide or Picasso or Fresco etc..

When you load image into a ImageView in a ListView or GridView, you should set a ScrollListener to them ,as when the list or grid scroll ,you can pause net request, then resume net request after listview stop scroll.

Glide + OkHttp + Retrofit all can download or import to your model from Github.

score 0 · Answer 4 · answered Jul 17 '17 at 04:15

0

Use Picasso or Glide. No need to worry about images with these library.

answered Jul 17 '17 at 04:15

Fr099y

734
7
15

Scrolling slow on listview with image thumbnail downloaded

4 Answers4