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.
Open up build.gradle (Module:app) and add PhotoView library.
compile 'com.github.chrisbanes:PhotoView:2.1.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" }
}
}
Sync the project by clicking on (Sync Now).
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.
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.
< ImageView
android:id="@+id/ivIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/nature" />
Reduce the size of the ImageView by adjusting android:layout_width and android:layout_height
< ImageView
android:id="@+id/ivIcon"
android:layout_width="80dp"
android:layout_height="80dp"
app:srcCompat="@drawable/nature" />
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" />
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" />
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" />
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.
Initialize ImageView (ivIcon).
ImageView mIcon = findViewById(R.id.ivIcon);
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);
Build and run the app to see the progress.
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.
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" />
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();
}
});
Build and run the app to test out Android pinch and zoom function.
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" />
