How to show images efficiently in a list?

Question

So currently i have a list that shows images and text beside it but having a problem showing pictures. I thought that the best approach is to parse using JSOUP then download image and decode it using bitmapsFactory but failed because it takes too much memory still displaying the pictures. Is there a way to display the image online so it does not take space? i thought about using Webview and then insert the link and display the picture but would that work? I included my MainActivity, ListClass, ImageHandler and XML for the list.

Main Activity;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.TextView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.app.FragmentManager;
import android.widget.FrameLayout;
import android.widget.Button;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.Toast;
import android.app.Activity;
import android.graphics.BitmapFactory;
import android.graphics.drawable.Drawable;




public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener   {

    ListView list;
    imageHandler imagess = new imageHandler();

    String[] web = {"Egypt "};
    Drawable[] imageId = { imagess.LoadImageFromWebOperations("http://egyptianstreets.com/wp-content/uploads/2016/08/satelliteegypt-400x240.jpg")};

    Handler handler;
    Button button;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.setDrawerListener(toggle);
        toggle.syncState();
        NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(this);
        listClass adapter = new
                listClass(MainActivity.this, web, imageId);
        list=(ListView)findViewById(R.id.list);
        list.setAdapter(adapter);

        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                Toast.makeText(MainActivity.this, "You Clicked at " +web[+ position], Toast.LENGTH_SHORT).show();
            }
        });

    }

ListClass;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class listClass extends ArrayAdapter<String>{



    //Next three lines introduces Variables to use in the class
    private final Activity context;
    private final String[] web;
    private final Drawable[] imageId;

    //Constructor to get Web, Image and context to set adapter
    public listClass(Activity context,  String[] web, Drawable[] imageId) {

            super(context, R.layout.list, web);
            this.context = context;
            this.web = web;
            this.imageId = imageId;

    }

    //Public method to ...
    @Override
    public View getView(int position, View view, ViewGroup parent) {
        LayoutInflater inflater = context.getLayoutInflater();
        View rowView= inflater.inflate(R.layout.list, null, true);

        TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
        txtTitle.setText(web[position]);
        imageView.setImageDrawable(imageId[position]);
        return rowView;
    }
}

ImageHandler using InputStream but does not work;

import android.media.Image;
import java.net.URL;
import android.graphics.BitmapFactory;
import java.io.InputStream;
import android.graphics.drawable.Drawable;




public class imageHandler {

    Image picture;


    public static Drawable LoadImageFromWebOperations(String url) {
        try {
            InputStream is = (InputStream) new URL(url).getContent();
            Drawable d = Drawable.createFromStream(is, "earthdownload");
            return d;
        } catch (Exception e) {
            return null;
        }
    }
}

XML for list;;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="150dp"
        android:layout_height="100dp" />

    <TextView
        android:id="@+id/txt"
        android:paddingRight="16dp"
        android:textSize="15dp"
        android:layout_alignLeft="@+id/img"
        android:layout_marginLeft="150dp"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_weight="1"
        android:ellipsize="none"
        android:maxLines="100"
        android:scrollHorizontally="false"/>

</RelativeLayout>

@Razgriz i thought about that or using Glide Library but someone told me that those library download the images to the phone which would be inefficient. — STOPIMACODER, Aug 06 '16 at 04:01
glide or picasso don't download images they cache them.it is very efficent way.you can turn off caching also. [Glide](https://github.com/bumptech/glide) — skydroid, Aug 06 '16 at 04:43

score 3 · Accepted Answer · answered Aug 06 '16 at 04:02

If you are using Images, text combination i suggest you look at recycler views. They are much more efficient with images. No harm in using list view, though.

For loading images, use the Picasso library. http://square.github.io/picasso/

You can load images into your image view with just one line of code. Hope this helps.

score 1 · Answer 2 · answered Aug 06 '16 at 05:30

As Nikhil has suggested, try and use the Picasso library. It is easy to implement and efficient as well.

All you have to do is enter a single line to load the image. You can do this in the getView method of an adaptor

Picasso.with(context).load(imageURI/path/file).fit().error(R.id.error_img) //an image that gets displayed in case of error
.into(R.id.img_container, new Callback() {
   void onSuccess() {}
   void onError() {}
})

Hope this helps!

score 0 · Answer 3 · answered Aug 06 '16 at 04:05

Use Volley library to load image and use this Class to load the image.

public class LruBitmapCache extends LruCache<String, Bitmap> implements
    ImageCache {
public static int getDefaultLruCacheSize() {
    final int maxMemory = (int) (Runtime.getRuntime().maxMemory() / 1024);
    final int cacheSize = maxMemory / 8;

    return cacheSize;
}

public LruBitmapCache() {
    this(getDefaultLruCacheSize());
}

public LruBitmapCache(int sizeInKiloBytes) {
    super(sizeInKiloBytes);
}

@Override
protected int sizeOf(String key, Bitmap value) {
    return value.getRowBytes() * value.getHeight() / 1024;
}

@Override
public Bitmap getBitmap(String url) {
    return get(url);
}

@Override
public void putBitmap(String url, Bitmap bitmap) {
    put(url, bitmap);
}

}

add this XML for ImageView

 <!-- Thumbnail Image -->
<com.android.volley.toolbox.NetworkImageView
    android:id="@+id/thumbnail"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:layout_alignParentLeft="true"
    android:layout_marginRight="8dp" />

set in adapter

if (imageLoader == null)
        imageLoader = AppController.getInstance().getImageLoader();
    NetworkImageView thumbNail = (NetworkImageView) convertView
            .findViewById(R.id.thumbnail);

For more information u can go here

How to show images efficiently in a list?

3 Answers3