scroll an image bigger than the screen and stop at its border on Android

Question

I know how to display an image that is bigger than the screen. That's fairly simple and explained in details here, however, this method makes you able to scroll as far as you want, event if you have left the image and you just have black screen. I would like to know how we can make the scrolling stop when we reach the side of the picture...

Answer 1

Load your image into a WebView. Then you will get all the scroll behaviors you are looking for, and even the default zoom controls if you choose to turn them on...practically for free. Your only other option (to my knowledge) would be to used the 2D graphics APIs (Canvas, etc.) and create your own version of drawing tiles (like viewing a section of a map).

If your image is local, take a look at this example of reading local image data in from the SD Card. The cleaner approach to serving a local image in this case would be to create a ContentProvider and access the resource through a content:// URL in your WebView.

Example using the bundled image car.jpg in the assets directory of your project:

res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <WebView
      android:id="@+id/web"
      android:layout_width="150dip"
      android:layout_height="150dip"
    />
</LinearLayout>

src/ImageViewer.java

public class ImageViewer extends Activity {

  WebView webView;
  /** Called when the activity is first created. */
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    webView = (WebView)findViewById(R.id.web);
    webView.loadUrl("file:///android_asset/car.jpg");
  }
}

For an image bundled with your project, that's the simplest method. This does not work with images in your resources directory (like res/drawable). That path is not worth the code required to complete it.

Answer 2

Well I had same issue here is my solution:

  Display display = getWindowManager().getDefaultDisplay();
    screenSize = new Point();
    display.getSize(screenSize);

Get screen size it will be required to set bottom and right boundaries

image.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            float curX, curY;

            switch (event.getAction()) {

                case MotionEvent.ACTION_DOWN:
                    mx = event.getX();
                    my = event.getY();
                    rect = image.getDrawable().getBounds();
                    break;
                case MotionEvent.ACTION_MOVE:
                    curX = event.getX();
                    curY = event.getY();
                    image.scrollBy(getX((int) (mx - curX)), getY((int) (my - curY)));
                    mx = curX;
                    my = curY;
                    break;
            }
            return true;
        }
    });

and finally two methods to set new scroll coordinates

private int getX(int x){
    if (image.getScrollX() + x < 0 ){ //left side 
        return 0;
    } else if (image.getScrollX() + x >= (rect.right - screenSize.x)){ //right side
        return 0;
    } else {
        return x;
    }
}

private int getY(int y){
    if (image.getScrollY() + y < 0 ){  //top side 
        return 0;
    } else if (image.getScrollY() + y >= (rect.bottom - screenSize.y)){ //bottom side
        return 0;
    } else {
        return y;
    }
} 

Works great API 16+, hope it will help

Answer 3

In your Activity.onCreate():

requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(...);

I was not sure which layout you exactly mean so I am posting 2 versions:

Version 1 (Buton below the image):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical">

    <ScrollView android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:layout_weight="1"
        android:fadingEdge="none" android:scrollbars="none">

        <ImageView android:id="@+id/image" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:scaleType="center" />

    </ScrollView>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="OK"
        android:layout_gravity="center" />

</LinearLayout>

Version 2 (Button over the image - in z axis):

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">

    <ScrollView android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:fadingEdge="none"
        android:scrollbars="none">

        <ImageView android:id="@+id/image" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:scaleType="center" />

    </ScrollView>

    <Button android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="OK"
        android:layout_gravity="bottom|center_horizontal" />

</FrameLayout>

You can also try putting ScrollView inside a HorizontalScrollView.