How to show imageView full screen on imageView click?

Question

I am getting images from url and showing it on the imageView. This functionality is working properly. But I want that when I click on that image, then it must be full screen. So how to achieve this functionality? I know I am missing something. Please help me. Screenshot is attached. I want the same functionality in my app also.

Before clicking After clicking

Here is my code, which I am trying on Image click:

    @Override
    public void onClick(View v) {
        if (isTouch1) {
            horizontalScrollView.setVisibility(View.GONE);
            isTouch1 = false;
            // mSystemUiHider.toggle();
            setTheme(R.style.FullscreenTheme);
            Log.d("Here isTouch is true", ">");
            // ChangeThemeUtils.changeToTheme(FullScreenImageAdapter.this, ChangeThemeUtils.THEME_HIDE_ALL_WINDOW);
            getSupportActionBar().hide();

        } else {
            isTouch1 = true;
            horizontalScrollView.setVisibility(View.VISIBLE);
            getSupportActionBar().show();
            setTheme(R.style.ExampleTheme);
            //mSystemUiHider.show();
            Log.d("Here isTouch is false", ">");    
        }
    }

do u have solution for this? i am looking for this as well http://stackoverflow.com/questions/29197025/android-view-single-picture-like-photo-gallery — NaiveBz, Mar 23 '15 at 02:44

Haresh Chhelana · Answer 1 · 2017-11-10T05:33:12.033

You can use ImageView below two properties to show image based on your requirement :

android:adjustViewBounds : Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.

android:scaleType :Controls how the image should be resized or moved to match the size of this ImageView

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

Above two properties can be use either xml or java code.

As you need to decide at run time need to show image into full screen or not so will apply above two properties at java code as below :

public class MainActivity extends Activity {

    ImageView imageView;

    boolean isImageFitToScreen;

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

        imageView = (ImageView) findViewById(R.id.imageView);

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

    }
}

How can I use the same for imageview in RecyclerView Adapter ? — , Nov 08 '17 at 08:39
@shwetaporwal you need to change image property as scale type or adjust view bound on bindViewHolder method. — Haresh Chhelana, Nov 10 '17 at 05:13
@HareshChhelana but if I am using ConstraintLayout? and I want to scale image for 200x150 on false? — vladimir, Dec 18 '17 at 20:51

score 25 · Answer 2 · answered Mar 09 '16 at 08:00

Use Immersive Full-Screen Mode

call fullScreen() on ImageView click.

 public void fullScreen() {

        // BEGIN_INCLUDE (get_current_ui_flags)
        // The UI options currently enabled are represented by a bitfield.
        // getSystemUiVisibility() gives us that bitfield.
        int uiOptions = getWindow().getDecorView().getSystemUiVisibility();
        int newUiOptions = uiOptions;
        // END_INCLUDE (get_current_ui_flags)
        // BEGIN_INCLUDE (toggle_ui_flags)
        boolean isImmersiveModeEnabled =
                ((uiOptions | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY) == uiOptions);
        if (isImmersiveModeEnabled) {
            Log.i(TAG, "Turning immersive mode mode off. ");
        } else {
            Log.i(TAG, "Turning immersive mode mode on.");
        }

        // Navigation bar hiding:  Backwards compatible to ICS.
        if (Build.VERSION.SDK_INT >= 14) {
            newUiOptions ^= View.SYSTEM_UI_FLAG_HIDE_NAVIGATION;
        }

        // Status bar hiding: Backwards compatible to Jellybean
        if (Build.VERSION.SDK_INT >= 16) {
            newUiOptions ^= View.SYSTEM_UI_FLAG_FULLSCREEN;
        }

        // Immersive mode: Backward compatible to KitKat.
        // Note that this flag doesn't do anything by itself, it only augments the behavior
        // of HIDE_NAVIGATION and FLAG_FULLSCREEN.  For the purposes of this sample
        // all three flags are being toggled together.
        // Note that there are two immersive mode UI flags, one of which is referred to as "sticky".
        // Sticky immersive mode differs in that it makes the navigation and status bars
        // semi-transparent, and the UI flag does not get cleared when the user interacts with
        // the screen.
        if (Build.VERSION.SDK_INT >= 18) {
            newUiOptions ^= View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY;
        }

        getWindow().getDecorView().setSystemUiVisibility(newUiOptions);
        //END_INCLUDE (set_ui_flags)
    }

Example Download

You should use android:scaleType="fitCenter" – Gilbert May 05 '20 at 07:53 — Gilbert, May 05 '20 at 07:53

score 16 · Answer 3 · answered Jun 28 '14 at 05:05

use following property of ImageView for full size of image

 android:scaleType="fitXY"

ex :

      <ImageView
        android:id="@+id/tVHeader2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"
        android:gravity="center"
        android:src="@drawable/done_sunheading" />

1)Switch on other activity when click on image.

2)pass url in intent

3)Take imageview on that Activity and set above property of imageview

4)Get the url from intent and set that image.

but using this your image may be starched if it will of small size.

You should use android:scaleType="fitCenter" – Gilbert May 05 '20 at 07:52 — Gilbert, May 05 '20 at 07:52

score 15 · Answer 4 · answered Feb 13 '15 at 10:09

That didn't work for me, I used some code parts from web, what I did:

new activity: FullScreenImage with:

package yourpackagename;
import yourpackagename.R;


import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class FullScreenImage  extends Activity {


@SuppressLint("NewApi")



@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setContentView(R.layout.layout_full);

    Bundle extras = getIntent().getExtras();
    Bitmap bmp = (Bitmap) extras.getParcelable("imagebitmap");

    ImageView imgDisplay;
    Button btnClose;


    imgDisplay = (ImageView) findViewById(R.id.imgDisplay);
    btnClose = (Button) findViewById(R.id.btnClose);


   btnClose.setOnClickListener(new View.OnClickListener() {            
    public void onClick(View v) {
    FullScreenImage.this.finish();
}
});


 imgDisplay.setImageBitmap(bmp );

}   


}

Then create a xml: layout_full

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView
    android:id="@+id/imgDisplay"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scaleType="fitCenter" />

<Button
    android:id="@+id/btnClose"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginRight="15dp"
    android:layout_marginTop="15dp"
    android:paddingTop="2dp"
    android:paddingBottom="2dp"
    android:textColor="#ffffff"
    android:text="Close" />

   </RelativeLayout>

And finally, send the image name from your mainactivity

   final ImageView im = (ImageView)findViewById(R.id.imageView1) ; 
   im.setBackgroundDrawable(getResources().getDrawable(id1));

   im.setOnClickListener(new OnClickListener() {

      @Override
       public void onClick(View view) {
       Intent intent = new Intent(NAMEOFYOURCURRENTACTIVITY.this, FullScreenImage.class);

       im.buildDrawingCache();
       Bitmap image= im.getDrawingCache();

       Bundle extras = new Bundle();
       extras.putParcelable("imagebitmap", image);
       intent.putExtras(extras);
       startActivity(intent);

                                }
                            });

score 4 · Answer 5 · edited Mar 18 '18 at 16:48

4

Use this property for an Image view such as,

1) android:scaleType="fitXY" - It means the Images will be stretched to fit all the sides of the parent that is based on your ImageView!

2) By using above property, it will affect your Image resolution so if you want to maintain the resolution then add a property such as android:scaleType="centerInside".

edited Mar 18 '18 at 16:48

halfer

19,824
17
99
186

answered Jun 28 '14 at 05:10

Achiever

1,626
10
30
54

score 4 · Answer 6 · answered Nov 01 '19 at 12:25

It's easy to achieve this is to just use an Intent like this: (I put the method in a custom class that takes in an Activity as a parameter so it can be called from any Fragment or Activity)

    public class UIutils {

private Activity mActivity;

    public UIutils(Activity activity){
        mActivity = activity;
    }

public void showPhoto(Uri photoUri){
        Intent intent = new Intent();
        intent.setAction(Intent.ACTION_VIEW);
        intent.setDataAndType(photoUri, "image/*");
        mActivity.startActivity(intent);
    }
}

Then to use it just do this:

imageView.setOnClickListener(v1 -> new UIutils(getActivity()).showPhoto(Uri.parse(imageURI)));

I use this with an Image URL but it can be used with stored files as well. If you are accessing images form the phones memory you should use a content provider.

Rajaji subramanian · Answer 7 · 2014-06-28T05:53:50.003

1

public class MainActivity extends Activity {

ImageView imgV;

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

    imgV= (ImageView) findViewById("your Image View Id");

    imgV.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
                imgV.setScaleType(ScaleType.FIT_XY);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getSupportActionBar().hide();
            }
        }
    });

}
}

edited Jun 28 '14 at 05:53

answered Jun 28 '14 at 05:19

Rajaji subramanian

288
2
12

let me try this answer. – Amit Jayaswal Jun 28 '14 at 05:20
yeah try this it will help you – Rajaji subramanian Jun 28 '14 at 05:22
No it doesn't help me. You didn't understand my problem. See the screen shot. I want to hide Red Rectangle on Image click. Means I want to hide upper bar and lower buttons. Your answer is not doing this – Amit Jayaswal Jun 28 '14 at 05:25
ok let me clear onething the image fit to screen but the red rectangle only showing after put my code wright? – Rajaji subramanian Jun 28 '14 at 05:38
Actually I want to hide the items which are in Red Rectangle. By default they are showing. – Amit Jayaswal Jun 28 '14 at 05:44
@ Amit Jayaswal see my edited answer it will help you to hide the status bar and action bar – Rajaji subramanian Jun 28 '14 at 05:54
sorry friend it worked me so that's why i post this code, when i clicked the image view the settled fit to screen and the status bar gets disappeared – Rajaji subramanian Jun 28 '14 at 06:15
get id of the horizontal scroll view like, in oncreate, horizontalscrollview hv=new horizontalscrollview(this); in the button click add hv.removeView(); – Rajaji subramanian Jun 28 '14 at 06:40
No actually Ii is working ok, but when I am clicking first time control is going in the OnClick(), and horizontalScrollView is hiding also, but when I am clicking secon time then control is not going into OnClick(). and when I am clicking third time then control is again going into OnClick(). So the issue is that it is showing the ScrollView on Third clik, not on the second click. – Amit Jayaswal Jun 28 '14 at 06:55
ok you acheived your goal or not friend if my anser anything is helpfull for you upvote for me friend – Rajaji subramanian Jun 28 '14 at 07:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56453/discussion-between-amit-jayaswal-and-rajaji-subramanian). – Amit Jayaswal Jun 28 '14 at 07:02
How could i can try this in RecyclerView.Adapter class? – Nov 08 '17 at 08:33

score 1 · Accepted Answer · edited Aug 21 '18 at 00:47

Yes I got the trick.

public void onClick(View v) {

            if( Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH ){
                imgDisplay.setSystemUiVisibility( View.SYSTEM_UI_FLAG_HIDE_NAVIGATION );

            }
            else if( Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB )
                imgDisplay.setSystemUiVisibility( View.STATUS_BAR_HIDDEN );
            else{}

    }

But it didn't solve my problem completely. I want to hide the horizontal scrollview too, which is in front of the imageView (below), which can't be hidden in this.

it only hide the bar no change in Image size – Md Imran Choudhury Apr 01 '16 at 16:14 — Md Imran Choudhury, Apr 01 '16 at 16:14

score 0 · Answer 9 · answered Jul 16 '18 at 08:02

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#000"
android:gravity="center"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">  
<ImageView
    android:scaleType="fitXY"
    android:layout_marginTop="5dp"
    android:layout_marginBottom="60dp"
    android:src="@drawable/lwt_placeholder"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:visibility="visible"
    android:id="@+id/imageView"
    android:layout_centerInParent="true"/></RelativeLayout>

and in activity

 final ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);          

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

        Picasso.with(ImageGallery.this).load(imageUrl).placeholder(R.drawable.lwt_placeholder)
                .into(imageView);

Thats it!

score 0 · Answer 10 · answered Mar 15 '19 at 11:08

Actually there are three ways to enable full screnn, visit : https://developer.android.com/training/system-ui/immersive

but if you wanna get full screen when the activity is opened, just put this code in your_activity.java

@Override
public void onWindowFocusChanged(boolean hasFocus) {
    super.onWindowFocusChanged(hasFocus);
    if (hasFocus) {
        hideSystemUI();
    }
}

private void hideSystemUI() {
    // Enables regular immersive mode.
    // For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
    // Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
    View decorView = getWindow().getDecorView();
    decorView.setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_IMMERSIVE
            // Set the content to appear under the system bars so that the
            // content doesn't resize when the system bars hide and show.
            | View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
            // Hide the nav bar and status bar
            | View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_FULLSCREEN);
}

// Shows the system bars by removing all the flags
// except for the ones that make the content appear under the system bars.
private void showSystemUI() {
    View decorView = getWindow().getDecorView();
    decorView.setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
            | View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}

How to show imageView full screen on imageView click?

10 Answers10

Linked