Click on Image and Open Zoomed Layout with actions like Instagram

Question

I'm trying to implement long press image preview like in Instagram.

My application is having a catalog which contains images where when I click on any image, its preview should appear and close after releasing like in Instagram while checking grid for posts (You can have a zoomed Item Layout with Comment and Heart Option).

Check Image 1 : That will be the list.

Check Image 2 : That is what I want on clicking list item.

I tried achieving the same by Enlarge a view using a zoom animation but it applies good on Image not the whole Item Layout.

Answer 1

public void show(Context context, ImageView source) {
        BitmapDrawable background = ImagePreviewerUtils.getBlurredScreenDrawable(context, source.getRootView());

        View dialogView = LayoutInflater.from(context).inflate(R.layout.view_image_previewer, null);
        ImageView imageView = (ImageView) dialogView.findViewById(R.id.previewer_image);

        Drawable copy = source.getDrawable().getConstantState().newDrawable();
        imageView.setImageDrawable(copy);

        final Dialog dialog = new Dialog(context, R.style.ImagePreviewerTheme);
        dialog.getWindow().setBackgroundDrawable(background);
        dialog.setContentView(dialogView);//You can set your custem view here
        dialog.show();

        source.setOnTouchListener(new View.OnTouchListener() {
            @Override public boolean onTouch(View v, MotionEvent event) {
                if (dialog.isShowing()) {
                    v.getParent().requestDisallowInterceptTouchEvent(true);
                    int action = event.getActionMasked();
                    if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL) {
                        v.getParent().requestDisallowInterceptTouchEvent(false);
                        dialog.dismiss();
                        return true;
                    }
                }
                return false;
            }
        });
    }

Note: Modify dialog contentview (layout) as per your need

Use this zoom layout with transparent dialog theme Zoom Layout