How can I click a picture and make it expand to full screen like in WhatsApp messages?

Question

If you click a picture message in WhatsApp it will expand and take up the full screen. I haven't been able to figure out how to do this and have so far been relying on opening an Dialog that takes up the full screen to show the image. It's just not as slick though as the picture expanding to take up the full screen as in WhatsApp.

Here's the code I have so far for the AlertDialog.

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Item item1 = new Item("Message 1");
        Item item2 = new Item("Message 2");
        Item item3 = new Item("Message 3");
        Item item4 = new Item("Message 4");
        ArrayList<Item> itemsArrayList = new ArrayList<>(); // calls function to get items list
        itemsArrayList.add(item1);
        itemsArrayList.add(item2);
        itemsArrayList.add(item3);
        itemsArrayList.add(item4);

        CustomAdapter adapter = new CustomAdapter(this, itemsArrayList);

        final ListView lv  = (ListView) findViewById(R.id.listView);
        lv.setAdapter(adapter);
    }
}

CustomAdapter.java

import android.app.Dialog;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;

class CustomAdapter extends BaseAdapter {
    private Context context;
    private ArrayList<Item> items;

    public CustomAdapter(Context context, ArrayList<Item> items) {
        this.context = context;
        this.items = items;
    }

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

    @Override
    public Object getItem(int position) {
        return items.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (convertView == null) {
            convertView = LayoutInflater.from(context).
                    inflate(R.layout.list_view_row, parent, false);
        }

        Item currentItem = (Item) getItem(position);

        TextView textViewItemName = (TextView)
                convertView.findViewById(R.id.textView1);
        final ImageView imageView = (ImageView) convertView.findViewById(R.id.imageView1);

        textViewItemName.setText(currentItem.getText());

        if (position == 0) {
            imageView.setImageResource(R.drawable.a);
        } else{
            imageView.setImageResource(R.drawable.anime);
        }


        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Dialog mSplashDialog = new Dialog(CustomAdapter.this.context);
                mSplashDialog.setContentView(R.layout.zoom_layout);
                ImageView imageView = (ImageView) mSplashDialog.findViewById(R.id.imageViewZoom);
                imageView.setImageDrawable(imageView.getDrawable());

                mSplashDialog.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
                mSplashDialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT);
                mSplashDialog.show();
            }
        });
        return convertView;
    }
}

Could anyone point me to resources on how to do this or provide some sample code to get me started?

I've tried implementing the solution here How to Zoom in/Out an ImageView(not using Canvas) in android but the ImageView is already zoomed and doesn't respond to clicks. Also, my default image size is larger than the screen so it's being cut off.

Answer 1

You can use PhotoView library for zooming in/out:

1) Add below to your module gradle:

compile 'com.commit451:PhotoView:1.2.4'

2)

PhotoViewAttacher photoAttacher;
photoAttacher = new PhotoViewAttacher(My_Image);
photoAttacher.update();

If you need to zoom full screen then you can use:

explanation: setScaleType attribute can be used to resize the image to match the size of the ImageView.

myImageView = (ImageView) findViewById(R.id.my_img);

        myImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if(isImageFullScreen) {
                    isImageFullScreen=false;
                    myImageView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
                    myImageView.setAdjustViewBounds(true);
                }else{
                    isImageFullScreen=true;
                    myImageView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
                    myImageView.setScaleType(ImageView.ScaleType.FIT_XY);
                }
            }
        });

Answer 2

I think you could have an activity for the full screen image, and code a transition animation so you get the desired effect. Check out this link as it might be of help. Android - How to create a transition from an item in listview to a whole activity?