Android Custom GridView with Images and Texts using Volley

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
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.

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

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.

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

  • 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.

  • Now come to and declare the following variables.

  • We need to initialize the GridView inside onCreate().

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

  • 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 and write the following code.

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

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

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

  • Thats all for the coding part, now simply run your application now and you will see the following output.
android custom gridview
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.


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 🙂

81 thoughts on “Android Custom GridView with Images and Texts using Volley”

      • 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

          • Maybe late reply, but I found a solution,

            write this :
            new Response.ErrorListener() {
            public void onErrorResponse(VolleyError error) {
            Toast.makeText(getApplicationContext(), error.getMessage() + “.”, Toast.LENGTH_LONG).show();
            instead of this :
            new Response.ErrorListener() {
            public void onErrorResponse(VolleyError error) {


  1. 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.

  2. 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

    • Hey did you solve it? I’m trying to do the same thing but no luck. I would appreciate if you could help me.

  3. 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

  4. 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?

  5. 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

  6. 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

  7. 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?

  8. 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 ?

  9. 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..

      • ,”url”:”http:\/\/\/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

    • can u give me ur php file? i stuck on the url step , i get the img url like this :
      dun know wat problem that cause my url to show like this.

      • 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.

  10. 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

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

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

    • 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

  13. 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

  14. 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


  15. 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.

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

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

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

  18. 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

  19. 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.

  20. 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.

    God bless you.


Leave a Comment