Gridview - Click image to view image in Viewpager

Question

This is a gridview that get image from json. and it works fine. I want to click image in this gridview to show full image and can slide it. I find the solution of this problem is used Viewpager.

how can I click image in gridview to show image and can slid?

you can read this code more easier. http://pastebin.com/Q8Ljt9yL

public class MainActivity extends Activity {

public static final int DIALOG_DOWNLOAD_JSON_PROGRESS = 0;
private ProgressDialog mProgressDialog;
ArrayList<HashMap<String, Object>> MyArrList;

@SuppressLint("NewApi")
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Permission StrictMode
    if (android.os.Build.VERSION.SDK_INT > 9) {
        StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
        StrictMode.setThreadPolicy(policy);
    }
    // Download JSON File
    new DownloadJSONFileAsync().execute();
} 

@Override
protected Dialog onCreateDialog(int id) {
    switch (id) {
    case DIALOG_DOWNLOAD_JSON_PROGRESS:
        mProgressDialog = new ProgressDialog(this);
        mProgressDialog.setMessage("Downloading.....");
        mProgressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        mProgressDialog.setCancelable(true);
        mProgressDialog.show();
        return mProgressDialog;
    default:
        return null;
    }
}

public void ShowAllContent() {
    final GridView gridView1 = (GridView) findViewById(R.id.gridView1);
    gridView1.setAdapter(new ImageAdapter(MainActivity.this, MyArrList));
    gridView1.setOnItemClickListener(new OnItemClickListener() {

        @Override
        public void onItemClick(AdapterView<?> parent, View v, int position, long id) {

            Toast.makeText(getApplicationContext(), "this is", Toast.LENGTH_SHORT).show();
        }
    });
}

public class ImageAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<HashMap<String, Object>> MyArr = new ArrayList<HashMap<String, Object>>();

    public ImageAdapter(Context c, ArrayList<HashMap<String, Object>> myArrList) {
        context = c;
        MyArr = myArrList;
    }

    public int getCount() {
        return MyArr.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }

    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        View myView = convertView;
        viewHolder = new ViewHolder();
        if (convertView == null) {
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            myView = inflater.inflate(R.layout.activity_column, null);

            viewHolder.imageView = (ImageView) myView.findViewById(R.id.ColImgPath);
            viewHolder.imageView.getLayoutParams().height = 120;
            viewHolder.imageView.getLayoutParams().width = 120;
            viewHolder.imageView.setPadding(5, 5, 5, 5);
            viewHolder.imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            try {
                viewHolder.imageView.setImageBitmap((Bitmap) MyArr.get(position).get("ImageThumBitmap"));
            } catch (Exception e) {
                viewHolder.imageView.setImageResource(android.R.drawable.ic_menu_report_image);
            }
        }
        return myView;
    }
}

private static class ViewHolder {
    public ImageView imageView;
}

// Download JSON in Background
public class DownloadJSONFileAsync extends AsyncTask<String, Void, Void> {

    protected void onPreExecute() {
        super.onPreExecute();
        showDialog(DIALOG_DOWNLOAD_JSON_PROGRESS);
    }

    @Override
    protected Void doInBackground(String... params) {

        String url = "http://192.168.10.101/adchara1/";
        JSONArray data;
        try {
            data = new JSONArray(getJSONUrl(url));
            MyArrList = new ArrayList<HashMap<String, Object>>();
            HashMap<String, Object> map;

            for (int i = 0; i < data.length(); i++) {
                JSONObject c = data.getJSONObject(i);
                map = new HashMap<String, Object>();

                map.put("photo", (String) c.getString("photo"));
                map.put("ImageThumBitmap",(Bitmap) loadBitmap(c.getString("photo")));

                // Full (for View Popup)
                map.put("frame", (String) c.getString("frame"));

                MyArrList.add(map);
            }

        } catch (JSONException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        return null;
    }

    protected void onPostExecute(Void unused) {
        ShowAllContent(); // When Finish Show Content
        dismissDialog(DIALOG_DOWNLOAD_JSON_PROGRESS);
        removeDialog(DIALOG_DOWNLOAD_JSON_PROGRESS);
    }
}

/*** Get JSON Code from URL ***/
public String getJSONUrl(String url) {
    StringBuilder str = new StringBuilder();
    HttpClient client = new DefaultHttpClient();
    HttpGet httpGet = new HttpGet(url);
    try {
        HttpResponse response = client.execute(httpGet);
        StatusLine statusLine = response.getStatusLine();
        int statusCode = statusLine.getStatusCode();
        if (statusCode == 200) { // Download OK
            HttpEntity entity = response.getEntity();
            InputStream content = entity.getContent();
            BufferedReader reader = new BufferedReader(new InputStreamReader(content));
            String line;
            while ((line = reader.readLine()) != null) {
                str.append(line);
            }
        } else {
            Log.e("Log", "Failed to download file..");
        }
    } catch (ClientProtocolException e) {
        e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
    }
    return str.toString();
}

/***** Get Image Resource from URL (Start) *****/
private static final String TAG = "Image";
private static final int IO_BUFFER_SIZE = 4 * 1024;

public static Bitmap loadBitmap(String url) {
    Bitmap bitmap = null;
    InputStream in = null;
    BufferedOutputStream out = null;

    try {
        in = new BufferedInputStream(new URL(url).openStream(),IO_BUFFER_SIZE);

        final ByteArrayOutputStream dataStream = new ByteArrayOutputStream();
        out = new BufferedOutputStream(dataStream, IO_BUFFER_SIZE);
        copy(in, out);
        out.flush();

        final byte[] data = dataStream.toByteArray();
        BitmapFactory.Options options = new BitmapFactory.Options();
        // options.inSampleSize = 1;

        bitmap = BitmapFactory.decodeByteArray(data, 0, data.length,options);
    } catch (IOException e) {
        Log.e(TAG, "Could not load Bitmap from: " + url);
    } finally {
        closeStream(in);
        closeStream(out);
    }
    return bitmap;
}

private static void closeStream(Closeable stream) {
    if (stream != null) {
        try {
            stream.close();
        } catch (IOException e) {
            android.util.Log.e(TAG, "Could not close stream", e);
        }
    }
}

private static void copy(InputStream in, OutputStream out)
        throws IOException {
    byte[] b = new byte[IO_BUFFER_SIZE];
    int read;
    while ((read = in.read(b)) != -1) {
        out.write(b, 0, read);
    }
}
}

Solution 1

its same as you need. just click event of grid view and get image in next screen using view pager.

Click event of grid view images:

GridView gridView = (GridView) findViewById(R.id.gridview);
        gridView.setAdapter(new ImageAdapter());
        gridView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) 
         {
          HashMap<String, Object> selected = (HashMap<String, Object>)  

          gridView.getItemAtPosition(position);

            }
        });

Solution 2

First of all you have to implement ImageAdapter class' method getItem(int position) to return the item at "position" in MyArr. Next, in click listener, you can do something like

HashMap<String, Object> selected = (HashMap<String, Object>) gridView.getItemAtPosition(position);

With selected you have your bitmap.

Solution 3

See this class you can find

GridView gridView = (GridView) findViewById(R.id.gridview);
        gridView.setAdapter(new ImageAdapter());
        gridView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                    int position, long id) {
                startImageGalleryActivity(position);
            }
        });

Here you will get same output what you wants.

You can also download complete source code here