Gallery Image Grid Using Native Android

I had written an article regarding how to make a Gallery Image Grid Using Native Android, but what if we wanted to accomplish the same using the native Android SDK?
In this tutorial we’ll see how to make use of the Android GridView with an image adapter to display remote images from the internet.

Like with all my tutorials, we’ll be using only a terminal and text editor. So no IDE such as Android Studio or Eclipse. From your command prompt or terminal, run the following:
Let’s start with the simple stuff first. In your newly created project, open the src/res/AndroidManifest.xml file and add the internet permission like so:

<uses-permission android:name="android.permission.INTERNET" />

We are doing this because we will be displaying images directly from the internet.
When it comes to designing this application, let’s start with the Android view XML code. Open your project’s src/res/layout/main.xml file and add replace it with the following code:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnWidth="115dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="5dp"
    android:horizontalSpacing="5dp"
    android:stretchMode="columnWidth"
    android:gravity="center" />

We are creating an Android GridView where each column of the grid will be 115dp in size and have 5dp x 5dp spacing.
A GridView in Android is populated using some form of adapter. In this case we’ll be creating our own custom adapter. Create a src/main/java/com/nraboy/imagegrid/ImageAdapter.java file and add the following code:

import android.app.*;
import android.os.*;
import android.widget.*;
import java.util.*;
import android.graphics.*;
import android.view.*;
import android.content.*;
public class ImageAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<Bitmap> bitmapList;
    public ImageAdapter(Context context, ArrayList<Bitmap> bitmapList) {
        this.context = context;
        this.bitmapList = bitmapList;
    }
    public int getCount() {
        return this.bitmapList.size();
    }
    public Object getItem(int position) {
        return null;
    }
    public long getItemId(int position) {
        return 0;
    }
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            imageView = new ImageView(this.context);
            imageView.setLayoutParams(new GridView.LayoutParams(115, 115));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        } else {
            imageView = (ImageView) convertView;
        }
        imageView.setImageBitmap(this.bitmapList.get(position));
        return imageView;
    }
}

In the above code we are essentially taking an ArrayList of Bitmap and assigning the content at any given index to a particular cell in the grid. We are lucky enough to have the getView function determine the current view and position. The view being the cell.
This brings us to the MainActivity class we created when building our project from the command line. We’re going to capture the grid from our XML and populate it with images of our choice. Open your src/main/java/com/nraboy/imagegrid/MainActivity.java file and add the following code:

import android.app.Activity;
import android.os.Bundle;
import android.graphics.*;
import java.util.*;
import java.net.*;
import android.widget.*;
public class MainActivity extends Activity {
    private GridView imageGrid;
    private ArrayList<Bitmap> bitmapList;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        this.imageGrid = (GridView) findViewById(R.id.gridview);
        this.bitmapList = new ArrayList<Bitmap>();
        this.imageGrid.setAdapter(new ImageAdapter(this, this.bitmapList));
    }
}

Wait a second! How are we going to get our images in there? We are assigning our custom adapter to the grid, but there are no images in the ArrayList. In this particular example we’re going to be loading our images directly from the internet. You can choose to load bitmap images however you wish.

private Bitmap urlImageToBitmap(String imageUrl) throws Exception {
    Bitmap result = null;
    URL url = new URL(imageUrl);
    if(url != null) {
        result = BitmapFactory.decodeStream(url.openConnection().getInputStream());
    }
    return result;
}

The above function will take a remote image from URL and load it as a bitmap. So all together in our MainActivity class, we have the following:

import android.app.Activity;
import android.os.Bundle;
import android.graphics.*;
import java.util.*;
import java.net.*;
import android.widget.*;
public class MainActivity extends Activity {
    private GridView imageGrid;
    private ArrayList<Bitmap> bitmapList;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        this.imageGrid = (GridView) findViewById(R.id.gridview);
        this.bitmapList = new ArrayList<Bitmap>();
        try {
            for(int i = 0; i < 10; i++) {
                this.bitmapList.add(urlImageToBitmap("http://placehold.it/150x150"));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        this.imageGrid.setAdapter(new ImageAdapter(this, this.bitmapList));
    }
    private Bitmap urlImageToBitmap(String imageUrl) throws Exception {
        Bitmap result = null;
        URL url = new URL(imageUrl);
        if(url != null) {
            result = BitmapFactory.decodeStream(url.openConnection().getInputStream());
        }
        return result;
    }
}

I’ve chosen just to load ten generic placeholder images in the above code.

To build this, from your terminal or command prompt, run the following Gradle command: