Loading image in grid view from server

Question

I have an android application in which i need to retrieve images from server and have to show them into grid view with there title.So please any one can help me how can i perform this task in android.

Answer 1

This could be done in the following steps:

1. Create AsyncTaskLoader (here is a good tutorial http://www.androiddesignpatterns.com/2012/08/implementing-loaders.html). There you can load your images from the server.
2. Create custom adapter for storing your images and creating views by extending BaseAdapter, for instance. Make your own implementation of needed functions.
3. Create a function inside this adapter responsible for adding new data. Don't forget to call notifyDataSetChanged() once you are done
4. Attach this adapter to your GridView
5. Push loaded images into you adapter.

EDIT Ok, here is a basic Proof of concept:

Activity (loader can be started at the onCreate method):

public class MyActivity extends Activity implements LoaderManager.LoaderCallbacks<ArrayList<Drawable>> {

    //other stuff

    @Override
    public Loader<ArrayList<Drawable>> onCreateLoader(int id, Bundle args) {
        return new ImageLoader(this);
    }

    @Override
    public void onLoadFinished(Loader<ArrayList<Drawable>> loader, ArrayList<Drawable> data) {
        myAdapter.pushData(data);
    }

    @Override
    public void onLoaderReset(Loader<ArrayList<Drawable>> loader) {

    }
}

Loader:

public class ImageLoader extends AsyncTaskLoader<ArrayList<Drawable>> {

    public ImageLoader(Context context) {
        super(context);
    }

    @Override
    public ArrayList<Drawable> loadInBackground() {

        //load the stuff
        return data;
    }

    @Override
    protected void onStartLoading() {
        if (data != null) {
            deliverResult(data);
        }
        if (takeContentChanged() || data == null) {
            forceLoad();
        }
    }
}

Adapter:

public class MyAdapter extends BaseAdapter {

    ArrayList<Drawable> data = new ArrayList<>();

    //other functions

    public void pushData(ArrayList<Drawable> data){
        this.data = data;
        notifyDataSetChanged();
    }

}

Answer 2

If you are using to URL for loading image from the server then you can use Picasso.

For using Picasso ->

1) First add compile 'com.squareup.picasso:picasso:2.5.2' in dependencies in built.gradle.

2) Add import "com.squareup.picasso.Picasso;" in grid Adapter java file.

3) Now add "Picasso.with(context).load(pImage[position]).into(imageView);" in adapter file(which load the grid from the server data).

compileSdkVersion 23
buildToolsVersion "23.0.2"
dependencies {
     compile fileTree(dir: 'libs', include: ['*.jar'])
     testCompile 'junit:junit:4.12'
     compile 'com.android.support:appcompat-v7:23.1.1'
     compile 'com.android.support:design:23.1.1'
     compile 'com.squareup.picasso:picasso:2.5.2'
}

now Adapter file is in getView Method (Note po is global variable):

    LayoutInflater inflater = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    po = position;
    View gridView;

    if (convertView == null) {
        gridView = inflater.inflate(R.layout.dashboard_inner, null);// set image based on selected text            
    } else {
        gridView = (View) convertView;
    }

    imageView = (ImageView) gridView.findViewById(R.id.grid_item_image);
    TextView textView1 = (TextView)gridView.findViewById(R.id.grid_item_text1);
    textView1.setText(pName[position]);

    TextView textView2 = (TextView) gridView.findViewById(R.id.grid_item_text2);
    textView2.setText(pPrice[position]);
    textView2.setPaintFlags(textView2.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);

    TextView textView3 = (TextView) gridView.findViewById(R.id.grid_item_text3);
    textView3.setText(pSprice[position]);

    TextView textView4 = (TextView) gridView.findViewById(R.id.grid_item_text4);
    textView4.setText(pOffer[position]);

    Picasso.with(context).load(pImage[position]).into(imageView);
    return gridView;
}