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?

Perhaps you would like to follow this tutorial [Zooming a View](http://developer.android.com/training/animation/zoom.html) — michal.z, Dec 03 '14 at 17:06
I have added a shema in imageview but the shema is not clear, i would to when I click on this imageview the shema display in full screen I don't know from where start, excuse my poor English :/ her is a screen shot ==> http://img15.hostingpics.net/pics/805298Capture.jpg — Anass, Dec 03 '14 at 17:13

score 6 · Answer 1 · edited May 30 '18 at 10:43

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;
            }
        }                   
    });
}

I have edited the code to make a zoom in zoom out, hen you click the image. — Jorgesys, Dec 03 '14 at 17:49
@Tony post a question with your problem, I have tested this code by myself and works!. — Jorgesys, Dec 11 '15 at 18:07
have a [look](http://stackoverflow.com/questions/34230107/image-does-not-display-in-full-screen-when-imageview-is-clicked). Thanks — Tony, Dec 11 '15 at 18:24
This makes a good zoom, but lays out to the left upper corner though. — Ali Obeid, Jul 15 '17 at 12:25

score 4 · Answer 2 · edited May 23 '17 at 11:45

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).

score 0 · Answer 3 · edited Jul 04 '18 at 20:36

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'

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

3 Answers3

Linked