Android ImageView: Double Tap and Pinch Zoom with Multi-Touch Gestures in Kotlin
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.
Okay Let’s get started!.
- 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.
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.
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.
Copy and paste the below code in the ZoomClass and import all classes.
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.