zoomimage

ZoomImage is an gesture zoom viewing of images library specially designed for Compose Multiplatform and Android View. Supported scale, pan, locate, rotation, and super-large image subsampling.

#image-zoom
#image-subsampling
#compose-ui

Suggest an edit

Android JVMJVMKotlin/NativeWasmJS

GitHub stars615

Authorspanpf

Open issues6

LicenseApache License 2.0

Creation datealmost 3 years ago

Last activity7 months ago

Latest release1.4.0 (7 months ago)

Homepage GitHub repository GitHub pages Wiki page

ZoomImage

Translations: 简体中文

ZoomImage is an gesture zoom viewing of images library specially designed for Compose Multiplatform and Android View. It has the following features and functions:

Compose Multiplatform. Support for Compose Multiplatform, which can be used on Android, macOS, Windows, Linux and other platforms
Power. Supports basic functions such as double-click scale, two-finger scale, single-finger scale, mouse wheel scale, keyboard scale, single-finger drag, inertial sliding, and keyboard drag.
Locate. Support for locate anywhere in the image and keeping it in the center of the screen
Rotate. Supports 0°, 90°, 180°, 270°, 360° rotation of pictures
Subsampling. Support for subsampling of very large images to avoid OOM, tile support animation, and sharpness gradients
Dynamic scale factor. Automatically calculates the most appropriate double-click scaling factor based on image size and container size
Scaling damping. When manually scaled beyond the maximum or minimum scale factor, there is a damped rubber band effect
Scroll bar. Supports displaying horizontal and vertical scroll bars to clarify the current scroll position
Read Mode. When a long image is displayed in reading mode, the initial state automatically fills the screen, and the user can immediately start reading the image content, eliminating the need for the user to double-click to scale in
Exif. Support reading Exif Orientation information and automatically rotating images
Image Loader. Provide support for image loaders such as sketch, coil, glide, picasso, etc., and can also customize support for more image loaders

https://github.com/panpf/zoomimage/assets/3250512/f067bed9-24e4-4ab8-a839-0731e155f4ef

Multiplatform support

Function/Platform	Android	iOS	Desktop	Web
Zoom	✅	✅	✅	✅
Subsampling	✅	✅	✅	✅
Exif Orientation	✅	✅	✅	✅
Integrated Sketch	✅	✅	✅	✅
Integrated Coil	✅	✅	✅	✅
Integrated Glide	✅	❌	❌	❌
Integrated Picasso	✅	❌	❌	❌

Sample App

For Android, iOS, desktop version, and web deployable packages, please go to the Releases page to download.
Web example：https://panpf.github.io/zoomimage/app

Download

Published to mavenCentral

${LAST_VERSION}: (Not included 'v')

Compose multiplatform:

// Integrate Sketch v4+ singleton mode, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch4:${LAST_VERSION}")

// Integrate Sketch v4+ koin mode, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch4-koin:${LAST_VERSION}")

// Integrate Sketch v4+ core, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch4-core:${LAST_VERSION}")

// Integrate Sketch v3 singleton mode, provides SketchZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch3:${LAST_VERSION}")

// Integrate Sketch v3 core, provides SketchZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch3-core:${LAST_VERSION}")

// Integrate Coil v3+ singleton mode, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-coil3:${LAST_VERSION}")

// Integrate Coil v3+ core, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-coil3-core:${LAST_VERSION}")

// Integrate Coil v2 singleton mode, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-coil2:${LAST_VERSION}")

// Integrate Coil v2 core, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-coil2-core:${LAST_VERSION}")

// Provides basic ZoomImage component, does not support network images.
implementation("io.github.panpf.zoomimage:zoomimage-compose:${LAST_VERSION}")

// Support loading images from composeResources folder
implementation("io.github.panpf.zoomimage:zoomimage-compose-resources:${LAST_VERSION}")

[!TIP] Just choose one according to the image loader you use or your needs.

Only android compose:

// Integrate Glide, provides GlideZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-glide:${LAST_VERSION}")

[!TIP] Why is there no picasso version of the compose ZoomImage component? Because Picasso has officially stated that it will not provide support for compose (Original post here)

Android view:

// Integrate Sketch v4+ singleton mode, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch4:${LAST_VERSION}")

// Integrate Sketch v4+ koin mode, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch4-koin:${LAST_VERSION}")

// Integrate Sketch v4+ core, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch4-core:${LAST_VERSION}")

// Integrate Sketch v3 singleton mode, provides SketchZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch3:${LAST_VERSION}")

// Integrate Sketch v3 core, provides SketchZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch3-core:${LAST_VERSION}")

// Integrate Coil v3+ singleton mode, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-coil3:${LAST_VERSION}")

// Integrate Coil v3+ core, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-coil3-core:${LAST_VERSION}")

// Integrate Coil v2 singleton mode, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-coil2:${LAST_VERSION}")

// Integrate Coil v2 core, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-coil2-core:${LAST_VERSION}")

// Integrate Glide, provides GlideZoomImageView component.
implementation("io.github.panpf.zoomimage:zoomimage-view-glide:${LAST_VERSION}")

// Integrate Picasso, provides PicassoZoomImageView component.
implementation("io.github.panpf.zoomimage:zoomimage-view-picasso:${LAST_VERSION}")

// Provides basic ZoomImageView component, does not support network images.
implementation("io.github.panpf.zoomimage:zoomimage-view:${LAST_VERSION}")

[!TIP] Just choose one according to the image loader you use or your needs.

R8 / Proguard

ZoomImage's own obfuscation is already included in aar, but you may also need to add obfuscation configuration for other libraries that depend indirectly

Quickly Started

Compose multiplatform:

// Use basic ZoomImage components
val zoomState: ZoomState by rememberZoomState()
val imageSource = remember {
    val resUri = Res.getUri("files/huge_world.jpeg")
  ImageSource.fromComposeResource(resUri)
}
zoomState.setSubsamplingImage(imageSource)
ZoomImage(
    painter = painterResource(Res.drawable.huge_world_thumbnail),
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
    zoomState = zoomState,
)

// Use SketchZoomAsyncImage component
SketchZoomAsyncImage(
    uri = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

// Use CoilZoomAsyncImage component
CoilZoomAsyncImage(
    model = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

[!TIP] The usage of SketchZoomAsyncImage and CoilZoomAsyncImage is the same as their original AsyncImage, except that there is an additional zoomState: ZoomState parameter

Only android compose:

// Use GlideZoomAsyncImage component
GlideZoomAsyncImage(
    model = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

[!TIP] The usage of GlideZoomAsyncImage is the same as its original GlideImage, except that there is an additional zoomState: ZoomState parameter

Android view:

// Use basis ZoomImageView component
val zoomImageView = ZoomImageView(context)
zoomImageView.setImageResource(R.drawable.huge_world_thumbnail)
zoomImageView.setSubsamplingImage(ImageSource.fromResource(R.raw.huge_world))

// Use SketchZoomAsyncImage component
val sketchZoomImageView = SketchZoomImageView(context)
sketchZoomImageView.loadImage("https://sample.com/sample.jpeg")

// Use CoilZoomImageView component
val coilZoomImageView = CoilZoomImageView(context)
sketchZoomImageView.loadImage("https://sample.com/sample.jpeg")

// Use GlideZoomImageView component
val glideZoomImageView = GlideZoomImageView(context)
Glide.with(this@GlideZoomImageViewFragment)
    .load("https://sample.com/sample.jpeg")
    .into(glideZoomImageView)

// Use PicassoZoomImageView component
val picassoZoomImageView = PicassoZoomImageView(context)
picassoZoomImageView.loadImage("https://sample.com/sample.jpeg")

Document

Samples

You can find the sample code in the examples directory, or you can go to release page download App experience

Change Log

Please review the CHANGELOG file

Test Platform

Android: Emulator; Arm64; API 21-34
Desktop: macOS; 14.6.1; JDK 17
iOS: iphone 16 simulator; iOS 18.1
Web: Chrome; 130

Run Sample App

Prepare the environment:

Android Studio: Norwhal+ (2025.1.1+)
JDK: 17+
Use kdoctor to check the running environment and follow the prompts to install the required software
Android Studio installs the Kotlin Multiplatform plugin

Run the sample app:

Clone the project and open it using Android Studio
After synchronization is completed, the Kotlin Multiplatform plug-in will automatically create a running configuration for each platform.
Select the corresponding platform's running configuration, and then click Run

My Projects

The following are my other open source projects. If you are interested, you can learn about them:

sketch: Sketch is an image loading library designed for Compose Multiplatform and Android View. It is powerful and rich in functions. In addition to basic functions, it also supports GIF, SVG, video thumbnails, Exif Orientation, etc.
assembly-adapter: A library on Android that provides multi-type Item implementations for various adapters. Incidentally, it also provides the most powerful divider for RecyclerView.
sticky-item-decoration: RecyclerView sticky item implementation

License

Apache 2.0. See the LICENSE file for details.

Android JVMJVMKotlin/NativeWasmJS

GitHub stars615

Authorspanpf

Open issues6

LicenseApache License 2.0

Creation datealmost 3 years ago

Last activity7 months ago

Latest release1.4.0 (7 months ago)

Homepage GitHub repository GitHub pages Wiki page

ZoomImage

Translations: 简体中文

ZoomImage is an gesture zoom viewing of images library specially designed for Compose Multiplatform and Android View. It has the following features and functions:

Compose Multiplatform. Support for Compose Multiplatform, which can be used on Android, macOS, Windows, Linux and other platforms
Power. Supports basic functions such as double-click scale, two-finger scale, single-finger scale, mouse wheel scale, keyboard scale, single-finger drag, inertial sliding, and keyboard drag.
Locate. Support for locate anywhere in the image and keeping it in the center of the screen
Rotate. Supports 0°, 90°, 180°, 270°, 360° rotation of pictures
Subsampling. Support for subsampling of very large images to avoid OOM, tile support animation, and sharpness gradients
Dynamic scale factor. Automatically calculates the most appropriate double-click scaling factor based on image size and container size
Scaling damping. When manually scaled beyond the maximum or minimum scale factor, there is a damped rubber band effect
Scroll bar. Supports displaying horizontal and vertical scroll bars to clarify the current scroll position
Read Mode. When a long image is displayed in reading mode, the initial state automatically fills the screen, and the user can immediately start reading the image content, eliminating the need for the user to double-click to scale in
Exif. Support reading Exif Orientation information and automatically rotating images
Image Loader. Provide support for image loaders such as sketch, coil, glide, picasso, etc., and can also customize support for more image loaders

https://github.com/panpf/zoomimage/assets/3250512/f067bed9-24e4-4ab8-a839-0731e155f4ef

Multiplatform support

Function/Platform	Android	iOS	Desktop	Web
Zoom	✅	✅	✅	✅
Subsampling	✅	✅	✅	✅
Exif Orientation	✅	✅	✅	✅
Integrated Sketch	✅	✅	✅	✅
Integrated Coil	✅	✅	✅	✅
Integrated Glide	✅	❌	❌	❌
Integrated Picasso	✅	❌	❌	❌

Sample App

For Android, iOS, desktop version, and web deployable packages, please go to the Releases page to download.
Web example：https://panpf.github.io/zoomimage/app

Download

Published to mavenCentral

${LAST_VERSION}: (Not included 'v')

Compose multiplatform:

// Integrate Sketch v4+ singleton mode, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch4:${LAST_VERSION}")

// Integrate Sketch v4+ koin mode, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch4-koin:${LAST_VERSION}")

// Integrate Sketch v4+ core, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch4-core:${LAST_VERSION}")

// Integrate Sketch v3 singleton mode, provides SketchZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch3:${LAST_VERSION}")

// Integrate Sketch v3 core, provides SketchZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-sketch3-core:${LAST_VERSION}")

// Integrate Coil v3+ singleton mode, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-coil3:${LAST_VERSION}")

// Integrate Coil v3+ core, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-coil3-core:${LAST_VERSION}")

// Integrate Coil v2 singleton mode, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-coil2:${LAST_VERSION}")

// Integrate Coil v2 core, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-coil2-core:${LAST_VERSION}")

// Provides basic ZoomImage component, does not support network images.
implementation("io.github.panpf.zoomimage:zoomimage-compose:${LAST_VERSION}")

// Support loading images from composeResources folder
implementation("io.github.panpf.zoomimage:zoomimage-compose-resources:${LAST_VERSION}")

[!TIP] Just choose one according to the image loader you use or your needs.

Only android compose:

// Integrate Glide, provides GlideZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-compose-glide:${LAST_VERSION}")

[!TIP] Why is there no picasso version of the compose ZoomImage component? Because Picasso has officially stated that it will not provide support for compose (Original post here)

Android view:

// Integrate Sketch v4+ singleton mode, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch4:${LAST_VERSION}")

// Integrate Sketch v4+ koin mode, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch4-koin:${LAST_VERSION}")

// Integrate Sketch v4+ core, provides SketchZoomAsyncImage component. (Recommended)
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch4-core:${LAST_VERSION}")

// Integrate Sketch v3 singleton mode, provides SketchZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch3:${LAST_VERSION}")

// Integrate Sketch v3 core, provides SketchZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-sketch3-core:${LAST_VERSION}")

// Integrate Coil v3+ singleton mode, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-coil3:${LAST_VERSION}")

// Integrate Coil v3+ core, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-coil3-core:${LAST_VERSION}")

// Integrate Coil v2 singleton mode, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-coil2:${LAST_VERSION}")

// Integrate Coil v2 core, provides CoilZoomAsyncImage component.
implementation("io.github.panpf.zoomimage:zoomimage-view-coil2-core:${LAST_VERSION}")

// Integrate Glide, provides GlideZoomImageView component.
implementation("io.github.panpf.zoomimage:zoomimage-view-glide:${LAST_VERSION}")

// Integrate Picasso, provides PicassoZoomImageView component.
implementation("io.github.panpf.zoomimage:zoomimage-view-picasso:${LAST_VERSION}")

// Provides basic ZoomImageView component, does not support network images.
implementation("io.github.panpf.zoomimage:zoomimage-view:${LAST_VERSION}")

[!TIP] Just choose one according to the image loader you use or your needs.

R8 / Proguard

ZoomImage's own obfuscation is already included in aar, but you may also need to add obfuscation configuration for other libraries that depend indirectly

Quickly Started

Compose multiplatform:

// Use basic ZoomImage components
val zoomState: ZoomState by rememberZoomState()
val imageSource = remember {
    val resUri = Res.getUri("files/huge_world.jpeg")
  ImageSource.fromComposeResource(resUri)
}
zoomState.setSubsamplingImage(imageSource)
ZoomImage(
    painter = painterResource(Res.drawable.huge_world_thumbnail),
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
    zoomState = zoomState,
)

// Use SketchZoomAsyncImage component
SketchZoomAsyncImage(
    uri = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

// Use CoilZoomAsyncImage component
CoilZoomAsyncImage(
    model = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

[!TIP] The usage of SketchZoomAsyncImage and CoilZoomAsyncImage is the same as their original AsyncImage, except that there is an additional zoomState: ZoomState parameter

Only android compose:

// Use GlideZoomAsyncImage component
GlideZoomAsyncImage(
    model = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

[!TIP] The usage of GlideZoomAsyncImage is the same as its original GlideImage, except that there is an additional zoomState: ZoomState parameter

Android view:

// Use basis ZoomImageView component
val zoomImageView = ZoomImageView(context)
zoomImageView.setImageResource(R.drawable.huge_world_thumbnail)
zoomImageView.setSubsamplingImage(ImageSource.fromResource(R.raw.huge_world))

// Use SketchZoomAsyncImage component
val sketchZoomImageView = SketchZoomImageView(context)
sketchZoomImageView.loadImage("https://sample.com/sample.jpeg")

// Use CoilZoomImageView component
val coilZoomImageView = CoilZoomImageView(context)
sketchZoomImageView.loadImage("https://sample.com/sample.jpeg")

// Use GlideZoomImageView component
val glideZoomImageView = GlideZoomImageView(context)
Glide.with(this@GlideZoomImageViewFragment)
    .load("https://sample.com/sample.jpeg")
    .into(glideZoomImageView)

// Use PicassoZoomImageView component
val picassoZoomImageView = PicassoZoomImageView(context)
picassoZoomImageView.loadImage("https://sample.com/sample.jpeg")

Document

Samples

You can find the sample code in the examples directory, or you can go to release page download App experience

Change Log

Please review the CHANGELOG file

Test Platform

Android: Emulator; Arm64; API 21-34
Desktop: macOS; 14.6.1; JDK 17
iOS: iphone 16 simulator; iOS 18.1
Web: Chrome; 130

Run Sample App

Prepare the environment:

Android Studio: Norwhal+ (2025.1.1+)
JDK: 17+
Use kdoctor to check the running environment and follow the prompts to install the required software
Android Studio installs the Kotlin Multiplatform plugin

Run the sample app:

Clone the project and open it using Android Studio
After synchronization is completed, the Kotlin Multiplatform plug-in will automatically create a running configuration for each platform.
Select the corresponding platform's running configuration, and then click Run

My Projects

The following are my other open source projects. If you are interested, you can learn about them:

sketch: Sketch is an image loading library designed for Compose Multiplatform and Android View. It is powerful and rich in functions. In addition to basic functions, it also supports GIF, SVG, video thumbnails, Exif Orientation, etc.
assembly-adapter: A library on Android that provides multi-type Item implementations for various adapters. Incidentally, it also provides the most powerful divider for RecyclerView.
sticky-item-decoration: RecyclerView sticky item implementation

License

Apache 2.0. See the LICENSE file for details.