Android: Scrolling an Imageview

Question

I have an ImageView that is twice the height of a normale screen ( 960 dip). I would like to scroll it nicely up and down on the screen. The bottom of the screen should contain a button. I have tried various combinations of ScrollView and Imageviews without any success. I have also thinkered with the :isScrollContainer attribute without results. Anyone knows how to do this? Cheers, Luca

Answer 1

hey guys found an easy and 100% reliable solution as Mr X mentioned above(as the other codes mentioned weren't working working on some devices or breaking) Simply use ScrollView provided by android and it takes care of stuff

something like this

<ScrollView android:layout_width="fill_parent" android:id="@+id/scrollView1"
        android:layout_height="wrap_content" android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" android:layout_above="@+id/button1"
        android:layout_alignParentRight="true" android:scrollbarAlwaysDrawVerticalTrack="true">
        <LinearLayout android:id="@+id/linearLayout1"
            android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center_horizontal">
            <ImageView android:src="@android:drawable/ic_menu_report_image"
                android:layout_height="wrap_content" android:id="@+id/imageView1"
                android:layout_width="wrap_content"></ImageView>
        </LinearLayout>
    </ScrollView>

and in oncreate something like this

if (mImageName != null) {
        InputStream is = null;
        try {
            is = this.getResources().getAssets().open("mathematics/"+mImageName);
        } catch (IOException e) {
        }
        Bitmap image = BitmapFactory.decodeStream(is);

        mImageView.setImageBitmap(image);
}

Cheers!

Answer 2

@wirbly Thank you so much for your code, it works exactly the way I want. But when i first read your code, I was a little confused about the four variables that you forgot to define .

So, i want to add the definition for the code to make it clearer.

Resources res=getResources();
Bitmap mBitmap = BitmapFactory.decodeResource(res, R.drawable.p_1920x1080); 
BitmapDrawable bDrawable = new BitmapDrawable(res, mBitmap);

//get the size of the image and  the screen
int bitmapWidth = bDrawable.getIntrinsicWidth();
int bitmapHeight = bDrawable.getIntrinsicHeight();
int screenWidth = this.getWindowManager().getDefaultDisplay().getWidth();  
int screenHeight = this.getWindowManager().getDefaultDisplay().getHeight();

Hope it's helpful.

Answer 3

Another way is to create a HorizontalScrollView, add the imageView into it and then add the HorizontalScrollView into a ScrollView. This allows you to scroll up, down, left, right.

Answer 4

this is how I fixed it :p

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scrollbarAlwaysDrawVerticalTrack="true">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="Specs"
        android:scrollbars="vertical"
        android:src="@drawable/image"/>
</ScrollView>

Answer 5

The easiest way is imho to use a webview and load the image into it via a local html file. This way you will also automatically get the zoom controls if you want to use them. For a large image (i.e. if it's 1000 or 3000 px wide) you will notice that Android (Coliris) isn't very good at displaying large zoomed images very sharp, even if the original images is sharp and uncompressed). This is a known issue. The solution for that is to break down the large image into smaller tiles and put them together again via html (div's or table). I use this approach to provide a subway map (larger than the screen and scrollable) to the user.

    WebView webView = (WebView)findViewById(R.id.webView);
    webView.getSettings().setBuiltInZoomControls(true);
    webView.getSettings().setUseWideViewPort(true);
    webView.getSettings().setDefaultZoom(WebSettings.ZoomDensity.FAR);

    webView.loadUrl( "content://com.myapp.android.localfile/sdcard/myappdata/common/mtr_map.html");

This might work for most cases / 'regular apps', although depends on your particular case. If you are talking about a image as a scrollable background of a game, it might not be useful for you.

Instead of a html file, you could also load the image directly (png, jpg). If you don't want the zoom control, just turn them off.

Answer 6

it works for me

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/img"
            android:scaleType="centerCrop"
            android:adjustViewBounds="true"/>

        <Button
            style="@style/btn"
            android:id="@+id/btn"
            android:layout_height="60dp"
            android:layout_marginTop="20dp"
            android:background="@drawable/btn"
            android:onClick="click"
            android:text="text" />
    </LinearLayout>

</ScrollView>