Open in app

Sign in

Write

Sign in

Android ImageView: Double Tap and Pinch Zoom with Multi-Touch Gestures in Kotlin

David Sunday
3 min readOct 4, 2020

Android provides many views which we can use to define a user interface for our apps. The imageview which can be used to display images from various sources is one of them. These view provides a high level of functionality to display images in a user interface so that we can concentrate on the images we want to display rather than taking care of rendering.

In this article we will be demonstrating how to use OnTouchListener, GestureDetector and OnDoubleTapListener to zoom an image and get proper view of every section in the image.

The video below shows an example from a sample project.

Sample Project

Okay Let’s get started!.

  1. Create a new project in android studio and name it what ever you like, Select Empty Activity as Project Template, select programming language as kotlin and leave the default settings for the rest items.

Note: Am using android studio Canary. It will work perfectly fine on RC and other android studio.

Create New Project
Select Project Template
Select Language

2. Download the image below, right-click on the image in your computer folder and select copy and add it to drawable by right-clicking on drawable under res in project and clicking paste in android studio.

Image

3. Expand app -> Java ->Project Package (e.g com.sundaydavid989.zoomexample) that has MainActivity inside.

Right-click on the project package, select new -> Kotlin File/Class. Type a name for your class. and select class. I will call mine ZoomClass.

Sample Zoom Class

Copy and paste the below code in the ZoomClass and import all classes.

zoom class

4. Expand the res -> layout and double-click activity_main.xml to open it. Select code view and paste the code below.

Run the app in an emulator or physical device and enjoy the zoom feature.

Here is a link to the Sample project on GitHub https://github.com/sunday58/ZoomExample

you can always study the zoom class code and edit it to your preference. Please feel free to leave your thought in the comment section.

Sign up to discover human stories that deepen your understanding of the world.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Imageview
Kotlin
Android
Gestures
Zoom

David Sunday
David Sunday

Written by David Sunday

75 Followers
33 Following

Android Software Developer

Responses (6)

Write a response

What are your thoughts?

Snuffo

Jan 1, 2021

Thank you very much for this zooming class! I added a property:
val isZooming: Boolean get() {return mSaveScale > 1f}
which is used to make it work together with a ViewPager by adding this code to activity:
override fun dispatchTouchEvent(ev…

--

mrussu

Oct 5, 2022

This way is better at preventing the ViewPager from swiping. Add code to the onTouch method:
MotionEvent.ACTION_DOWN -> {
...
parent?.requestDisallowInterceptTouchEvent(mSaveScale > 1f)
}

--

Andriy Danylovych

Dec 9, 2024

Wow, hats off!

--

More from David Sunday

See all from David Sunday

Recommended from Medium

See more recommendations

Help

Status

About

Careers

Press

Blog

Privacy

Rules

Terms

Text to speech