Android Custom GridView with Images and Texts using Volley

January 10, 2016 by Belal Khan 81 Comments

In this post we will create an Android Custom GridView Example Application. In this android example we will get the images from server and will display in the grid. So we will be using.

Web API to get the data and
Volley library to fetch the data from Web API

After the completion our gridview will look like this.

Android Custom GridView

So if you want to create the same then read the full post.

Creating an Android Custom GridView

Creating our Web API

The first thing needed for our Android Custom GridView project is a web api that would give us all the data to display in our GridView. Though I will not be covering the creating an API part. Below you can see the URL and this URL will give me the data for my Android Custom GridView.

http://www.simplifiedcoding.net/demos/SuperHeroes/superheroes.php

If you would go to the above given URL you will see the following JSON.

[
   {
      "image":"http://www.simplifiedcoding.net/demos/SuperHeroes/dhruva.jpg",
      "name":"Super Commando Dhruva"
   },
   {
      "image":"http://www.simplifiedcoding.net/demos/SuperHeroes/parmanu.jpg",
      "name":"Parmanu"
   },
   {
      "image":"http://www.simplifiedcoding.net/demos/SuperHeroes/nagraj.jpg",
      "name":"Nagraj"
   },
   {
      "image":"http://www.simplifiedcoding.net/demos/SuperHeroes/doga.jpg",
      "name":"Doga"
   },
   {
      "image":"http://www.simplifiedcoding.net/demos/SuperHeroes/tiranga.jpg",
      "name":"Tiranga"
   },
   {
      "image":"http://www.simplifiedcoding.net/demos/SuperHeroes/bheriya.jpg",
      "name":"Bheriya"
   }
]

[

{

"image":"http://www.simplifiedcoding.net/demos/SuperHeroes/dhruva.jpg",

"name":"Super Commando Dhruva"

{

"image":"http://www.simplifiedcoding.net/demos/SuperHeroes/parmanu.jpg",

"name":"Parmanu"

{

"image":"http://www.simplifiedcoding.net/demos/SuperHeroes/nagraj.jpg",

"name":"Nagraj"

{

"image":"http://www.simplifiedcoding.net/demos/SuperHeroes/doga.jpg",

"name":"Doga"

{

"image":"http://www.simplifiedcoding.net/demos/SuperHeroes/tiranga.jpg",

"name":"Tiranga"

{

"image":"http://www.simplifiedcoding.net/demos/SuperHeroes/bheriya.jpg",

"name":"Bheriya"

}

]

This JSON would give data for our Android Custom GridView.

Now lets create a project in Android Studio for our Android Custom GridView.

Creating Android Custom GridView Project in Android Studio

Open Android Studio and create a new Project. I created AndroidCustomGridView.
As I told that I will be using Volley Library so first we need to add Volley Library to our Gradle Dependencies. So add volley inside the dependency block of your build.gradle file for app module.

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    
    //Volley Library - You need to add this line
    compile 'com.mcxiaoke.volley:library-aar:1.0.0'
}

dependencies {

compile fileTree(dir: 'libs', include: ['*.jar'])

testCompile 'junit:junit:4.12'

compile 'com.android.support:appcompat-v7:23.1.1'

//Volley Library - You need to add this line

compile 'com.mcxiaoke.volley:library-aar:1.0.0'

}

Our Android Custom GridView project need internet permission so go to the manifest file and add internet permission.

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

1 2	<!-- INTERNET PERMISSION --> <uses-permission android:name="android.permission.INTERNET"/>

Now come to main layout file activity_main.xml of our Android Custom GridView app. Here we will create a GridView. Just use the below code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="net.simplifiedcoding.androidcustomgridview.MainActivity">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:columnWidth="90dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="3"
        android:stretchMode="columnWidth"
        android:verticalSpacing="10dp"></GridView>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="net.simplifiedcoding.androidcustomgridview.MainActivity">

<GridView

android:id="@+id/gridView"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:columnWidth="90dp"

android:gravity="center"

android:horizontalSpacing="10dp"

android:numColumns="3"

android:stretchMode="columnWidth"

android:verticalSpacing="10dp"></GridView>

</LinearLayout>

Now come to MainActivity.java and declare the following variables.

public class MainActivity extends AppCompatActivity {

    //Web api url
    public static final String DATA_URL = "http://www.simplifiedcodingreaders.16mb.com/superheroes.php";

    //Tag values to read from json
    public static final String TAG_IMAGE_URL = "image";
    public static final String TAG_NAME = "name";

    //GridView Object
    private GridView gridView;

    //ArrayList for Storing image urls and titles 
    private ArrayList<String> images;
    private ArrayList<String> names;

public class MainActivity extends AppCompatActivity {

//Web api url

public static final String DATA_URL = "http://www.simplifiedcodingreaders.16mb.com/superheroes.php";

//Tag values to read from json

public static final String TAG_IMAGE_URL = "image";

public static final String TAG_NAME = "name";

//GridView Object

private GridView gridView;

//ArrayList for Storing image urls and titles

private ArrayList<String> images;

private ArrayList<String> names;

We need to initialize the GridView inside onCreate().

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView = (GridView) findViewById(R.id.gridView);
    
    
    }

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

gridView = (GridView) findViewById(R.id.gridView);

}

Now we will create a method to get the JSON Array from the API.

    private void getData(){
        //Showing a progress dialog while our app fetches the data from url
        final ProgressDialog loading = ProgressDialog.show(this, "Please wait...","Fetching data...",false,false);

        //Creating a json array request to get the json from our api
        JsonArrayRequest jsonArrayRequest = new JsonArrayRequest(DATA_URL,
                new Response.Listener<JSONArray>() {
                    @Override
                    public void onResponse(JSONArray response) {
                        //Dismissing the progressdialog on response
                        loading.dismiss();

                        //Displaying our grid
                        showGrid(response);
                    }
                },
                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {

                    }
                }
        );

        //Creating a request queue
        RequestQueue requestQueue = Volley.newRequestQueue(this);
        //Adding our request to the queue
        requestQueue.add(jsonArrayRequest);
    }

private void getData(){

//Showing a progress dialog while our app fetches the data from url

final ProgressDialog loading = ProgressDialog.show(this, "Please wait...","Fetching data...",false,false);

//Creating a json array request to get the json from our api

JsonArrayRequest jsonArrayRequest = new JsonArrayRequest(DATA_URL,

new Response.Listener<JSONArray>() {

@Override

public void onResponse(JSONArray response) {

//Dismissing the progressdialog on response

loading.dismiss();

//Displaying our grid

showGrid(response);

}

new Response.ErrorListener() {

@Override

public void onErrorResponse(VolleyError error) {

}

);

//Creating a request queue

RequestQueue requestQueue = Volley.newRequestQueue(this);

//Adding our request to the queue

requestQueue.add(jsonArrayRequest);

}

Once we got the JSON Array as the response we are calling method showGrid() and passing the JSON Array. So We will create this method to display our grid. But before we need an Adapter that would create all the needed number of ImageViews to the Grid, and before creating the adapter 😛 we need to create a Custom Volley Request for our NetworkImageView.
To display the images from the URL, I am going to use Volley’s NetworkImageView same as we did in many previous posts. So first create a class named CustomVolleyRequest.java and write the following code.

package net.simplifiedcoding.androidcustomgridview;
import android.content.Context;
import android.graphics.Bitmap;
import android.support.v4.util.LruCache;

import com.android.volley.Cache;
import com.android.volley.Network;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.BasicNetwork;
import com.android.volley.toolbox.DiskBasedCache;
import com.android.volley.toolbox.HurlStack;
import com.android.volley.toolbox.ImageLoader;
/**
 * Created by Belal on 12/5/2015.
 */

public class CustomVolleyRequest {

    private static CustomVolleyRequest customVolleyRequest;
    private static Context context;
    private RequestQueue requestQueue;
    private ImageLoader imageLoader;

    private CustomVolleyRequest(Context context) {
        this.context = context;
        this.requestQueue = getRequestQueue();

        imageLoader = new ImageLoader(requestQueue,
                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 CustomVolleyRequest getInstance(Context context) {
        if (customVolleyRequest == null) {
            customVolleyRequest = new CustomVolleyRequest(context);
        }
        return customVolleyRequest;
    }

    public RequestQueue getRequestQueue() {
        if (requestQueue == null) {
            Cache cache = new DiskBasedCache(context.getCacheDir(), 10 * 1024 * 1024);
            Network network = new BasicNetwork(new HurlStack());
            requestQueue = new RequestQueue(cache, network);
            requestQueue.start();
        }
        return requestQueue;
    }

    public ImageLoader getImageLoader() {
        return imageLoader;
    }
}

package net.simplifiedcoding.androidcustomgridview;

import android.content.Context;

import android.graphics.Bitmap;

import android.support.v4.util.LruCache;

import com.android.volley.Cache;

import com.android.volley.Network;

import com.android.volley.RequestQueue;

import com.android.volley.toolbox.BasicNetwork;

import com.android.volley.toolbox.DiskBasedCache;

import com.android.volley.toolbox.HurlStack;

import com.android.volley.toolbox.ImageLoader;

/**

* Created by Belal on 12/5/2015.

public class CustomVolleyRequest {

private static CustomVolleyRequest customVolleyRequest;

private static Context context;

private RequestQueue requestQueue;

private ImageLoader imageLoader;

private CustomVolleyRequest(Context context) {

this.context = context;

this.requestQueue = getRequestQueue();

imageLoader = new ImageLoader(requestQueue,

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 CustomVolleyRequest getInstance(Context context) {

if (customVolleyRequest == null) {

customVolleyRequest = new CustomVolleyRequest(context);

}

return customVolleyRequest;

}

public RequestQueue getRequestQueue() {

if (requestQueue == null) {

Cache cache = new DiskBasedCache(context.getCacheDir(), 10 * 1024 * 1024);

Network network = new BasicNetwork(new HurlStack());

requestQueue = new RequestQueue(cache, network);

requestQueue.start();

}

return requestQueue;

}

public ImageLoader getImageLoader() {

return imageLoader;

}

Now lets create the Adapter for our GridView. Create a class named GridViewAdapter.java and write the following code.

package net.simplifiedcoding.androidcustomgridview;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

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

import java.util.ArrayList;

/**
 * Created by Belal on 12/22/2015.
 */
public class GridViewAdapter extends BaseAdapter {

    //Imageloader to load images
    private ImageLoader imageLoader;

    //Context
    private Context context;

    //Array List that would contain the urls and the titles for the images
    private ArrayList<String> images;
    private ArrayList<String> names;

    public GridViewAdapter (Context context, ArrayList<String> images, ArrayList<String> names){
        //Getting all the values
        this.context = context;
        this.images = images;
        this.names = names;
    }

    @Override
    public int getCount() {
        return images.size();
    }

    @Override
    public Object getItem(int position) {
        return images.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        //Creating a linear layout
        LinearLayout linearLayout = new LinearLayout(context);
        linearLayout.setOrientation(LinearLayout.VERTICAL);

        //NetworkImageView
        NetworkImageView networkImageView = new NetworkImageView(context);

        //Initializing ImageLoader
        imageLoader = CustomVolleyRequest.getInstance(context).getImageLoader();
        imageLoader.get(images.get(position), ImageLoader.getImageListener(networkImageView, R.mipmap.ic_launcher, android.R.drawable.ic_dialog_alert));

        //Setting the image url to load
        networkImageView.setImageUrl(images.get(position),imageLoader);

        //Creating a textview to show the title
        TextView textView = new TextView(context);
        textView.setText(names.get(position));

        //Scaling the imageview
        networkImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        networkImageView.setLayoutParams(new GridView.LayoutParams(200,200));

        //Adding views to the layout
        linearLayout.addView(textView);
        linearLayout.addView(networkImageView);

        //Returnint the layout
        return linearLayout;
    }
}

package net.simplifiedcoding.androidcustomgridview;

import android.content.Context;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.GridView;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import com.android.volley.toolbox.ImageLoader;

import com.android.volley.toolbox.NetworkImageView;

import java.util.ArrayList;

/**

* Created by Belal on 12/22/2015.

public class GridViewAdapter extends BaseAdapter {

//Imageloader to load images

private ImageLoader imageLoader;

//Context

private Context context;

//Array List that would contain the urls and the titles for the images

private ArrayList<String> images;

private ArrayList<String> names;

public GridViewAdapter (Context context, ArrayList<String> images, ArrayList<String> names){

//Getting all the values

this.context = context;

this.images = images;

this.names = names;

}

@Override

public int getCount() {

return images.size();

}

@Override

public Object getItem(int position) {

return images.get(position);

}

@Override

public long getItemId(int position) {

return 0;

}

@Override

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

//Creating a linear layout

LinearLayout linearLayout = new LinearLayout(context);

linearLayout.setOrientation(LinearLayout.VERTICAL);

//NetworkImageView

NetworkImageView networkImageView = new NetworkImageView(context);

//Initializing ImageLoader

imageLoader = CustomVolleyRequest.getInstance(context).getImageLoader();

imageLoader.get(images.get(position), ImageLoader.getImageListener(networkImageView, R.mipmap.ic_launcher, android.R.drawable.ic_dialog_alert));

//Setting the image url to load

networkImageView.setImageUrl(images.get(position),imageLoader);

//Creating a textview to show the title

TextView textView = new TextView(context);

textView.setText(names.get(position));

//Scaling the imageview

networkImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);

networkImageView.setLayoutParams(new GridView.LayoutParams(200,200));

//Adding views to the layout

linearLayout.addView(textView);

linearLayout.addView(networkImageView);

//Returnint the layout

return linearLayout;

}

Now come back to MainActivity.java. We will now create the showGrid() method.

    private void showGrid(JSONArray jsonArray){
        //Looping through all the elements of json array
        for(int i = 0; i<jsonArray.length(); i++){
            //Creating a json object of the current index
            JSONObject obj = null;
            try {
                //getting json object from current index
                obj = jsonArray.getJSONObject(i);

                //getting image url and title from json object
                images.add(obj.getString(TAG_IMAGE_URL));
                names.add(obj.getString(TAG_NAME));
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
        //Creating GridViewAdapter Object
        GridViewAdapter gridViewAdapter = new GridViewAdapter(this,images,names);

        //Adding adapter to gridview
        gridView.setAdapter(gridViewAdapter);
    }

private void showGrid(JSONArray jsonArray){

//Looping through all the elements of json array

for(int i = 0; i<jsonArray.length(); i++){

//Creating a json object of the current index

JSONObject obj = null;

try {

//getting json object from current index

obj = jsonArray.getJSONObject(i);

//getting image url and title from json object

images.add(obj.getString(TAG_IMAGE_URL));

names.add(obj.getString(TAG_NAME));

} catch (JSONException e) {

e.printStackTrace();

}

//Creating GridViewAdapter Object

GridViewAdapter gridViewAdapter = new GridViewAdapter(this,images,names);

//Adding adapter to gridview

gridView.setAdapter(gridViewAdapter);

}

Now at last just call the method getData() inside onCreate().
So the final code for MainActivity.java would be.

package net.simplifiedcoding.androidcustomgridview;

import android.app.ProgressDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.GridView;

import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonArrayRequest;
import com.android.volley.toolbox.Volley;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    //Web api url
    public static final String DATA_URL = "http://www.simplifiedcodingreaders.16mb.com/superheroes.php";

    //Tag values to read from json
    public static final String TAG_IMAGE_URL = "image";
    public static final String TAG_NAME = "name";

    //GridView Object
    private GridView gridView;

    //ArrayList for Storing image urls and titles
    private ArrayList<String> images;
    private ArrayList<String> names;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gridView = (GridView) findViewById(R.id.gridView);

        images = new ArrayList<>();
        names = new ArrayList<>();

        //Calling the getData method
        getData();
    }

    private void getData(){
        //Showing a progress dialog while our app fetches the data from url
        final ProgressDialog loading = ProgressDialog.show(this, "Please wait...","Fetching data...",false,false);

        //Creating a json array request to get the json from our api
        JsonArrayRequest jsonArrayRequest = new JsonArrayRequest(DATA_URL,
                new Response.Listener<JSONArray>() {
                    @Override
                    public void onResponse(JSONArray response) {
                        //Dismissing the progressdialog on response
                        loading.dismiss();

                        //Displaying our grid
                        showGrid(response);
                    }
                },
                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {

                    }
                }
        );

        //Creating a request queue
        RequestQueue requestQueue = Volley.newRequestQueue(this);
        //Adding our request to the queue
        requestQueue.add(jsonArrayRequest);
    }


    private void showGrid(JSONArray jsonArray){
        //Looping through all the elements of json array
        for(int i = 0; i<jsonArray.length(); i++){
            //Creating a json object of the current index
            JSONObject obj = null;
            try {
                //getting json object from current index
                obj = jsonArray.getJSONObject(i);

                //getting image url and title from json object
                images.add(obj.getString(TAG_IMAGE_URL));
                names.add(obj.getString(TAG_NAME));
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }
        //Creating GridViewAdapter Object
        GridViewAdapter gridViewAdapter = new GridViewAdapter(this,images,names);

        //Adding adapter to gridview
        gridView.setAdapter(gridViewAdapter);
    }

}

100

101

102

103

104

package net.simplifiedcoding.androidcustomgridview;

import android.app.ProgressDialog;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.GridView;

import com.android.volley.RequestQueue;

import com.android.volley.Response;

import com.android.volley.VolleyError;

import com.android.volley.toolbox.JsonArrayRequest;

import com.android.volley.toolbox.Volley;

import org.json.JSONArray;

import org.json.JSONException;

import org.json.JSONObject;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

//Web api url

public static final String DATA_URL = "http://www.simplifiedcodingreaders.16mb.com/superheroes.php";

//Tag values to read from json

public static final String TAG_IMAGE_URL = "image";

public static final String TAG_NAME = "name";

//GridView Object

private GridView gridView;

//ArrayList for Storing image urls and titles

private ArrayList<String> images;

private ArrayList<String> names;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

gridView = (GridView) findViewById(R.id.gridView);

images = new ArrayList<>();

names = new ArrayList<>();

//Calling the getData method

getData();

}

private void getData(){

//Showing a progress dialog while our app fetches the data from url

final ProgressDialog loading = ProgressDialog.show(this, "Please wait...","Fetching data...",false,false);

//Creating a json array request to get the json from our api

JsonArrayRequest jsonArrayRequest = new JsonArrayRequest(DATA_URL,

new Response.Listener<JSONArray>() {

@Override

public void onResponse(JSONArray response) {

//Dismissing the progressdialog on response

loading.dismiss();

//Displaying our grid

showGrid(response);

}

new Response.ErrorListener() {

@Override

public void onErrorResponse(VolleyError error) {

}

);

//Creating a request queue

RequestQueue requestQueue = Volley.newRequestQueue(this);

//Adding our request to the queue

requestQueue.add(jsonArrayRequest);

}

private void showGrid(JSONArray jsonArray){

//Looping through all the elements of json array

for(int i = 0; i<jsonArray.length(); i++){

//Creating a json object of the current index

JSONObject obj = null;

try {

//getting json object from current index

obj = jsonArray.getJSONObject(i);

//getting image url and title from json object

images.add(obj.getString(TAG_IMAGE_URL));

names.add(obj.getString(TAG_NAME));

} catch (JSONException e) {

e.printStackTrace();

}

//Creating GridViewAdapter Object

GridViewAdapter gridViewAdapter = new GridViewAdapter(this,images,names);

//Adding adapter to gridview

gridView.setAdapter(gridViewAdapter);

}

Thats all for the coding part, now simply run your application now and you will see the following output.

Android Custom GridView

Bingo! our custom Android GridView is working absolutely fine. If you are getting any trouble you can get my code from GitHub via the link given below.

[wp_ad_camp_1]

Some More Android Tutorials You Should Check

Thats all for this android custom gridview tutorial. You can leave your comments for any feedback or query regarding this android custom gridview tutorial. And please support by sharing the tutorial to your social profiles. Thank You 🙂

About Belal Khan

I am Belal Khan, I am currently pursuing my MCA. In this blog I write tutorials and articles related to coding, app development, android etc.

Comments

Kevin says

January 10, 2016 at 3:49 pm

Great tutorial! thank Belal, Can you make a tutorial for Custom Recyclerview in Tab fragments?

Reply
- Belal Khan says
  
  January 10, 2016 at 4:13 pm
  
  Your welcome buddy.. just wait I will try to post the tutorial for your query ASAP.
  
  Reply
  - Kevin says
    
    January 10, 2016 at 4:17 pm
    
    Thanks Belal, You are truly the best! More knowledge and power to my great sir.
    
    Reply
surya says

January 16, 2016 at 3:37 pm

Hi, I have tried it.. but it is not fetching data.. Hope some problem with url..

Reply
- Belal Khan says
  
  January 16, 2016 at 3:40 pm
  
  Yeah as I gave the hosting details publically.. some one tried it for spamming and they blocked the hosting account 😛
  
  You have to create your own web API to make it work
  
  Reply
  - surya says
    
    April 9, 2016 at 1:14 pm
    
    hello sir
    this app cand start and show msg fetching dada thats
    no resutl show and display in logcat
    
    04-09 18:42:11.706 9483-9526/com.example.mk4.androidcustomgridview I/qtaguid: Tagging socket 42 with tag 3833279300000000(-1204607085) for uid -1 failed errno=-2
    04-09 18:42:11.706 9483-9526/com.example.mk4.androidcustomgridview I/NetworkManagementSocketTagger: tagSocketFd(42, -1204607085, -1) failed with errno-2
    
    Reply
- Belal Khan says
  
  January 16, 2016 at 3:56 pm
  
  I have corrected the url now try using this url
  http://www.simplifiedcoding.16mb.com/superheroes.php
  
  Reply
  - August says
    
    August 1, 2016 at 9:01 am
    
    Hi Belal. The ProgressDialog won’t stop loading. Please help. Anyone successfully done this?
    
    Reply
    - Wong Chun Kit says
      
      November 12, 2016 at 5:29 pm
      
      i also stuck in this problem ,who else can help , in hurry , need help .(T.T)
      
      Reply
      - Deniz Yunus Göğüş says
        
        February 24, 2017 at 4:30 pm
        
        Maybe late reply, but I found a solution,
        
        write this :
        new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
        loading.dismiss();
        Toast.makeText(getApplicationContext(), error.getMessage() + “.”, Toast.LENGTH_LONG).show();
        }
        instead of this :
        new Response.ErrorListener() {
        @Override
        public void onErrorResponse(VolleyError error) {
        
        }
        }
      - FERNANDO says
        
        May 16, 2017 at 12:41 am
        
        Hey I got the same error, did you solve it? I would appreciate your help.
        Thanks.
leo says

January 18, 2016 at 3:10 pm

Would you send me the superheros.php for me to see because I can not fetch data make myself.

Reply
leo says

January 18, 2016 at 4:39 pm

would you send the superheros.php because I can not fetch data when I create my own webAPI

Reply
yasir says

January 19, 2016 at 9:28 am

Nice Tutorial …..Bilal can you make tutorial on Displaying data into the graph both locally and from online resource….thanks

Reply
benny says

January 20, 2016 at 4:23 am

would you write the gridview onclicklistener to view the full image?

Reply
benny says

January 20, 2016 at 11:06 am

would you write a tutorial that gridview onitemclicklistener to display the full image?

Reply
Marconni says

January 20, 2016 at 2:40 pm

Thank you very much for this example because it has helped me a lot. I made the example, I am now trying a new activity, by an intent to show the image and name, I have not got, I keep trying. thank you.

Reply
- leo says
  
  January 21, 2016 at 10:45 am
  
  I also create this activity too,would you help me??
  
  Reply
leo says

January 21, 2016 at 10:39 am

Thank you very much for this example because it has helped me a lot. I made the example, I am now trying a new activity, by an intent to show the image and name, I have not got, I keep trying. thank you

Reply
- Fernando says
  
  May 18, 2017 at 3:39 am
  
  Hey did you solve it? I’m trying to do the same thing but no luck. I would appreciate if you could help me.
  Thanks!
  
  Reply
Irsan says

February 6, 2016 at 2:23 am

Nice tutorial…. Can I download file superhero.php ??

Reply
azaur says

February 12, 2016 at 9:54 am

Dude give the working code including android.
I am getting unfortunately stopped error.

Reply
Iskas says

February 15, 2016 at 7:15 pm

How to add one more text under name in girdview ?

Reply
Aleksander says

March 1, 2016 at 6:05 pm

Hi!
Its my file superhero.php
If you are using the emulator then the file should be available http://10.0.2.2/api/superhero.php
I have it available as http://10.0.3.2/api/superhero.php

$row[5],
‘name’=>$row[1])
);
}

echo json_encode($result);

mysqli_close($con);

Reply
vinodh says

March 19, 2016 at 5:54 am

“gradle.builde ” where it locates in android eclipse. and how to it update!!!!!!!!!

Reply
Mounika says

March 21, 2016 at 5:27 am

Hi,

Am getting the error unfortunately app has been stopped,

and I gave this code for fragment
In getData()method , am getting the error
I have to use getActivity() or getContext() but am getting the same error for both of them
pls suggest me

Reply
- Praku says
  
  June 1, 2016 at 4:50 am
  
  I am also getting the same problem in fragments
  
  Reply
  - Praku says
    
    June 6, 2016 at 7:00 am
    
    Sorted out !!
    you just define Context ctx in the mainActivity and use ctx in place of getActivity().
    
    Reply
M Argus Chopin Gyver says

March 22, 2016 at 10:55 am

Hi, can i use it for making a grid view without the photo ?

If it yes, what I can remove from the code ?

Reply
Dian Putri says

March 25, 2016 at 3:45 am

Great tutorial Belal, I have followed this tutorial for my project.

But I have something in my mind.
Is there any code for the image shown in the grid view be able to be clicked and show the enlarge the picture?

Reply
Prakhar says

March 30, 2016 at 8:49 am

Hi Bilal,

could you please help in how to delete images from gridView.

thanks

Reply
mebin says

April 5, 2016 at 12:40 pm

plzz help
how to add gridview onclicklistener ???

Reply
surya says

April 9, 2016 at 1:23 pm

hello can u give me superhero.php file plz..

Reply
Nawel says

April 12, 2016 at 1:54 pm

hello can u give me superhero.php file plz.. :'(

Reply
Avinash Yadav says

May 4, 2016 at 2:06 am

Hi Belal,
Can you please send superhero.php?
Please send this as soon as possible.
Thanks and regards,
Avinash Yadav
[email protected]

Reply
Pratik Chauhan says

May 4, 2016 at 10:45 am

can u make the next activity that show single_row when click on a particular click .Please i tried a lot but not getting the content on like Full description.class

Reply
Pratik Chauhan says

May 4, 2016 at 10:47 am

can u please make single row activity of this file showing particular image

Reply
DPR says

May 6, 2016 at 12:56 pm

can you please send the superheros.php to my mail [email protected]

Reply
- Jeffrey says
  
  July 24, 2016 at 7:24 am
  
  hi , do u receive the superheros.php file ?can u forward to me ? [email protected]
  
  Reply
Praku says

June 1, 2016 at 6:22 am

Thanks for the tutorial 🙂

Reply
Tarun Talreja says

June 10, 2016 at 11:40 am

Hey i am getting please wait fetching data and it is not loading anything can u help me?

Reply
poudel anuj says

June 26, 2016 at 4:50 pm

can you ,please provide the php file for image and text parsing

Reply
syed muhammad awais says

July 1, 2016 at 9:43 am

Salam sir i need to know that how can i make my gridview responsive using volley , the grind view includes dynamic pictures and text i need to make them responsive those images to fit on screen perfectly those images are not from server i have stored them into drawables and i am picking them from there so yes i can not use networkimageview of volley

Reply
windcjg says

July 3, 2016 at 3:13 am

Thank you for the great app !
May I have the file (superhero.php) ?

Please…
[email protected]

Reply
Dipti Agravat says

July 22, 2016 at 5:15 pm

get ic_alert image 🙁

Reply
Dipti Agravat says

July 23, 2016 at 5:08 am

image not set in gridview only show aleart dialog. helm me 🙁

Reply
- shashikant says
  
  October 14, 2016 at 5:06 am
  
  the url is not working..
  
  Reply
Jeffrey says

July 24, 2016 at 6:43 am

hi belal , why dont u just upload the php code?

Reply
snehpatel says

September 1, 2016 at 8:04 am

hello can u give me superhero.php file pls!!!!!!!!!!

Reply
Rulli says

September 16, 2016 at 7:11 am

hello I got this error in logcat
java.lang.NullPointerException: Attempt to invoke virtual method ‘int java.util.ArrayList.size()’ on a null object reference
What could be the cause?

Reply
Irfan says

September 17, 2016 at 8:44 am

HI, Thank you for this nice tutorial. It helped me a lot. What if i want to send any post data with this request. How would i change the code ?

Reply
- Mamon says
  
  February 23, 2017 at 5:33 am
  
  i facing same problem can you help me brother?
  
  Reply
Monica says

September 20, 2016 at 11:38 am

Hello it wont stop fetching data load progress.. and it doesn’t even display images can you help with the problem or can u plz send me superhero.php file..

Reply
- shashikant says
  
  October 14, 2016 at 5:09 am
  
  may be because of url is not working
  
  Reply
  - wong chun kit says
    
    November 12, 2016 at 5:20 pm
    
    ,”url”:”http:\/\/finalproject.16mb.com\/android\/uploads\/1.jpg”}
    this is my image url get from database . i think that is because of my url so my app cannot fetch the img data .my url is difference with the top of the img url given . but i follow the previous tutorial
    
    Reply
    - Fernando says
      
      May 16, 2017 at 11:36 pm
      
      Hey could you solve this? I would appreciate your help!
      Thanks.
      
      Reply
Logan Griffin says

November 13, 2016 at 9:50 pm

Great tutorial! where can i add auth headers to the ImageLoader request?

Reply
- jun jie says
  
  November 14, 2016 at 5:09 am
  
  can u give me ur php file? i stuck on the url step , i get the img url like this :
  {“id”:”19″,”name”:”d1″,”url”:”http:\/\/www.finalproject.16mb.com\/android\/uploads\/19.jpg”}]}
  dun know wat problem that cause my url to show like this.
  
  Reply
  - Hamza Imtiaz says
    
    November 24, 2017 at 9:00 pm
    
    1.replace $response[‘images’] with $response in php file
    2.change ==> public static final String TAG_IMAGE_URL = “images”; to ====> “public static final String TAG_IMAGE_URL = “url” in your main class.
    
    Reply
Nikhil Guttikonda says

November 23, 2016 at 11:05 am

progress Dialogue wont stop.. Fetching Data… please help me…

Reply
- Nikhil Guttikonda says
  
  November 23, 2016 at 11:08 am
  
  http://dasassociates.org/paym/uploads/demop.php this is my php file running on server.. but i didnt get images & title from server
  
  Reply
hiep.vh says

December 5, 2016 at 10:03 am

Thank you for your tutorial
Now I’m trying to make a application to view gridview of local image by voley, but when I try it always have java.lang.OutOfMemoryError exception, can you make a tutorial of this

Reply
Abhijeet Rajput says

December 27, 2016 at 12:48 pm

type org.json.JSONObject cannot be converted to JSONArray
i m getting that error can anyone help me??

Reply
Nanthini says

January 5, 2017 at 6:58 am

dialogbox is not stopped..it shows Fetching Data…
I tried your latest json too..but i get the same error.Would u Please help me

Reply
- Shashikant says
  
  January 5, 2017 at 5:05 pm
  
  Debug the app n check whether u r getting value from server or not
  
  Reply
Deniz Yunus Göğüş says

February 26, 2017 at 5:14 pm

Hi, I have an error, so I created a question on stackoverflow, can u reply?
http://stackoverflow.com/questions/16738279/android-org-json-jsonarray-cannot-be-converted-to-jsonobject

Reply
json says

March 7, 2017 at 1:51 pm

can we display .gif format in this application ?

Reply
Brian says

March 15, 2017 at 2:51 pm

Hi belal,
thanks for this tutorial
would you write a tutorial that gridview onitemclicklistener to display the full image?
appreciate for your help..
thanks…

Reply
- FERNANDO says
  
  May 19, 2017 at 3:48 pm
  
  Hey I want to do the same thing, did have any luck with this?
  Thanks!
  
  Reply
nikhil pande says

March 18, 2017 at 7:59 am

gridview onitemclicklistener to display the full image to share? please

Reply
rahul says

May 3, 2017 at 8:24 am

how to set text below image in this gridview

Reply
- Adel Rafiee says
  
  May 4, 2017 at 6:55 am
  
  In the end of GridViewAdapter you have to put this line –> linearLayout.addView(textView); below the second line linearLayout.addView(networkImageView);
  
  like this:
  
  //Adding views to the layout
  linearLayout.addView(networkImageView);
  linearLayout.addView(textView);
  
  Reply
Adel Rafiee says

May 4, 2017 at 6:49 am

Hello Belal
Wonderful, It is a Great tutorial
it works perfectly. many thanks man

But i have a little problem with scrolling up, when I scroll down everything is fine, but when I scroll up from the end of the list, it’s not smooth and it jumps to end again and again. Did I miss anything here?

I’m looking forward for your answer

Reply
Alaa khatib says

July 20, 2017 at 12:25 am

Hello Belal

How to change getview() to use an existing layout_grid_item.xml which contains textview and imageview

I hope you help me make this change

thanks

Reply
Sandeep Kumar says

September 12, 2017 at 7:40 am

Hi
I want to use my predefined layout. In the above code the layout is created in run time but i want to use my predefined layout in xml file. how can use the code and my predefined layout.

Reply
Nikhil Chandeshwar says

September 23, 2017 at 8:05 am

Hello everyone, here problem is with php script
just follow this
1) make an array like this
$android = array();
now
$fetch_res = [‘image’=>’$image’,name=>’name’];
array_push($android,$fetch_res);
echo json_encode($android);

You will get Output like Belal’s json result
Thank You!!!

Reply
Kevin Perdana says

December 27, 2017 at 4:48 pm

If image show dialog alert picture,
Add library compile ‘com.nostra13.universalimageloader:universal-image-loader:1.9.5’ in build.gradle

Reply
GaNs Oza says

January 31, 2018 at 5:46 am

hello @Belal Khan really thank you your all tut and blogs are help full for all android developer.

i have use this Android-custom-gridview-images Code but i am some issue
actually i get same as JSON Data and also get totally path in my grid view but in my application text View is show Proper Name and Image is not showing …?
could u help me please .

Thank you.

Thank you

Reply
Sarika shrivastava says

March 31, 2018 at 9:54 pm

hello sir, i tried the above code with my own server i got the response array while running on postman chrome, but inside the android app Progressdialog is continuously loading, i am not getting the response at app end, even url is ok.

Reply
sagar says

June 17, 2018 at 6:30 pm

how to pass an argument in Volley GET request?

Reply
Pratik Vasani says

June 23, 2018 at 6:48 am

I have done successfully…!!!
Thanks bro.
Now i want to learn how fetch video from server in listview or recyclerview.
please make one example on it.

Thanks.
God bless you.

Reply

Android Custom GridView with Images and Texts using Volley

Creating an Android Custom GridView

Creating our Web API

Creating Android Custom GridView Project in Android Studio

Related

About Belal Khan

Comments

Leave a Reply to Fernando Cancel reply

About Simplified Coding

Quick Links

Creating an Android Custom GridView

Creating our Web API

Creating Android Custom GridView Project in Android Studio

Sharing is Caring:

Related

About Belal Khan

Comments

Leave a Reply to Fernando Cancel reply

About Simplified Coding

Quick Links

Categories