Android - Image Button Scale

Question

I am trying to fit an image inside an ImageButton for testing but the way the ImageButtonbehaves is not as expected.

initially, I made a 988x89 pixels PNG image and placed it inside an ImageButton, which is in a 7inches 1024x600 pixels emulated screen. The ImageButtonis 988dp x 89dp, I know dp is not the same as pixels, but for this resolution I expected the image to scale itself reasonably to occupy most of the ImageButton. Also I changed to px instead of dp for testing and it made no difference.

But instead the ImageButton made the image inside it VERY small (the blue lines are the ImageButton bounds and the green line is a center align indication).

so question #1: Why does the ImageButton make an image as big as this so small, when it could fill most of the screen, even with the ImageButton size being very wide?

So to overcome this, I selected adjustViewBounds which made no difference, at all, which brings question #2: Why? Isn't the adjust view bounds supposed to adjust the view bounds?

The code so far is:

<ImageButton
        android:layout_width="988dp"
        android:layout_height="89dp"
        android:id="@+id/ibTest"
        android:src="@drawable/image_top_test"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="true"
        android:cropToPadding="false"
        android:layout_below="@+id/hlTopBar"
        android:background="#00000000" />

So later I changed scaleType to fitCenter and the image became:

Which is weird for me as well, since the ImageButton has the same aspect ratio as the image, so I would expect it to fit 100%, but it's not fitting (there is a gap in the width in both sides of the image).

So later I changed scaleType to fitXY and I got my final result:

Which appears to be the expected image after all (comparing the image by fitXY to the image of fitCenter in Photoshop shows that the fitCenter image is slightly oval, but it can't be shown here, which is expected since the width isn't matching the image as the height does).

So my general question is (#3): What's the right way for fitting an Image in Android, and to expect it to have it's regular size in the screen, and why is the scaling so messy and am I doing it wrong?

I know there are screen sizes issues and dp and etc. but the scaling isn't behaving in a controlled way, fitCenter makes the image oval, and fitXY is too much dependent of me setting the right image ratio on XY, so I wonder if I am making something wrong and how it's supposed to be the right way.

Final XML code:

<ImageButton
        android:layout_width="988dp"
        android:layout_height="89dp"
        android:id="@+id/ibTest"
        android:src="@drawable/image_top_test"
        android:layout_centerHorizontal="true"
        android:adjustViewBounds="true"
        android:cropToPadding="false"
        android:layout_below="@+id/hlTopBar"
        android:background="#00000000"
        android:scaleType="fitXY" />

Answer 1

That's a good try, you are trying to go deeper into the android implementations.

Ans #3:

At first providing exact size as height and width is not a good practice in android. If you wish to know why, the reason would be simply it will try to squeeze/expand the image to the size specified by you in the height and width params. Always wrap_content is the preferred Parameter so that the OS will automatically adjust depending upon the screen size.Hence you need to modify as:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/ibTest"
    android:src="@drawable/image_top_test"
    android:layout_centerHorizontal="true"
    android:adjustViewBounds="true"
    android:cropToPadding="false"
    android:layout_below="@+id/hlTopBar"
    android:background="#00000000"
    android:scaleType="fitXY" />

Ans #1 :

Why does the ImageButton make an image as big as this so small, when it could fill most of the screen, even with the ImageButton size being very wide?

The answer is is similar to the above mentioned. Your Image size will be much lesser than that the Android OS calculated depending on your mentioned size, taking device resolution into consideration. Use the http://coh.io/adpi/ (or http://density.brdrck.me/) site to make it simple to calculate. Always take the mdpi as standard or base. Suppose your image size is 988X89 in mdpi, it will be:

Now, it is as if you are trying to view an image of 988px X 89px on an xhdpi screen where the Android Os calculated the image size as 1976px X 178px, which is way larger than your given image size of 988px X 89px. that's why you get small image with most area white.

How to correct it? Go through the Android specifications to support different densities screens. this requires you to design images specifically for hdpi, mdpi, xhdpi and put them in appropriate folders of:

 MyProject/
     res/
       drawable-xhdpi/
           awesomeimage.png
       drawable-hdpi/
           awesomeimage.png
       drawable-mdpi/
           awesomeimage.png
       drawable-ldpi/
           awesomeimage.png

Ref : http://developer.android.com/training/multiscreen/screendensities.html for more details