Loading images from server in to Android Grid view

In this tutorial, we will be looking at how to load images from server in to android grid view. Once you complete this tutorial, your application will look like this.

Screenshot_2016-06-02-23-44-47

Lets call this application as a Movie Database. This will display list of movies and the name in a grid view.

 

1 . Creating Database

First of all lets create a database content_db. Create a new file named content_db.sql and copy and paste the below code and save it.

Now import the this file in to the database you have created.

2. Creating an API

Now you have the database ready, lets create an API to get all movies using PHP.

Copy the below code and save it in to file named content_db_getAllMovies.php in localhost location ( in my case its /var/www/html/). you can save it in your localhost location.

Make sure to change your database configuration as  per your database credentials, In the above file.

3. Creating an Android application

Now lets create a new android application called MovieDatabase, when you create an new application  in android studio it  will automatically create a new activity called MainActivity. You can  change it to anything you want, but i recommend to leave it as it is for this tutorial.

4. Creating Styles and Drawable

Copy and paste the below code inside /res/values/colors.xml file.

save and close it.

Now create a new file called grid_color_selector.xml inside /res/drawable/ folder and then copy and paste the below code.

save and close it.

5. Creating Layout files

Now create a new file called grid_item_layout.xml in your /res/layout/ folder and copy and paste the below code.

save and close it.

Now open your activity_main.xml which is located in /res/layout/  folder. open the file and copy and paste the below code.

Save and close it.

6. Java classes

create a new java file named GridViewAdapter.java inside your package and copy and paste the below code. make sure to change your package name.

save and close it.

Now create another new file called GridItem.java inside your package and then copy and paste the below code.

save and close it.

Now open you MainActivity.java class and make sure it looks like the below code.

save and close it.

7. Create a second activity

Now we need to create a new activity to be viewed when ever the movie is clicked. So lets create a new activity called DetailsActivity using your android studio.

8. Modify Manifest file.

This application need a internet connection to get data from the server, therefore it is necessary to add that permission to the manifest file. As shown in the below code.

9. Gradle Build

It is important to tell the gradle how to build the application. Note this application is using HttpClient package which is no more supported in android studio. Therefore its is very important how you set the build.gradle file.

Make sure your build.gradle file looks exactly as shown in the below code snippet.

make sure to set your applicationId. That’s it. compile the application and run it on your device or emulator. It should work fine.

10. Happy coding.

Feel free to tell me your comments and feedback’s below in the comments section. Thank you. 🙂

I am a Software Engineer.

Leave a Reply

*

4 comments

  1. kumar

    Thank you very much. It was really helpful.

  2. Rahul Sharma

    hello Sathyabaman’sBlog

    can you show me . when click any images show next activity for related detail .
    All details fetch api.
    thanks for this code

    Thanks

    • sathyabaman

      Hi Rahul Sharma,

      Its very simple therefore i am not gone write an article for that. There lot of online resources available for that, But i will give you some suggestion so that you can get the idea of how it works.

      Frist you need to extent your view holder class and implement onclick like this

      class View_Holder extends RecyclerView.ViewHolder implements View.OnClickListener

      Then in your view holder class just override the onclick and set the intent, as shown below

      @Override
      public void onClick(View v) {
      final Intent intent;
      intent = new Intent(context, DestinationClass.class);
      context.startActivity(intent);
      }

      That’s it. It will work fine

Next ArticleList of countries in the world - Raw Data