fix(android): allow image to drag horizontally inside a ScrollableView

[prashantsaini1]

Fix: When zoomed in, an ImageView with enableZoomControls: true cannot be dragged horizontally inside a ScrollableView. However, it can be dragged in any direction other than horizontally since a ScrollableView intercepts the horizontal gesture to swipe left/right.

I believe when an image is zoomed in, users would ideally want to drag it, rather than changing the swipe-able pages.

Or should we allow a new property to let users swipe left/right even when zoomed in?

[m1ga]

Not tested it but yes: you should be able to swipe the image instead of going to the next page.

I use this module https://github.com/iotashan/TiTouchImageView and when you zoom in you can move the image and if the zoomed image is fully moved to the right it will swipe to the next page when you drag it again.

Bildschirmaufnahme_20250515_122534.mp4

This would be the ideal solution

[prashantsaini1]

• The https://github.com/iotashan/TiTouchImageView module is showing crashes on our console due to internal bitmap being null. Similar to this one - Crashing with 3.1.1: Parameter specified as non-null is null MikeOrtiz/TouchImageView#457
• I already raised the PR on the module to update it, but that will just avoid this issue rather than fixing the underlying root cause.

This is the reason we moved to use the inbuilt ImageView to have less maintenance onwards. We can improve the gesture handling anyways in the SDK itself. But this PR will at least allow the drag on zoomed image properly.

[m1ga]

totally agree! Just saw your PR in the module, nice. I didn't have any crash with it...I think I was using a custom version already 😄

But having not to use the module for it would be better of course. I'll check the PR soon

[m1ga]

First feedback:

I've created an example:

var win = Ti.UI.createWindow();

var view1 = Ti.UI.createView({ backgroundColor:'#123' });
var view2 = Ti.UI.createView({ backgroundColor:'#246' });
var view3 = Ti.UI.createView({ backgroundColor:'#48b' });
var img = Ti.UI.createImageView({
	image:"https://picsum.photos/1000/2000",
	enableZoomControls:true,
	width: Ti.UI.FILL,
	height: Ti.UI.FILL,
})
view1.add(img);
var scrollableView = Ti.UI.createScrollableView({
  views:[view1,view2,view3],
  showPagingControl:true
});

win.add(scrollableView);
win.open();

and it works as described: once I'm zoomed in I can move the image but will stay in the current slide.

But the pinch gesture is not very reliable (not your fault, it has been like this before!) when you let go and zoom for a second time. Especially trying to zoom out fully - without the double click - to be able to swipe the page again is very difficult.
Other than that: this way works but I think it should be behind a property. We have canMove, scrollable, swipeable or a scrollType that we could use.

[prashantsaini1]

@m1ga I believe we can go ahead with this version and fine tune it in further updates. What do you suggest?

Edit: I improved the pinch-to-zoom a bit today, will continue improving it.

[m1ga]

improved swiping sounds great!

I still think there should be a property to disable it again. Otherwise we'll remove a existing mechanism and people can't go back to it when they use it like this. I don't mind it being enabled by default but there should at least be a way to switch to the current behavior for people who just want to use to fingers to zoom and move and one finger for scrolling the slides.

[prashantsaini1]

@m1ga I will try to summarise the issue again, as it sounds confusing!

With enableZoomControls set to true, when you zoom in on an image and try to scroll it left or right with one finger:

• If you precisely scroll in horizontally only, the ScrollableView actually changes to the previous or next page and the image does not scroll, even when zoomed in. This PR fixes this problem.
• However, if you scroll in horizontally with a bit of y-axis delta, then the image scrolls fine.
• Also, when an image is not zoomed in, or when the zoom is reset, the ScrollableView will change pages as usual.

Apart from below two improvements, I feel the PR is fine:

1. Smooth pinch-to-zoom. (already improved at my local setup)
2. Slide to next/prev ScrollableView page when image is zoomed in and user pans around the edge. (in progress)

[m1ga]

Slide to next/prev ScrollableView page when image is zoomed in and user pans around the edge. (in progress)

If that is in the PR then it would be awesome and cover all cases 👍 Then we don't need a property.

My only concern before is that the current PR removes the "swipe horizontal even when zoomed in to swipe the ScrollableView" functionality and don't have an option to get that back user might not want to update if they use that.

[prashantsaini1]

@m1ga The double tap area is fixed along-with the smooth zooming. However, the below concern you highlighted was actually a bug earlier 😄 which is also fixed in this PR. Please give this PR a try and let me know if it's fine to go ahead as discussed.

Edit: This PR only improves the existing issues, and does not strip away any existing features.

My only concern before is that the current PR removes the "swipe horizontal even when zoomed in to swipe the ScrollableView" functionality and don't have an option to get that back user might not want to update if they use that.