How do I import images w/ link from JSON to ViewPager or GridView

See more:

Mobile

Android

Gridview

ListView

, +

Hello code project community!

What I am trying to do is pass 3 image url links that I have in a JSON file in which one of them (first image link):

{
    "titulo": "Verox's 1006",
    "image": "http://wlodsgn.x10host.com/img/vrxjns1006/veroxjeans1006_front.jpg",
    "image2":"http://wlodsgn.x10host.com/img/vrxjns1006/veroxjeans1006_leftside.jpg",
    "image3":"http://wlodsgn.x10host.com/img/vrxjns1006/veroxjeans1006_rightside.jpg",
    "marca": "Verox",
    "color": "Negro",
    "tipo": "Jean",
    "ref": 1006
  },

Is shown in the ListView that uses Google's Volley Library. Here is a screenshot of how my ListView looks like:

http://i.imgur.com/5Sxii7j.png[^]

When I click in one of the products in my ListView, it takes me to another activity which it will show the information of the product and the image from the ListView as shown in this screenshot:

http://i.imgur.com/TdyNQOX.png[^]

Now, what I want to do with the other two image links is create a ViewPager or GridView in which it will show ALL three images and have the ability to zoom in and zoom out. What would be the ideal approach for doing something like that. I have looked all over the internet for a way to do it with Volley Library and no success so far.

Any help would be appreciated

Here is my JeansActivity.java and underneath that code is my JeansDetailActivity.java:

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;

import com.wlodsgn.bunbunup.adapter.CustomListAdapter;
import com.wlodsgn.bunbunup.app.AppController;
import com.wlodsgn.bunbunup.model.Jeans;

import java.util.ArrayList;
import java.util.List;

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

import android.app.ProgressDialog;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;

import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.VolleyLog;
import com.android.volley.toolbox.JsonArrayRequest;

/**
 * Created by WiLo on 2/27/2015.
 */
public class JeansActivity extends ActionBarActivity {

    /**@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_jeans);




    }**/

    // Log tag
    private static final String TAG = JeansActivity.class.getSimpleName();

    // Jeans json url
    private static final String url = "http://xxxxx.xxxx.com/json/jnslst.json";
    private ProgressDialog pDialog;
    private List<Jeans> jeansList = new ArrayList<Jeans>();
    private ListView listView;
    private CustomListAdapter adapter;
    private static String Titulo="titulo";
    private static String Marca="marca";
    private static String Colour="color";
    private static String Tipo="tipo";
    private static String Referencia="ref";
    private static String bitmap="thumbnailUrl";

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

        //Back button
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);

        listView = (ListView) findViewById(R.id.list);
        adapter = new CustomListAdapter(this, jeansList);
        listView.setAdapter(adapter);

        pDialog = new ProgressDialog(this);
        // Showing progress dialog before making http request
        pDialog.setMessage("Loading...");
        pDialog.show();

        // changing action bar color
        getSupportActionBar().setBackgroundDrawable(
                new ColorDrawable(Color.parseColor("#1b1b1b")));

        // Creating volley request obj
        JsonArrayRequest jeansReq = new JsonArrayRequest(url,
                new Response.Listener<JSONArray>() {
                    @Override
                    public void onResponse(JSONArray response) {
                        Log.d(TAG, response.toString());
                        hidePDialog();

                        // Parsing json
                        for (int i = 0; i < response.length(); i++) {
                            try {

                                JSONObject obj = response.getJSONObject(i);
                                Jeans jeans = new Jeans();
                                jeans.setTitulo(obj.getString("titulo"));
                                jeans.setThumbnailUrl(obj.getString("image"));
                                jeans.setMarca(obj.getString("marca"));
                                jeans.setColor(obj.getString("color"));
                                jeans.setTipo(obj.getString("tipo"));
                                jeans.setRef(obj.getInt("ref"));

                                // adding jeans to jeans array
                                jeansList.add(jeans);

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

                        }

                        // notifying list adapter about data changes
                        // so that it renders the list view with updated data
                        adapter.notifyDataSetChanged();
                    }
                }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                VolleyLog.d(TAG, "Error: " + error.getMessage());
                hidePDialog();

            }
        });

        // Adding request to request queue
        /**AppController.getInstance().addToRequestQueue(JeansReq);**/
        AppController.getInstance().addToRequestQueue(jeansReq);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener(){

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                String nombre = ((TextView) view.findViewById(R.id.titulo))
                        .getText().toString();
                String brand = ((TextView) view.findViewById(R.id.marca))
                        .getText().toString();
                String color = ((TextView) view.findViewById(R.id.color))
                        .getText().toString();
                String tipo = ((TextView) view.findViewById(R.id.tipo))
                        .getText().toString();
                String ref = ((TextView) view.findViewById(R.id.ref))
                        .getText().toString();

                bitmap = ((Jeans) jeansList.get(position)).getThumbnailUrl();
                Intent intent = new Intent(JeansActivity.this, JeansDetailsActivity.class);
                intent.putExtra(Titulo, nombre);
                intent.putExtra(Marca, brand);
                intent.putExtra(Colour, color);
                intent.putExtra(Tipo, tipo);
                intent.putExtra(Referencia, ref);
                intent.putExtra("images", bitmap);

                startActivity(intent);
            }
        });

    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        hidePDialog();
    }

    private void hidePDialog() {
        if (pDialog != null) {
            pDialog.dismiss();
            pDialog = null;
        }
    }

    /**@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }**/

}

------------------------------------------------------------

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.TextView;

import com.android.volley.toolbox.NetworkImageView;
import com.android.volley.toolbox.ImageLoader;
import com.wlodsgn.bunbunup.app.AppController;

/**
 * Created by WiLo on 3/4/2015.
 */
public class JeansDetailsActivity extends ActionBarActivity {
    private static String Titulo="titulo";
    private static String Marca="marca";
    private static String Colour="color";
    private static String Tipo="tipo";
    private static String Referencia="ref";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_jeansdetails);
        /**getSupportActionBar().hide();**/

        //Back button
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);

        Intent i=getIntent();
        String titulo = i.getStringExtra(Titulo);
        TextView titleName = (TextView) findViewById(R.id.titulo);
        titleName.setText(titulo);

        String marca = i.getStringExtra(Marca);
        TextView marcaName = (TextView) findViewById(R.id.marca);
        marcaName.setText(marca);

        String color = i.getStringExtra(Colour);
        TextView colorName = (TextView) findViewById(R.id.color);
        colorName.setText(color);

        String tipo = i.getStringExtra(Tipo);
        TextView tipoName = (TextView) findViewById(R.id.tipo);
        tipoName.setText(tipo);

        String ref = i.getStringExtra(Referencia);
        TextView refName = (TextView) findViewById(R.id.ref);
        refName.setText(ref);

        ImageLoader imageLoader = AppController.getInstance().getImageLoader();
        String bitmap = i.getStringExtra("images");
        NetworkImageView thumbNail = (NetworkImageView) findViewById(R.id.thumbnail);
        thumbNail.setImageUrl(bitmap, imageLoader);

    }


    public void onClickHandler(View v){
        switch(v.getId()){
            case R.id.thumbnail:
                startActivity(new Intent(this,JeansActivity.class));
        }

    }
}