Android image full screen viewer

Question

I'm new to android.What is the easiest way to pop an imageview to full screen (with pinch zoom enabled),when it is tapped, just like whatsapp images? I'm loading my images in a recycler view via Glide. Thank you for your time and reply.

You can use `ViewPager` to slide the image when get fullscreen and make your class to override the touch listener for `Pinch`. Please see also this link [https://www.androidhive.info/2013/09/android-fullscreen-image-slider-with-swipe-and-pinch-zoom-gestures/](https://www.androidhive.info/2013/09/android-fullscreen-image-slider-with-swipe-and-pinch-zoom-gestures/) — Abhinav Suman, Nov 25 '17 at 05:03

score 12 · Accepted Answer · answered Jul 17 '18 at 20:28

I used PhotoView (https://github.com/chrisbanes/PhotoView) and Glide (https://github.com/bumptech/glide).

I created full screen activity first and put PhotoView in layout.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context=".PhotoviewerActivity">

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/fullscreen_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

</FrameLayout>

Then, I pass image URL that I want to show to the full screen activity and load image with Glide like below.

val imageUrl = intent.getStringExtra(IMAGE_URL)
Glide.with(applicationContext).load(imageUrl).into(fullscreen_content)

You can remove all not needed code from full screen layout and also disable from full screen activity code. These codes are written in Kotlin.

Alexander Krol · Answer 2 · 2018-12-19T11:00:01.987

There is a library called StfalconImageViewer. It supports transition animation for image opening and closing, pinch-to-zoom and swipe-to-dismiss gestures out of the box. Using Glide it'll be done like this:

new StfalconImageViewer.Builder<>(context, images, new ImageLoader<String>() {
            @Override
            public void loadImage(ImageView imageView, String imageUrl) {
                Glide.with(context).load(imageUrl).into(imageView)
            }
        }).show();

Hope this helps!

score 2 · Answer 3 · answered Nov 25 '17 at 04:09

2

You are able to use ImageView view with scale type is FIT_XY(see more about scale type of ImageView here)

To zoom an image you can use a third lib such as this one or write a class by yourself(see here)

answered Nov 25 '17 at 04:09

John Le

1,116
9
12

Will the imageview be in real 'full screen' or within the container? I want real full screen view with zooming ability.Thank you – Sobinscott Nov 25 '17 at 04:21
It's up to you. Per item of the `RecyclerView` can be `ImageView` or `ViewGroup`(LinearLayout, RelativeLayout, etc.) which contains the `ImageView`. – John Le Nov 25 '17 at 04:30

score 0 · Answer 4 · edited Aug 03 '20 at 21:13

This is the working code for me for a single image and using glide Finally I found something similar to WhatsApp. I was digging over the internet for three days now I found a solution.

new StfalconImageViewer.Builder<String>(context, new ArrayList<>(Arrays.asList(messageModel.get(position).getUrl().trim())), new ImageLoader<String>() {
    @Override
    public void loadImage(ImageView imageView, String image) {
        Glide.with(context)
                .load(image)
                .into(imageView);
    }
}).show();

Android image full screen viewer

4 Answers4