Redundant margins when adding ImageView to ScrollView in Android

Question

I have been trying to use a ScrollView on a single ImageView with a JPG (~770 x 1024) over an AVD that's 600x800.

My main.xml is:

<?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"
     >
<ScrollView 
android:id="@+id/scroller"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
/>
</LinearLayout>

Now, I add a single ImageView with

setContentView(R.layout.main);
ScrollView sv = (ScrollView)findViewById( R.id.scroller );
ImageView iv = new ImageView(this);
iv.setImageDrawable( new BitmapDrawable( "/sdcard/770x1024.jpg" ) ); // same happens with ScaleDrawable.
iv.setScaleType( ScaleType.CENTER_INSIDE );
sv.addView( sv ); // and it does not go any better if I use Linear Layout between the ScrollView and the ImageView.

The result is The image was displayed in a middle of a ScrollView, wrapped with background area on top and bottom as following:

     | } blank
     | }
Image|
.    |
.    :
.    :
     : } blank
     : }
     ^-scrollbar

Instead of just

Image|
.    |
.    |
.    |
.    :

I tried to set the background of the ImageView red, and it verified that the blank margins were ImageView background.

iv.setBackgroundColor( color.Red );

Where I would expect the image to take no more than its size (scaled to the AVD size) and I expect the ScrollView to let me scroll over the remainder (if any).

For some reason, I see that the drawable size is 600x1024.

Moreover I tried to add a LinearLayout with a dummy text view such as the linear layout is a parent to the ImageView and the TextView, and the ScrollView is a parent to the LinearLayout.

LinearLayout dummy = new LinearLayout( this );
dummy.addView(iv);
TextView someTextView = new TextView( this );
someTextView.setLayoutParams(new LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT ));
dummy.addView( someTextView );
sv.addView( dummy );

The result was very peculiar: The entire layout was set into the height of a text-less text view (19).

______________________
| T I T L E    B A R |
+--------------------+
|         []<-image  |
|        height=19px |
.                    .
.                    .
+--------------------+ 

It is important for me to avoid stretching the image. I can not use FIT_XY for ScaleType. What is the recommended way to implement a display of a page that can be potentially scrolled? Do I have to do it manually with a plain layout and scrolling upon GestureDetector.OnScroll events?

Thanks

Shmuel

P.S: Another observation: With an image scaled-down to 600x780 (proportional scaling) it does work properly. Unfortunately, for me it is not feasible to use a set of scaled-down clones of the images.

Answer 1

Add this to your ImageView in the xml:

android:adjustViewBounds="true"

Answer 2

I've had to do something similar, that I believe should work in your scenario, but this is off my head with no testing, so YMMV:

ImageView iv = new ImageView(this);
Drawable image = new BitmapDrawable("/sdcard/770x1024.jpg");
ScrollView scrollView = (ScrollView)findViewById(R.id.scroller);

int xWidth = image.getIntrinsicWidth();
int yHeight = image.getIntrinsicHeight();

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(xWidth, yHeight);
iv.setLayoutParams(params);
iv.setImageDrawable(image);
iv.setScaleType(ImageView.ScaleType.CENTER);

scrollView.addView(iv);

I don't know offhand whether or not ScrollView allows both horizontal and vertical scrolling at the same time, or whether you'd have to put a HorizontalScrollView within a ScrollView, or if that's even possible...but this SHOULD get you the correctly sized ImageView!