TileView scrolling offset issue

[jimzhaozhengwang]

We are working on a project where the user is able to seamlessly horizontally scroll through a LinearLayout with imageView as background (think of scrolling through a flyer with multiple pages as images where the height is fixed to the viewport). This background image is downscaled and is one giant bitmap combined from multiple images. The imageView’s scale type is currently FIT_CENTER. For example, we have original sized images (each of different dimensions) and we downscale them all to a fixed height while maintaining their aspect ratio. These downscaled images are then combined into the one large bitmap to be used as the background. As the user zooms in or scrolls horizontally we would like to render higher quality normalized images implemented as tiles on top, but we are experiencing an offset where the tiles are miss-aligning with the background image. In fact the further the user scrolls the worse the offset becomes.

How do you think we should approach this issue. Any help will be appreciated. Thanks.

[moagrius]

what happens when you don't set scale type?

[jimzhaozhengwang]

The imageView's scale type is not set, but by default it is FIT_CENTER

[moagrius]

try the other scale modes

[jimzhaozhengwang]

Unfortunately, the scale modes are not making a difference.

For a bit more context, here is an example:

We have an original image of size 1500x2000 (width by height), and we break down this image into tiles of 256x256 dimensions. From the original image, we also create a downscaled image at a fixed height of 500, which then suggests the size of the image will be 375x500 since the aspect ratio is maintained. This downscaled image will be loaded as the background. Android will then adjust the size of this downscaled image in order to fit the size of the viewport, for example to a height of 1050, which means the size will be 788x1050 (the 787.5, rounded up to 788 is calculated by dividing the height of the viewport by the height of the downscaled image and then multiplying by the width of downscaled image, this will maintain the aspect ratio of the image).

The discrepancy occurs when the original image is directly scaled down to fit the size of the viewport instead of being downscaled first and then scaled up to the viewport. The width will differ from the 788x1050 calculated.

Original -> Downscaled -> Viewport

width is different from

Original -> Viewport

which causes a deviation in pixels. This subsequently produces a jittery effect when scrolling horizontally on the screen.

[moagrius]

yeah i'm not sure how you'd solve that - doesn't sound like something there'd be an api for

[jimzhaozhengwang]

So we managed to get the imageView to work perfectly in the LinearLayout by prepositioning each imageView. That way when the user scrolls horizontally at a moderate pace without stoppage the tiles load near perfectly.

The error we had previously experienced where the tiles are being offset still persists in the following cases and we were wondering if you have any ideas how to approach from here.

Case 1: Scroll horizontally then tap the screen to prematurely end the scrolling motion, this will result in the offset occurring. Case 2: Scrolling horizontally extremely fast, this will result in the offset occurring.

We believe that this is due to scrolling acceleration. Similar to mouse acceleration where if the user keeps moving in some direction the speed of the movement will be greater and greater.

[moagrius]

sorry, nothing comes to mind - i still don't have a real clear idea of what you're trying to do or what the issues are, but it doesn't sound like anything the library will be able to solve for you out of the box. if you want to post a demo somewhere with very clear instructions as to what's wrong, i can try to take a look in the coming days

[jimzhaozhengwang]

No worries, thank you so much for your time.