How to display an image in full screen on click in the ImageView?

Question

I need to open an image in full screen upon click in the ImageView, like a gallery with one image! How would I do that?

Answer 1

this is a basic example:

the layout activity_main.xml

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/ic_launcher"/>

    </LinearLayout>

onCreate() method:

private boolean zoomOut =  false;

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

    final ImageView imageView  = (ImageView)findViewById(R.id.imageView1);
    imageView .setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            if(zoomOut) {
                Toast.makeText(getApplicationContext(), "NORMAL SIZE!", Toast.LENGTH_LONG).show();
                imageView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
                imageView.setAdjustViewBounds(true);
                zoomOut =false;
            }else{
                Toast.makeText(getApplicationContext(), "FULLSCREEN!", Toast.LENGTH_LONG).show();
                imageView.setLayoutParams(new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                zoomOut = true;
            }
        }                   
    });
}

Answer 2

Jorgesys's answer is good, but to make the image really full screen, a better way would be to make a new dialog/activity with .NoActionBar.Fullscreen theme. For example,

<style name="FullScreenDialogTheme" parent="android:Theme.Material.NoActionBar.Fullscreen"/>

This new dialog would contain just an image view for your image.

Then you would pass the drawable, or a reference to drawable from your activity to this new one via an intent. Check this question for more details on that. (I would suggest passing via some reference, for efficiency concerns).

Answer 3

Try this code..

imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        imageView.setVisibility(View.GONE);
        imageView2.setVisibility(View.VISIBLE);
        Glide.with(this).load(imagePath).into(imageView2);

    }
});

xml code..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/ic_launcher"
        />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher"
        android:visibility="gone"
        />
</LinearLayout>

and also used glide then add below dependecy into app level gradle file.

implementation 'com.github.bumptech.glide:glide:4.7.1'