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

I haven't developed on Android in a while but last time I played with it, I'm pretty sure that ScrollView wouldn't allow you to scroll past the end of the object(s) it enclosed.

If you've tried a scrollview, can you publish an example of how you're using it and I'll fire it up on my emulator

Answer 2

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 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.