ImageView inside ScrollView won't resize to fill screen(keeping aspect)

Question

I'm having a very weird problem that I can't seem to be able to fix.

I can't seem to resize an Bitmap for an ImageView that is inside a ScrollView. I tested the same Layout(but without the scroll) and the image is resized like it should be.

I found others having this kind of problem and for most using android:fillViewport="true" would suffice, but for me isn't working.

Here is my Layout:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"      
      android:fillViewport="true"
      android:background="@drawable/bg_app" >

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

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@drawable/custom_white_background"
            android:padding="5dp">

            <ImageView
                android:id="@+id/full_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitCenter"
                android:src="@drawable/bg_app"
                android:contentDescription="@string/otl_img_description"
                android:layout_margin="5dp"
                android:padding="5dp" />            

            <View
                android:id="@+id/divider2"
                android:layout_width="match_parent"
                android:layout_height="3dp"
                android:layout_below="@+id/full_image_view"
                android:layout_centerHorizontal="true"
                android:layout_marginLeft="5dp"
                android:paddingRight="5dp"
                android:layout_marginRight="5dp"
                android:paddingLeft="5dp"
                android:alpha="0.3"
                android:background="@color/black_50"
                android:fadingEdge="horizontal" />

            <TextView
                android:id="@+id/onthelist_animal_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_below="@+id/full_image_view"
                android:layout_margin="5dp"
                android:layout_toLeftOf="@+id/onthelist_animal_date"
                android:gravity="left|center"
                android:padding="5dp"
                android:text="@string/otl_animal_name"
                android:textColor="@color/blue"
                android:textStyle="bold"
                android:textSize="18sp" />

            <TextView
                android:id="@+id/onthelist_animal_date"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/full_image_view"
                android:layout_centerHorizontal="true"
                android:layout_margin="5dp"
                android:gravity="center"
                android:padding="5dp"
                android:text="@string/otl_animal_date"
                android:textColor="#a00000"
                android:textStyle="bold"
                android:textSize="18sp" />

            <ImageButton
                android:id="@+id/onthelist_share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/onthelist_animal_date"
                android:layout_alignParentBottom="true"
                android:layout_alignParentRight="true"
                android:layout_alignTop="@+id/onthelist_animal_date"
                android:layout_toRightOf="@+id/onthelist_animal_date"
                android:adjustViewBounds="true"
                android:paddingRight="5dp"
                android:contentDescription="@string/otl_animal_share"
                android:scaleType="fitEnd"
                android:src="@android:drawable/ic_menu_share"
                android:background="@android:color/transparent" />          

        </RelativeLayout>

        <Button
            android:id="@+id/onthelist_save"
            style="@style/ButtonText"
            android:layout_height="wrap_content"
            android:background="@layout/custom_red_button"
            android:text="@string/otl_save"
            android:layout_margin="5dp"
            android:padding="5dp" /> 

        <TextView
            android:id="@+id/onthelist_animal_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:background="@drawable/custom_white_background"
            android:padding="5dp"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/black"
            android:text="@string/otl_animal_description"
            android:linksClickable="true" />

    </LinearLayout>
</ScrollView>

and I'm setting the image for the ImageView full_image_view like this:

        imageView = (ImageView) findViewById(R.id.full_image_view);
    Log.i("OnTheList", "itemID[FI] = " + position);
    try {
        imageView.setImageBitmap(new ImageLoadTask().execute(
                JSONParserOnTheList.ANIMALS.get(position).photo).get());            
    } catch (InterruptedException e) {
        imageView.setImageResource(R.drawable.default_photo);
        e.printStackTrace();
    } catch (ExecutionException e) {
        imageView.setImageResource(R.drawable.default_photo);
        e.printStackTrace();
    }

The AsyncTask returns a Bitmap.

Thank you.

EDIT (SOLUTION -> FIX)

After many things and methods applied trying to fix the issue I found the solution. The idea was that the layout was working fine, the problem was that on some devices, because of the pixel density, the image was resize in a smaller version.

The fix that I applied was directly in the asynctask when I decoded the bitmap.

So the layout and everything else remained the same and the asyntask is this:

    private class ImageLoadTask extends AsyncTask<String, Void, Bitmap> {
    private Bitmap bitmap;
    @Override
    protected void onPreExecute() {
        loading.setTitle("Loading image ...");
        loading.show();
        super.onPreExecute();
    }

    @Override
    protected Bitmap doInBackground(String... params) {
        try {
            URL url;
            url = new URL(params[0]);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoInput(true);
            connection.connect();
            InputStream input = connection.getInputStream();
            BitmapFactory.Options options = new BitmapFactory.Options();

            // Bitmap scale depending on density
            // For example: 
            // 1600*1200 image to be resized to 640*480
            // (1600*2 equal to 640*5)
            options.inDensity = 5;
            options.inTargetDensity = 2;
            options.inScaled = false;
            // Decode the bitmap
            bitmap = BitmapFactory.decodeStream(input, null, options);
            input.close();
        } catch (MalformedURLException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return bitmap;
    }

    @Override
    protected void onPostExecute(Bitmap result) {
        loading.dismiss();
        loading.cancel();
        super.onPostExecute(result);
    }
}

Notice the options for BitmapFactory that is the important part that fixes the issue.

Also, to not have a very big image(a.k.a Full size image) you can give dimensions depending on the size of the screen like this:

ImageView imageView = (ImageView) findViewById(R.id.full_image_view);
imageView.setMaxHeight(screenSize()[0]-150);
imageView.setMaxWidth(screenSize()[1]-150);


private int[] screenSize() {
    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);

    int height = metrics.heightPixels;
    int width = metrics.widthPixels;

    return new int[] {height, width};

Hope this helps anyone that struggles with this in the future. }

Answer 1

Here is the real easy solution! use android:scaleType="fitXY" in your ImageView.

Answer 2

Please add fadingEdge and fillViewport to scrollview

<ScrollView 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"      
      android:fillViewport="true"
      android:fadingEdge="none"
      android:background="@drawable/bg_app" >

Answer 3

Please state the problem word by word, for the other part change all of the:

android:layout_below="@+id/full_image_view"
android:layout_alignBottom="@+id/onthelist_animal_date"
android:layout_alignTop="@+id/onthelist_animal_date"
android:layout_toRightOf="@+id/onthelist_animal_date"

To:

android:layout_below="@id/full_image_view"
android:layout_alignBottom="@id/onthelist_animal_date"
android:layout_alignTop="@id/onthelist_animal_date"
android:layout_toRightOf="@id/onthelist_animal_date"

E.G. - Remove the "+", this is used only for "android:id" and marks the name of the layout.