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 …

android custom gridview

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.

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

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 MainActivity.java 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 CustomVolleyRequest.java and write the following code.

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

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

  • Now at last just call the method getData() inside onCreate().
  • So the final code for MainActivity.java 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.

[wp_ad_camp_1]

[sociallocker id=1372] Android Custom GridView Example [/sociallocker]

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 🙂

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x