XCaf,

I think you have a very minor issue in your code. I noticed you set the ending X & Y values of your rectangles to the Width and Height of the screen. However, shouldn't it actually be set to (width - 1) & (height - 1), since the actual screen coordinates on for example a 320 x 480 display, X would range from 0 - 319 and Y would range from 0 - 479. Where the Width and Height you grab would be 320 & 480 respectively. So, I think you are setting the height and width of your rectangle by 1 pixel to many.

BTW, nice code. I needed to scroll only a portion of my screen (your idea of a scrolling rect vs a display rect works great for that). Think of a spacecraft with controls and viewport. The view port you look out would have space scrolling by, but the spaceship controls would be stationary. I also needed to process a doubletap for zooming and I needed to drag and drop other small bitmaps to be merged into the viewport bitmap (the area that zooms & scrolls).

I first tried combining your idea of scrolling and display rectangles with OnGestureListener & OnDoubleTapListener and although it worked, there seemed to be a lag when I first started to scroll or drag anything. After it got started it was smooth, but that initial move would lag behind and then jump to catch up. When I logged the output of event.getX(), I noticed the first move had between 10-25 pixels jump from the starting DownX. Where all other moves only had a 1-3 pixel change. It seems it was taking to long after the initial down to register it as a scroll (the lag), so I had a larger history of movements built up by the time it did (hence the jump).

I started wondering if the lag was do to all the gestures - such as LongPress and DoubleTap that OnGestureListener had to wait for to decide if one occurred. So, now I am trying to use a modified version of low level event processing that you showed in your tutorial to see if I can reduce this lag effect.

Thanks again for the great tutorial,

--Kirgan

Kirgan wrote:XCaf,

I think you have a very minor issue in your code. I noticed you set the ending X & Y values of your rectangles to the Width and Height of the screen. However, shouldn't it actually be set to (width - 1) & (height - 1), since the actual screen coordinates on for example a 320 x 480 display, X would range from 0 - 319 and Y would range from 0 - 479. Where the Width and Height you grab would be 320 & 480 respectively. So, I think you are setting the height and width of your rectangle by 1 pixel to many.

Nevermind about the above comment I made. Through some testing I did, I found you do actually have to set the right and bottom coordinates to the width and height to get it to display correctly. I think this should be considered a bug in Android rectangles, because if I create the following rectangle in the format Rect(left, top, right, bottom):

rectDisplay = new Rect(0, 0, 319, 479);

The left & top coordinates (0,0) are part of the rectangle, but 319 & 479 are not. It actually sets the rectangle to:
X: 0 - 318
Y: 0 - 478

In other words right and bottom are acting like width and height respectively. I would not have a problem with this, if the Android documentation said something like:

left The X coordinate of the left side of the rectangle
top The Y coordinate of the top of the rectangle
right The width of the rectangle
bottom The height of the rectangle

But it doesn't. The Android docs actually say:

left The X coordinate of the left side of the rectagle
top The Y coordinate of the top of the rectangle
right The X coordinate of the right side of the rectagle
bottom The Y coordinate of the bottom of the rectangle

However, you find when testing that: left & top are inclusive to the rectangle and right & bottom are exclusive of the rectangle. To me that doesn't make sense. If they are having us define the rectangle by coordinates - either all four boundaries should be inclusive of the rectangle or exclusive - but not some one and some the other.

Like I said, I think this should either be considered a bug or their documentation is wrong and they should change right and bottom to actually be width & height, since that is how they act.

Sorry for reporting you had a slight error in your code, when in fact it seems you already new about the above issue I just related and compensated for it in your code.

--Kirgan

Scroll.java is really great, but there are not a lot of comments, and being a beginner there are some things I don't understand. Two things don't seem to work on my emulator, and I haven't been able to find out why.

• the scrollbars never appear;
• the zoom works in a weird way: it won't use the point where you double tapped as the "center" for the zoom in, but instead will use the relative position of the displayed canvas. I know it's not very clear. Take this example: if you scrolled to the top-left corner of the picture and try to double tap, say, in the bottom-right of your screen to zoom in on this area, it will zoom as if you clicked on the top-left.

Does someone know why this class acts this way on my emulator ?

This tutorial is great. Works perfectly on a HTC Hero. I'd like to know if anyone has any insight into modifying it (i've been struggling for a few weeks now) so that instead of following the finger gesture, it can simply scroll smoothly and slowly to a pre-determined point on the image? I'm trying to get the same effect that is used in some of the ebook applications (particularly the Dr Suess ebooks) where they are able to originate at a particular point on a picture and then scroll slowly to different area of the picture to focus on a different spot. They also have a zoom effect but I'm not interested in that (yet). I am able to do this by simply creating a custom view, adding a bitmap to a canvas and then using scrollTo(x,y) or scrollBy(x,y) to move to a position, but the move is very dramatic and quick and I need to slow it down. I've been able to animate the entire view using an XML animation but it moves the view object where I want the view object to stay filled to the screen but just pan around INSIDE the view. Is there a way to apply the concepts in this tutorial to that problem?
Thanks!

Hi,

I just wanted to thank you for this tutorial. This is exactly how tutorials should be written - the explanations were great, especially with the diagram explaining in detail how one should imagine the ScrollRectangle.

Thank you,
Sven

Wanted to say that this tutorial helped me a lot. It wasn't specific to my problem but helped me understand how to solve my problem myself, which is how tutorials should be!

Thank you for this tutorial, it is what i was searching!
But there's a way to implement a zoom it/out function?

how to load and use some larger image? over 5000pixels.

does anybody point me to some good tutorial?

Hi XCaffeinated,

I have used your code to embed a large custom map of my creation. Thanks for the very useful tutorial. However, I have a small problem. I want my map to occupy only part of the display because I have a button at the top of the screen and a seekbar at the bottom. In my onCreate activity, I create an instance of the SampleView class and I add it to my content as shown below:

SampleView sview = new SampleView(this);
((RelativeLayout) main_layout).addView(sview);

In the constructor of SampleView, I changed the dimensions as shown below:
displayRect = new Rect(0, 50, displayWidth, displayHeight - 155);
scrollRect = new Rect(0, 50, displayWidth, displayHeight - 155);

Finally, in the onTouch class, I check if the user has touched the top of the screen or the bottom of the screen and if yes, I immediately return because I don't have to update the map. The code is shown below:

public boolean onTouchEvent(MotionEvent event)
{
if(event.getRawY() >= 0 && event.getRawY() <= 50)
{
mLoginButton.setFocusable(true);
Log.e("MY APP", "In the upper region");
return true;
}

if(event.getRawY() >= displayHeight - 155 && event.getRawY() <= displayHeight)
{
mSeeker.setFocusable(true);
Log.e("MY APP", "In the lower region");
return true;
}

switch (event.getAction())
{
//The same code as shown in your tutorial
}
}

My problem is that, the login button and seekbar are not receiving focus. In other words, no matter how many times I click on the button, the onClickListener is never invoked. The same goes for the seekbar. The onProgressChanged Listener is never invoked. Could you please tell me why my other views are not receiving focus?