Redundant margins when adding ImageView to ScrollView in Android.

Question

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

If you want the image to fill the whole space I would use ScaleType.CENTER_CROP. This will crop the left and right edge of your image a bit however.