Fetch and Display Multiple Images using Glide

STEPS TO USE GLIDE:-

Example url:- http://themarshmallowz.890m.com/getuploadedimage.php

This is the Sample JSON having image url' s that we need to parse.

{
"result": [
{
"id": "1",
"url": "http:\/\/themarshmallowz.890m.com\/images\/cupcake.jpg"
},
{
"id": "2",
"url": "http:\/\/themarshmallowz.890m.com\/images\/donut.jpg"
},
{
"id": "4",
"url": "http:\/\/themarshmallowz.890m.com\/images\/eclair.jpg"
},
{
"id": "5",
"url": "http:\/\/themarshmallowz.890m.com\/images\/froyo.jpg"
},
{
"id": "6",
"url": "http:\/\/themarshmallowz.890m.com\/images\/gingerbread.jpg"
},
{
"id": "7",
"url": "http:\/\/themarshmallowz.890m.com\/images\/honeycomb.jpg"
},
{
"id": "8",
"url": "http:\/\/themarshmallowz.890m.com\/images\/icecream.jpg"
},
{
"id": "9",
"url": "http:\/\/themarshmallowz.890m.com\/images\/jellybean.jpg"
},
{
"id": "10",
"url": "http:\/\/themarshmallowz.890m.com\/images\/kitkat.jpg"
},
{
"id": "11",
"url": "http:\/\/themarshmallowz.890m.com\/images\/lollipop.jpg"
},
{
"id": "12",
"url": "http:\/\/themarshmallowz.890m.com\/images\/marshmsllowz.jpg"
},
{
"id": "13",
"url": "http:\/\/themarshmallowz.890m.com\/images\/nougat.jpg"
},
{
"id": "14",
"url": "http:\/\/themarshmallowz.890m.com\/images\/o.png"
}
]
}

Add glide and retrofit dependency in your build.gradle.

dependencies {
compile 'com.github.bumptech.glide:glide:3.7.0'
compile 'com.squareup.retrofit:retrofit:1.9.0'
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
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="eazy.glideexample.MainActivity">

    <GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="2"
android:layout_centerInParent="true"
android:id="@+id/gridview"></GridView>
</RelativeLayout>

Give internet permmission in the manifest

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

Create an interface where we need to pass the second part of the url.

MyConnection.java

package eazy.glideexample;

import retrofit.Callback;
import retrofit.client.Response;
import retrofit.http.GET;

/**
* Created by Administrator on 12-06-2017.
*/

public interface MyConnection {

@GET("/getuploadedimage.php")
public void getImagefromserver(Callback<Response> responseCallback);
}

Create an CustomAdapter  class for GridView.

package eazy.glideexample;

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 com.bumptech.glide.Glide;

import java.util.ArrayList;

/**
* Created by Administrator on 12-06-2017.
*/

public class MyAdapter extends BaseAdapter {
Context context;
ArrayList arrayList;

public MyAdapter(Context context, ArrayList arrayList) {
this.context = context;
this.arrayList = arrayList;
}

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

@Override
public Object getItem(int i) {
return arrayList.get(i);
}

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

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
ImageView imageView=new ImageView(context);

imageView.setLayoutParams(new GridView.LayoutParams(250, 250));


Glide.with(imageView.getContext())
.load(""+arrayList.get(i))

.placeholder(R.mipmap.ic_launcher).into(imageView);



return imageView;
}
}

 

MainActivity.java

package eazy.glideexample;

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

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

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.ArrayList;

import retrofit.Callback;
import retrofit.RestAdapter;
import retrofit.RetrofitError;
import retrofit.client.Response;

public class MainActivity extends AppCompatActivity {


ArrayList arrayList=new ArrayList();
GridView gridview;

StringBuilder stringBuilder=new StringBuilder();


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridview= (GridView) findViewById(R.id.gridview);



RestAdapter restAdapter=new RestAdapter.Builder().setEndpoint("http://themarshmallowz.890m.com/").build();
MyConnection myConnection=restAdapter.create(MyConnection.class);

myConnection.getImagefromserver(new Callback<Response>() {
@Override
public void success(Response response, Response response2) {
try {
BufferedReader bufferedReader=new BufferedReader(new InputStreamReader(response.getBody().in()));
String line;
while ((line=bufferedReader.readLine())!=null){
stringBuilder.append(line);

}

JSONObject jsonObject=new JSONObject(""+stringBuilder);
JSONArray jsonArray=jsonObject.getJSONArray("result");
for (int i=0;i<jsonArray.length();i++)
{

JSONObject childobj=jsonArray.getJSONObject(i);
String url=childobj.getString("url");

arrayList.add(url);

}

MyAdapter myadapter=new MyAdapter(MainActivity.this,arrayList);
gridview.setAdapter(myadapter);







} catch (IOException e) {
e.printStackTrace();
} catch (JSONException e) {
e.printStackTrace();
}


}

@Override
public void failure(RetrofitError error) {

}
});



}
}

 

Output:-

IF YOU HAVE ANY SUGGESTIONS OR ANY ERRORS WHILE IMPLEMENTING , FEEL FREE TO COMMENT BELOW.