Convert Figma logo to code with AI

MikeOrtiz logoTouchImageView

Adds touch functionality to Android ImageView.

2,732
865
2,732
22

Top Related Projects

图片浏览缩放控件

Android library (AAR). Highly configurable, easily extendable deep zoom view for displaying huge images without loss of detail. Perfect for photo galleries, maps, building plans etc.

Customizable Android full screen image viewer for Fresco library supporting "pinch to zoom" and "swipe to dismiss" gestures. Made by Stfalcon

Big image viewer supporting pan and zoom, with very little memory usage and full featured image loading choices. Powered by Subsampling Scale Image View, Fresco, Glide, and Picasso. Even with gif and webp support! 🍻

Quick Overview

TouchImageView is an Android library that extends ImageView to provide enhanced touch functionality. It allows users to zoom, pan, and perform pinch-to-zoom gestures on images, making it ideal for applications that require interactive image viewing capabilities.

Pros

  • Easy integration with existing Android projects
  • Smooth and responsive touch interactions
  • Supports both programmatic and XML-based initialization
  • Customizable zoom limits and behavior

Cons

  • Limited to Android platform only
  • May require additional optimization for large images
  • Documentation could be more comprehensive
  • Lacks some advanced features like rotation or image editing

Code Examples

  1. Basic usage in XML layout:
<com.ortiz.touchview.TouchImageView
    android:id="@+id/touch_image_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/your_image" />
  1. Programmatically setting an image and zoom:
val touchImageView = findViewById<TouchImageView>(R.id.touch_image_view)
touchImageView.setImageResource(R.drawable.your_image)
touchImageView.setZoom(2f) // Set zoom to 2x
  1. Adding a listener for zoom changes:
touchImageView.setOnZoomChangedListener { zoomLevel, zoomCenter ->
    Log.d("TouchImageView", "Zoom level: $zoomLevel, Center: $zoomCenter")
}
  1. Enabling/disabling zooming:
touchImageView.isZoomEnabled = true // Enable zooming
touchImageView.isZoomEnabled = false // Disable zooming

Getting Started

To use TouchImageView in your Android project:

  1. Add the JitPack repository to your project's build.gradle file:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.MikeOrtiz:TouchImageView:3.2.1'
}
  1. Use TouchImageView in your layout XML or create it programmatically in your Activity/Fragment.

  2. Customize the TouchImageView behavior as needed using the available methods and properties.

Competitor Comparisons

图片浏览缩放控件

Pros of PhotoView

  • More comprehensive feature set, including support for Fresco and Glide image loading libraries
  • Better performance optimization, especially for large images
  • More active development and community support

Cons of PhotoView

  • Larger library size due to additional features
  • Steeper learning curve for implementation
  • May be overkill for simple image viewing needs

Code Comparison

TouchImageView implementation:

TouchImageView imageView = new TouchImageView(this);
imageView.setImageResource(R.drawable.my_image);
imageView.setMaxZoom(4f);

PhotoView implementation:

PhotoView photoView = findViewById(R.id.photo_view);
Glide.with(this).load(imageUrl).into(photoView);
photoView.setMaximumScale(5.0f);

Both libraries provide similar basic functionality for image zooming and panning. However, PhotoView offers more advanced features and integration with popular image loading libraries, while TouchImageView focuses on simplicity and ease of use.

PhotoView is generally recommended for projects requiring advanced image manipulation and support for various image loading libraries. TouchImageView may be more suitable for simpler implementations or projects with size constraints.

Android library (AAR). Highly configurable, easily extendable deep zoom view for displaying huge images without loss of detail. Perfect for photo galleries, maps, building plans etc.

Pros of subsampling-scale-image-view

  • Supports very large images (100+ megapixels) with efficient memory usage
  • Offers smooth scrolling and zooming for high-resolution images
  • Provides more advanced features like tiling and subsampling

Cons of subsampling-scale-image-view

  • More complex implementation compared to TouchImageView
  • Steeper learning curve for developers
  • May be overkill for simpler image viewing needs

Code Comparison

TouchImageView:

TouchImageView imageView = new TouchImageView(this);
imageView.setImageResource(R.drawable.my_image);
imageView.setMaxZoom(4f);

subsampling-scale-image-view:

SubsamplingScaleImageView imageView = new SubsamplingScaleImageView(this);
imageView.setImage(ImageSource.resource(R.drawable.my_image));
imageView.setMaxScale(4f);

Both libraries offer similar basic functionality for zooming and panning images. However, subsampling-scale-image-view provides more advanced options for handling large images and customizing the viewing experience. TouchImageView is simpler to implement and may be sufficient for basic image viewing needs, while subsampling-scale-image-view excels in scenarios involving high-resolution images or complex zooming requirements.

Customizable Android full screen image viewer for Fresco library supporting "pinch to zoom" and "swipe to dismiss" gestures. Made by Stfalcon

Pros of FrescoImageViewer

  • Built on top of Fresco library, providing efficient memory management and caching
  • Supports zooming, panning, and swiping gestures out of the box
  • Offers customizable overlay views for additional information or controls

Cons of FrescoImageViewer

  • Requires Fresco library as a dependency, increasing app size
  • Limited to displaying images only, unlike TouchImageView which can be used with any drawable
  • Less flexible for custom implementations due to its specific focus on image viewing

Code Comparison

TouchImageView:

TouchImageView imageView = new TouchImageView(this);
imageView.setImageResource(R.drawable.my_image);
imageView.setMaxZoom(4f);

FrescoImageViewer:

new ImageViewer.Builder<>(this, imageUrls)
    .setStartPosition(startPosition)
    .setOverlayView(customOverlayView)
    .show();

TouchImageView provides a more straightforward implementation for single image viewing and manipulation, while FrescoImageViewer offers a gallery-like experience with built-in navigation between multiple images. TouchImageView is more flexible and can be easily integrated into existing layouts, whereas FrescoImageViewer provides a complete viewing solution with additional features at the cost of less customization options.

Big image viewer supporting pan and zoom, with very little memory usage and full featured image loading choices. Powered by Subsampling Scale Image View, Fresco, Glide, and Picasso. Even with gif and webp support! 🍻

Pros of BigImageViewer

  • Supports multiple image loading libraries (Fresco, Glide, and custom loaders)
  • Offers progressive image loading for better performance with large images
  • Provides a more comprehensive set of features for handling various image formats and sources

Cons of BigImageViewer

  • More complex setup and configuration compared to TouchImageView
  • Larger library size due to additional features and dependencies
  • May have a steeper learning curve for developers new to advanced image handling

Code Comparison

TouchImageView:

TouchImageView imageView = new TouchImageView(this);
imageView.setImageResource(R.drawable.large_image);
imageView.setMaxZoom(4f);

BigImageViewer:

BigImageView bigImageView = findViewById(R.id.big_image_view);
bigImageView.showImage(Uri.parse("https://example.com/large_image.jpg"));
bigImageView.setOptimizeDisplay(true);

Both libraries provide easy-to-use APIs for displaying and manipulating large images. TouchImageView focuses on touch gestures and zooming, while BigImageViewer offers more advanced features like progressive loading and support for multiple image sources. The choice between the two depends on the specific requirements of your project and the level of complexity you're willing to manage.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

TouchImageView for Android

Capabilities

TouchImageView extends ImageView and supports all of ImageView’s functionality. In addition, TouchImageView adds pinch zoom, dragging, fling, double tap zoom functionality and other animation polish. The intention is for TouchImageView to mirror as closely as possible the functionality of zoomable images in Gallery apps.

Download

Repository available on https://jitpack.io/#MikeOrtiz/TouchImageView

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
dependencies {
    implementation 'com.github.MikeOrtiz:TouchImageView:1.4.1' // last SupportLib version
    // or
    implementation 'com.github.MikeOrtiz:TouchImageView:$LAST_VERSION' // Android X
}

Examples

Please view the sample app which includes examples of the following functionality:

Single TouchImageView

Basic use of a single TouchImageView. Includes usage of OnTouchImageViewListener, getScrollPosition(), getZoomedRect(), isZoomed(), and getCurrentZoom().

ViewPager Example

TouchImageViews placed in a ViewPager like the Gallery app.

Mirroring Example

Mirror two TouchImageViews using onTouchImageViewListener and setZoom().

Switch Image Example

Click on TouchImageView to cycle through images. Note that the zoom state is maintained though the images are switched.

Switch ScaleType Example

Click on TouchImageView to cycle through supported ScaleTypes.

Resize Example

Click on the arrow buttons to change the shape and size of the TouchImageView. See how the view looks when it shrinks with various "resize" settings. Read ChangeSizeExampleActivity.java's comment for advice on how to set up a TouchImageView that's going to be resized.

Limitations

TouchImageView does not yet support pinch image rotation. Also, FIT_START and FIT_END scaleTypes are not yet supported.

API

Get the current zoom. This is the zoom relative to the initial scale, not the original resource.

float getCurrentZoom();

Get the max zoom multiplier.

float getMaxZoom();

Get the min zoom multiplier.

float getMinZoom();

Return the point at the center of the zoomable image. The PointF coordinates range in value between 0 and 1 and the focus point is denoted as a fraction from the left and top of the view. For example, the top left corner of the image would be (0, 0). And the bottom right corner would be (1, 1).

PointF getScrollPosition();

Return a RectF representing the zoomed image.

RectF getZoomedRect();

Returns false if image is in initial, unzoomed state. True, otherwise.

boolean isZoomed();

Reset zoom and translation to initial state.

void resetZoom();

Set the max zoom multiplier. Default value is 3.

void setMaxZoom(float max);

Set the min zoom multiplier. Default value is 1. Set to TouchImageView.AUTOMATIC_MIN_ZOOM to make it possible to see the whole image.

void setMinZoom(float min);

Set the max zoom multiplier to stay at a fixed multiple of the min zoom multiplier.

void setMaxZoomRatio(float max);

Set the focus point of the zoomed image. The focus points are denoted as a fraction from the left and top of the view. The focus points can range in value between 0 and 1.

void setScrollPosition(float focusX, float focusY);

Set zoom to the specified scale. Image will be centered by default.

void setZoom(float scale);

Set zoom to the specified scale. Image will be centered around the point (focusX, focusY). These floats range from 0 to 1 and denote the focus point as a fraction from the left and top of the view. For example, the top left corner of the image would be (0, 0). And the bottom right corner would be (1, 1).

void setZoom(float scale, float focusX, float focusY);

Set zoom to the specified scale. Image will be centered around the point (focusX, focusY). These floats range from 0 to 1 and denote the focus point as a fraction from the left and top of the view. For example, the top left corner of the image would be (0, 0). And the bottom right corner would be (1, 1).

void setZoom(float scale, float focusX, float focusY, ScaleType scaleType);

Set zoom parameters equal to another TouchImageView. Including scale, position, and ScaleType.

void setZoom(TouchImageView img);

Set which part of the image should remain fixed if the TouchImageView is resized.

setViewSizeChangeFixedPixel(FixedPixel fixedPixel)

Set which part of the image should remain fixed if the screen is rotated.

setOrientationChangeFixedPixel(FixedPixel fixedPixel)

License

TouchImageView is available under the MIT license. See the LICENSE file for more info.