Partial port of https://github.com/davemorrissey/subsampling-scale-image-view library to Jetpack Compose.

Overview

ComposeSubsamplingScaleImage

Sample

Early preview (expect bugs)

dependencies {
  implementation 'com.github.K1rakishou:ComposeSubsamplingScaleImage:fab4ae38cb'
}

Why?

The original SubsamplingScaleImageView doesn't fully work with compose when using it inside of the HorizontalPager/LazyRow (probably the most common use-case: image gallery), namely swiping left/right doesn't work because SubsamplingScaleImageView, internally, calls requestDisallowInterceptTouchEvent(true) (basically tells every parent view to stop handling motion events/cancel all gestures) right after the first pointer touches the screen which (from my understanding) cancels awaitDownAndSlop() (code below awaitFirstDownOnPass() is never called so I assume the whole scope is getting canceled) function inside of the Modifier.draggable() which is used by Modifier.scrollable() which is used by LazyRow which is used by HorizontalPager. Even tough SubsamplingScaleImageView calls requestDisallowInterceptTouchEvent(false) after it detects that it cannot process the gesture (touch slop checks), Compose doesn't restart the awaitPointerEventScope after requestDisallowInterceptTouchEvent(false) is called (since it then waits for all pointers to be up or canceled) so the gesture stops working. I don't know whether it's a bug or is just not handled yet.

Why Partial?

I don't plan on porting all the features of the original SubsamplingScaleImageView, only the stuff that I personally need. Feel free to fork it and add whatever you need.

What currently works?

  • Tap detection.
  • Long tap detection.
  • Zoom/pan with two fingers.
  • One finger zoom (double-tap then move finger up/down for zoom).
  • Quick zoom (double tap to zoom in/zoom out).
  • Bunch of configurable parameters like minScale, maxScale, minScaleType, animation durations, etc.
  • Store/restore last scale/position upon configuration change.

What doesn't work but is planned?

  • It's impossible to replace one image with another without recreating the whole ComposeSubsamplingScaleImage composable.
  • Paddings.
  • PanLimit (PAN_LIMIT_INSIDE, PAN_LIMIT_OUTSIDE).
  • Bitmap pooling.
You might also like...
Simple parallax effect for your image. Only usable with Jetpack Compose.
Simple parallax effect for your image. Only usable with Jetpack Compose.

Parallax Effect in Compose Image Example usage // In an activity or fragment... private lateinit var gravitySensorDefaulted: GravitySensorDefaulted o

It's a simple app written in Kotlin that shows a simple solution for how to save an image into Firebase Storage, save the URL in Firestore, and read it back using Jetpack Compose.
It's a simple app written in Kotlin that shows a simple solution for how to save an image into Firebase Storage, save the URL in Firestore, and read it back using Jetpack Compose.

It's a simple app written in Kotlin that shows a simple solution for how to save an image into Firebase Storage, save the URL in Firestore, and read it back using Jetpack Compose.

ComposeCreditCardView - Jetpack Compose Credit Card View Library
ComposeCreditCardView - Jetpack Compose Credit Card View Library

ComposeCreditCardView Jetpack Compose Credit Card View Library Screenshots 📷  

Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

🐜 🐜 🐜 Compose flocking Ants(boids) 🐜 🐜 🐜 Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop 🚀 , usi

A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Owner
Dmitry
Dmitry
K5-compose is a sketchy port of p5.js for Jetpack Compose

k5-compose k5-compose is a sketchy port of P5.js for Jetpack Compose Desktop. This library provides you a playground to play with your sketches so you

Nikhil Chaudhari 176 Nov 22, 2022
ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real image is loaded from the internet. Use blurhash and coil to ensure good performance.

compose-image-blurhash ComposeImageBlurhash is a Jetpack Compose component with the necessary implementation to display a blurred image while the real

Orlando Novas Rodriguez 24 Nov 18, 2022
https://developer.android.com/codelabs/jetpack-compose-theming

Jetpack Compose Theming Codelab This folder contains the source code for the Jetpack Compose Theming codelab. In this codelab you will learn how to us

Carlos Barrios 1 May 6, 2022
🚀📱💖Animated LazyColumn/Row changes scale/color with animation and have a current selected item like a Pager. An elegant alternative for selecting from a list

Compose AnimatedList Animated infinite and finite LazyRow and LazyColumn with scale and color animations on scroll change based on how far they are to

Smart Tool Factory 47 Nov 16, 2022
Carol 12 Sep 25, 2022
This is a Compose for Web port of CompoSnake

Compose-Snake-Web This is a Compose for Web port of CompoSnake. I used the code from there and modified it, to make it work in web. You can try it HER

Jens Klingenberg 13 Apr 30, 2022
Zoom Modifiers, zoomable image and layouts with limit pan bounds, fling and moving back to valid bounds and callbacks that return current transformation or visible image section

Zoom Modifiers, zoomable image and layouts with limit pan bounds, fling and moving back to valid bounds and callbacks that return current transformation or visible image section

Smart Tool Factory 20 Dec 13, 2022
OTPView is a view made in Jetpack compose. It is highly customisable and can be used to show OTP view with different length and shapes.

OTPView OTPView is a highly costumizable OTP view made in the Jetpack compose UI. Usage: CircleOtpView is a sample composable that calls the OtpView w

kunalsale 17 Aug 4, 2022
🍂 Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, and Fresco.

Landscapist ?? Jetpack Compose image loading library which can fetch and display network images using Glide, Coil, Fresco Usecase You can see the use

Jaewoong Eum 1.4k Jan 1, 2023
Capturable - 🚀Jetpack Compose utility library for capturing Composable content and transforming it into Bitmap Image🖼️

Capturable ?? A Jetpack Compose utility library for converting Composable content into Bitmap image ??️ . Made with ❤️ for Android Developers and Comp

Shreyas Patil 494 Dec 29, 2022