Android PhotoView – Third Party Android Custom View Library

This is an android library tutorial where we exploit some of the available third party android libraries that help facilitate development of android application.

There is no need to reinvent the wheel when you already have a library that does what you plan to achieve. Using a third party library in android development can cut down your development time and in turn save you money.

Lets focus on the library we will test and implement today which is PhotoView. PhotoView is a custom View library develop by Chris Banes. PhotoView aims to help produce an easily usable implementation of a zooming Android ImageView.

If you have work with ImageView you already know that it did not come with a default image zooming with multi-touch or double tap function. This is where PhotoView becomes handy.

There are other features that PhotoView supports. The list is shown below.

1. Out of the box zooming, using multi-touch and double-tap.

2. Scrolling, with smooth scrolling fling.

3. Works perfectly when used in a scrolling parent (such as ViewPager).

4. Allows the application to be notified when the displayed Matrix has changed. Useful for when you need to update your UI based on the current zoom/scroll position.

5. Allows the application to be notified when the user taps on the Photo.

Now is time for us to implement codes on how to use PhotoView in our android application project. We are going to use an ImageView widget in our layout file.

It is important for us to understand what we are planning to achieve in this tutorial. The screen-shot of our project is shown below.

android photoview

Before we start, it is important for you to understand the tools and environment I used in this android tutorial. Feel free to use any tools you are familiar with.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 23

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: PhotoViewLibrary

Package: com.inducesmile.photoviewlibrary

Select Blank Activity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

If you are using Android Studio as your choice IDE, the new project will create a default

MainActivity.java file and its corresponding layout file.

For you to use this library in our project, we will first add to library to our project. Open your project build.gradle file and under the dependency section, add this line of code and sync your project.

dependencies {
  compile 'com.commit451:PhotoView:1.2.4'
}

If everything goes well, then we are good to use the library in our project.

Our project default layout file is the activity_main.xml. Open you layout file and add the ImageView widget to the layout file. The code sample for our layout file is as shown below.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.inducesmile.photoviewlibrary.MainActivity">

<ImageView
android:id="@+id/iv_photo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name"/>

</RelativeLayout>

The layout file is very simple and nothing to explain. We will head over to the MainActivity.java file. The first thing we will do is to get the instance of our ImageView control. A drawable is create and it will be use as a parameter in ImageView setImageDrawable() method.

Finally, the instance of the ImageView is passed as a parameter to PhotoViewAttacher constructor.

This is example is a simple way to use this android library but for more advance usage you can see other working examples provided by Chris Banes in Github.

This brings us to the end of this tutorial, If you find anything confusing kindly contact me with your questions or use the comment box below.

Now, when you run your application you will see the interface that looks similar to the sample that was shown earlier on.

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email address so that you will be among the first to receive our new post once it is published.

You can see a working version of the application in my application – Daily Pocket Calculator – in Google Play Store.

Download it and let me know what you think about it.

Add a Comment