ImageView library that allows full screen pinch zoom?

Question

I have a FrameLayout that contains an ImageView which I'd like to be able to zoom in on. How can I enable a "pinch-to-zoom" in the ImageView?

I'd like to be able to not have the zooming be restricted to the size of the ImageView but rather to the size of the containing FrameLayout as illustrated here (different app):

Solution 1

you can use android studio for doing that , here is steps how to achive it .

you may refer to this link to use it by

1- Open up Android Studio and create a new project and give it a name, in our case we’ve named it (ImageZoom), choose API 16 as the minimum SDK, then choose a blank activity, click “Finish” and wait for Android Studio to build your project.

2- Open up build.gradle (Module:app) and add PhotoView library.

compile 'com.github.chrisbanes:PhotoView:2.1.3'

3- Now you need to open up build.gradle (Project) and you need to add this line maven { url "https://jitpack.io" } inside (allprojects) tag.

allprojects {
repositories {
    google()
    jcenter()
    maven { url "https://jitpack.io" }
}
}

4- Sync the project by clicking on (Sync Now).

android studio sync gradle file Android studio sync gradle file. (Large preview)

5- Open activity_main.xml file, here you will add 3 views: – Android ImageView that will hold the picture. – Android TextView for the image title and description.

6- Add Android ImageView and make sure that you have added the image that you want to use for the ImageView inside the project drawable folder.

7-:

ImageView
android:id="@+id/ivIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/nature" />

8- Add some margin above the ImageView and place it in the center.

<ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
app:srcCompat="@drawable/nature" />

9- When you tap on the ImageView inside Android Studio preview window, you will see an empty space from top and bottom of the ImageView. You can fix that by using android:scaleType="centerCrop" which allow the image to fill the remaining space.

<ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/nature" />

10- when you tap on the ImageView inside Android Studio preview window, you will see an empty space from top and bottom of the ImageView. You can fix that by using android:scaleType="centerCrop" which allow the image to fill the remaining space.

<ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/nature" />

When you tap on the ImageView inside Android Studio preview window, you will see an empty space from top and bottom of the ImageView. You can fix that by using android:scaleType="centerCrop" which allow the image to fill the remaining space.

<ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
app:srcCompat="@drawable/nature" />

Add Android TextView which will hold the name of the picture, this TextView will be placed below ImageView (ivIcon) in the center, add some margin from the top, try to increase text size to (20sp) and change text style to (italic and bold).

<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_below="@+id/ivIcon"
android:text="@string/flower_name"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:textStyle="italic|bold" />

11- Now you add the final TextView for this layout which will hold the description about the picture, this TextView will be placed below (tvName), try to increase text size to (16sp) and don’t forget to add some margin from the top so that it doesn’t appear to close with (tvName) TextView.

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tvName"
android:textSize="16sp"
android:layout_marginTop="5dp"
android:text="@string/flower_description" />

12- Now you are done working on activity_main.xml file, next you need to open up MainActivity.java file and initialize Android ImageView and Android AlertDialog.

13- Initialize ImageView (ivIcon).

 ImageView mIcon = findViewById(R.id.ivIcon);

14- Next you need to change the shape of ImageView (ivIcon) to circle using RoundedBitmapDrawable and Bitmap.

Bitmap bitmap = BitmapFactory.decodeResource(getResources(), 
R.drawable.nature);
RoundedBitmapDrawable mDrawable = 
RoundedBitmapDrawableFactory.create(getResources(), bitmap);
mDrawable.setCircular(true);
mIcon.setImageDrawable(mDrawable);

15- Build and run the app to see the progress.

16- Now you need to work on Android AlertDialog, the AlertDialog will appear on the screen when you try to tap on ImageView (ivIcon). Before you start that, you first need to create another layout file that you will use it later for AlertDialog

16- Now you need to work on Android AlertDialog, the AlertDialog will appear on the screen when you try to tap on ImageView (ivIcon). Before you start that, you first need to create another layout file that you will use it later for AlertDialog.

17- Create a new layout file and name it (dialog_custom_layout.xml), this file will have a PhotoView that will match the width and height of the screen.

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

18- Now go back to MainActivity.java file, to be able to tap on the ImageView you will need to use setOnClickListener and inside onClick is where you will create AlertDialog.

        mIcon.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            AlertDialog.Builder mBuilder = new 
            AlertDialog.Builder(MainActivity.this);
            View mView = 
            getLayoutInflater().inflate(R.layout.dialog_custom_layout, 
            null);
            PhotoView photoView = mView.findViewById(R.id.imageView);
            photoView.setImageResource(R.drawable.nature);
            mBuilder.setView(mView);
            AlertDialog mDialog = mBuilder.create();
            mDialog.show();
            }
            });

19- Build and run the app to test out Android pinch and zoom function.

20- Hmm it seems that the image doesn’t fill the entire AlertDialog! You can actually fix it by using android:scaleType="centerCrop".

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

21- Build and run the app to see the result.

22- Great now you have a fully working app with pinch to zoom Android function 🙂

Solution 2

Simple answer, take a look at the PhotoView library, which has some great features. Just try out the samples and see, which one fits best to your needs.

With that library you can swap your ImageView with the PhotoView which allows zooming out of the box.

<com.github.chrisbanes.photoview.PhotoView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/full_screen_photo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"/>

it additionally also allows you to configure many more properties, like enabling rotating the image or reacting to user clicks.

Solution 3

There's a library that does exactly what you need - https://github.com/davemorrissey/subsampling-scale-image-view

Replace the ImageView in your layout with the SubsamplingScaleImageView from the library. Then in your fragment or activity, get a reference to the SubsamplingScaleImageView and set the image using either a resource, asset or uri like the following:

SubsamplingScaleImageView imageView = 
(SubsamplingScaleImageView) findViewById(id.imageView);
imageView.setImage(ImageSource.resource(R.drawable.monkey));
imageView.setImage(ImageSource.asset("map.png"));
imageView.setImage(ImageSource.uri("/sdcard/DCIM/DSCM00123.JPG"));

The image should be scaled automatically when you pinch it, without needing to configure anything extra.

Solution 4

I was facing same issues :

1. I was needed to ZOOM image.
2. I needed my image should Scroll LEFT, RIGHT, UP and DOWN while in Zoom OUT State.
3. It must work with GLIDE Library, which I am using for next features in my ACTIVITY.

Above Solution was not satisfying all my requirement.

Solution That Worked for Me : Using TouchImageView Open Source Library availiable at GIT HUB.

link :- https://github.com/MikeOrtiz/TouchImageView

It works with Glide also :

Glide
                                .with(ImageActivity.this)
                                .load(url)
                                .centerCrop()
                                .placeholder(R.drawable.logo)
                                .into(ivPlanDocument);

Change ImageView in your XML file with this:

<com.ortiz.touchview.TouchImageView
        android:id="@+id/iv_image_activity"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="20dp"
        android:scaleType="centerCrop"
        android:scrollbars="horizontal|vertical"
        />

I hope this will help some one.

View more solutions

Comments

[Ahmed amin shahin]

btw , when you use hammer.js even if you prevented scale within your pages / form , it will allow zooming for the images when you load your hammer.js librarry . it will work on any platform ios , android , windows phones , web browsers etc.. i posted 2 examples for you for images works over web browser. refer to the site official of hammer.js for any additional information

[4b0]

Tohu, please don't just post some tool or library as an answer. At least demonstrate how it solves the problem in the answer itself.

[Amolpskamble]

This solution is not for native app.

[Ahmed amin shahin]

i am not following you , i actully thought you are using android browser in native app , i mean there is browser you can place in there and the browser can support this js . if its not browser , why would you look for js librarry , why dont you use the tools in android it self then ?? i cannot understand what you are saying .. conflict !!

[Amolpskamble]

In the question user has mentioned, he using ImageView inside FarmeLayout. Both the components are native to Android and therefore solution should be native to Android. Your solution is acceptable if WebView or any other similar component is used.

[Isaac Perez]

I actually was looking for a library so this works! I'll be sure to specify next time I ask a question though

[Tohu]

@IsaacPerez If this is the answer you were looking for, could you please mark it as answered?

[Dexter Legaspi]

Note that this library does not support image that's hosted on an http/https URL. as such it cannot play nice with Picasso without writing more code.