mFeinstein mFeinstein - 5 months ago 39
Android Question

Android - Image Button Scale

I am trying to fit an image inside an

ImageButton
for testing but the way the
ImageButton
behaves 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
ImageButton
is 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).

Test Image 1

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:

Test Image 2

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:

enter image description here

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

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:

enter image description here 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