To manage images in Grid format there are certain ways. Here in this tutorial i have used Volley Library, which is developed by the Google Team to pop images in grid view. Before we start with the code part, let us understand what actually volley library is.

What is Volley Library?

Volley Library is an HTTP library that makes networking possible for Android apps efficiently.  Volley is available through the open AOSP repository. Volley Library is developed by the Google developers, but its not officially launched by the Google. Google Application uses this library in there apps.

Advantages of volley library:

  • Automatic scheduling of network requests.
  • Multiple parallel operation on network connection
  • You can also prioritize your requests
  • You can also cancel the requests

To get started to Manage GridView Images using Volley Network Library you need to clone the Volley Library from the repository.

How to clone library?

I would suggest you to download the Git from this link. Download here

After downloading install it.

  • Open Git-Gui
  • Go to Repository Clone or simply press Ctrl+L
  • Copy and paste this in the Source location

git clone https://android.googlesource.com/platform/frameworks/volley

  • Set your target directory
  • Or you can run this command from command prompt or from Git Bash

Once cloning finished successfully, now you need to import that project into your project in order to use that library in your project.

Steps to import library in the Android Studio

  • Open the project in which you want to use the Volley Library
  • Go to File New Import Module give the path of the volley directory you cloned which you have cloned from the repository and follow the further steps. After completing the desired steps the volley folder should be displayed in your project hierarchy in the left

And here you have successfully imported the library in your project.

After successfully import of the Volley Library, here I will show how to load images in the gridview from the network. Below is the full code for that.

Here in the example I will show that how to load the images from the multiple URL in your gridview from the internet.

1) MainActivity.java

package com.app.srcecde.grid;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;

import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

import com.android.volley.Request;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.NetworkImageView;

public class MainActivity extends AppCompatActivity {

private GridView g;
ImageLoader mImageLoader;
NetworkImageView mNetworkImageView;

static final String[] imagesurl = new String[]{
"http://url1", //replace with the url
"http://url2",
"http://url3"
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
g= (GridView) findViewById(R.id.grid);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

mImageLoader = MyVolleySingleton.getInstance(this).getImageLoader();

final GridView gridView = (GridView) findViewById(R.id.grid);
gridView.setAdapter(new MyImageAdapter());

}

static class ViewHolder {
ImageView imageView;
}

class MyImageAdapter extends BaseAdapter {

@Override
public int getCount() {
return imagesurl.length;
}

@Override
public Object getItem(int position) {
return null;
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

View view = convertView;
final ViewHolder gridViewImageHolder;

try
{
if (view == null) {
view = getLayoutInflater().inflate(R.layout.activity_main, parent, false);
gridViewImageHolder = new ViewHolder();
gridViewImageHolder.imageView = (ImageView) view.findViewById(R.id.network);
view.setTag(gridViewImageHolder);
} else {
gridViewImageHolder = (ViewHolder) view.getTag();
}

mNetworkImageView = (NetworkImageView) gridViewImageHolder.imageView;
mNetworkImageView.setDefaultImageResId(R.mipmap.ic_launcher);
mNetworkImageView.setErrorImageResId(R.mipmap.ic_launcher);
mNetworkImageView.setAdjustViewBounds(true);
mNetworkImageView.setImageUrl(imagesurl[position], mImageLoader);
}
catch (Exception e)
{

}
return view;
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Know How to make money with your Android Application Now

2) MyVolleySingleton.java

package com.app.srcecde.grid;

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;

import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.ImageLoader;
import com.android.volley.toolbox.Volley;

/**
 * Created by SrceCde on 07-01-2016.
 */
public class MyVolleySingleton {
    private static MyVolleySingleton mInstance;
    private RequestQueue mRequestQueue;
    private ImageLoader mImageLoader;
    private static Context mCtx;

    private MyVolleySingleton(Context context) {
        mCtx = context;
        mRequestQueue = getRequestQueue();

        mImageLoader = new ImageLoader(mRequestQueue,
                new ImageLoader.ImageCache() {
                    private final LruCache<String, Bitmap>
                            cache = new LruCache<String, Bitmap>(20);

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

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

    public static synchronized MyVolleySingleton getInstance(Context context) {
        if (mInstance == null) {
            mInstance = new MyVolleySingleton(context);
        }
        return mInstance;
    }

    public RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            // getApplicationContext() is key, it keeps you from leaking the
            // Activity or BroadcastReceiver if someone passes one in.
            mRequestQueue = Volley.newRequestQueue(mCtx.getApplicationContext());
        }
        return mRequestQueue;
    }

    public  void addToRequestQueue(Request req) {
        getRequestQueue().add(req);
    }

    public ImageLoader getImageLoader() {
        return mImageLoader;
    }
}



3) LruBitmapCache.java

package com.app.srcecde.grid;

import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;
import android.util.DisplayMetrics;

import com.android.volley.toolbox.ImageLoader;

/**
 * Created by SrceCde on 07-01-2016.
 */
public class LruBitmapCache extends LruCache<String, Bitmap>
        implements ImageLoader.ImageCache {

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

    public LruBitmapCache(Context ctx) {
        this(getCacheSize(ctx));
    }

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

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

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

    // Returns a cache size equal to approximately three screens worth of images.
    public static int getCacheSize(Context ctx) {
        final DisplayMetrics displayMetrics = ctx.getResources().
                getDisplayMetrics();
        final int screenWidth = displayMetrics.widthPixels;
        final int screenHeight = displayMetrics.heightPixels;
        // 4 bytes per pixel
        final int screenBytes = screenWidth * screenHeight * 4;

        return screenBytes * 3;
    }
}

4) activity_content.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:layout_height="match_parent">

    <com.android.volley.toolbox.NetworkImageView
        android:layout_width="200dp"
        android:id="@+id/network"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        />
    <GridView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/grid"
        android:numColumns="2">
    </GridView>
</RelativeLayout>

Now add INTERNET permission in AndroidManifest.xml.
To increase the number of columns you can change the android:numColumns value in acticity_content.xml fine as per your requirement.
MyVolleySingleton.java and LruBitmapCache.java is referenced from Android developer site

The final output would look like this.

Manage GridView Images using Volley Network Library

Follow me on Twitter

Hope you enjoyed, if found useful keep sharing. Stay tuned for more. Keep Sharing. Stay tuned to Tech Tunes.