Why do I get white space on top and on the bottom of my ImageView in my RelativeLayout?

I am using a relativelayout to overlay to images. On all screen sizes so far that I have tested (from 2.7 to 10.1 inch) I always get white space on top of my image. In my IDE I always see that my relativelayout is causing the extra space on top and on the bottom of my image.

Why is that? I have set all height attributes to wrap_content and even added the adjustViewBounds attribute.

Note: You should know that my image is a lot bigger in size, meaning that there will be some sort of scaling.

Thanks for your tips!

Here is the code:

<?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="wrap_content"
    android:background="#FFFFFF"
    android:orientation="vertical" >

<LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical" 
    android:focusable="true"
android:focusableInTouchMode="true">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/bgf"
    android:textColor="#000000"
    android:textSize="25sp" />

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:adjustViewBounds="true"
        android:paddingRight="5dp"
        android:paddingLeft="5dp"
        android:paddingBottom="5dp"
        android:layout_gravity="center_horizontal"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/cde"
        android:contentDescription="@string/cde" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:layout_gravity="center_horizontal"
        android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
        android:src="@drawable/fgh"
        android:contentDescription="@string/abc" />

</RelativeLayout>


</LinearLayout>
</ScrollView>

This is occuring as the image is scaled down to fit the area available without losing the image's aspect ratio. You are getting white space because the image first occupied the available width and according to the aspect ratio of the original image the height of the was brought down.

To get a clearer understanding, I suggest you to do the following :

Set the background color of the relative layout to some color

Now you can understand the space between the imageView and the relativelayout.

Once you have checked that on your device, Do the following change and try again

Set the attribute scaleType = "fitXY" in your imageView.

This will make the image to scale and occupy the complete area available to the imageView. (The aspect ratio of the original image will be lost in this case). Now you will come to know the amount of area the imageView occupied.

I suppose once you do this you can conclude that :

In the first run if you had set the background of relativeLayout as black, it won't be visible since the imageView occupies the entire area without leaving any gap.
In the second run the image will cover the entire height and width, although the aspect ratio was lost. Hence this ascertains that imageView does cover the width and height and no space is left, its the image's aspect ratio ie the problem

In case you arrive at a different result altogether please do inform, we can work it out

EDIT :

Please do remove the paddings you have given for imageView too

Sunny Poong

I had the exact problem. After struggling for quite some time, I solved it by following this

**https://stackoverflow.com/a/22144391/2405473

and add the following to my program