Image in ImageView is stretched - Android

Question

I am trying to make a small image appear on my screen. I want it to be a small square. With the below code, it shows up as a long flat rectangle. I have attached a picture of what it looks like below.

java code

ImageView q1Image = (ImageView)findViewById(R.id.q1Image);
q1Image.setScaleType(ScaleType.FIT_XY);

xml code

<TableRow
    android:id="@+id/row4"
    android:layout_width="0dip"
    android:layout_height="wrap_content"
    android:layout_weight="1" >

    <ImageView
        android:id="@+id/q1Image"
        android:layout_width="10dp"
        android:layout_height="10dp"
        android:layout_weight=".1"
        android:textSize="8sp"
        android:gravity="center_horizontal" />

EDIT If I make the width and height equal to 50dp each, the image gets bigger but is still a flat looking rectangle.

Solution 1

FIT_XY will stretch your image to fit all yout ImageView. Use scale type fitCenter to preserve aspect ratio by placing the image in center if your ImageView

q1Image.setScaleType(ScaleType.FIT_CENTER);

Refer to http://developer.android.com/reference/android/widget/ImageView.ScaleType.html For other options.

Solution 2

Your scaling the Image wrong. Here are all scaletypes:

Top row (l-r) center, centerCrop, centerInside.

Bottom row (l-r): fitCenter, fitStart, fitEnd, fitXY.

You probably need fitCenter:

q1Image.setScaleType(ScaleType.FIT_CENTER);

Solution 3

Without the full layout XML this is just speculation, but seeing as you don't appear to have fixed the problem by changing the scale type, here are some other suggestions:

1. Wouldn't it be better if the layout_weight of the ImageView was zero?

2. Are you specifying android:stretchColumns on the TableLayout?

3. The image looks like it is being stretched to match the width of the text below. How many columns have you got in your table? It looks like the text in the other rows is in column 0 (as is the image in your first row) and the text in the first row is in column 1. If you want to leave column zero blank for the other rows, you need to specify android:layout_column on the text views.

Comments

[Matt]

I tried q1Image.setScaleType(ScaleType.FIT_CENTER); and also tried just CENTER as @ben75 suggested. All still give me the same result as what I posted initially.

[Matt]

Same flat rectangle still appears after switching to FIT_CENTER.

[Matt]

Column 1 is supposed be all images. The table has 4 columns. Right now, except for row 1, all the lowercase i's in column 0 are place holders. The layout_weight is set to .1 because I only want column 0 to account to 10% of the row space (which the place holders correctly show). I am specifying android:stretchColumns="*".

[Matt]

The dimensions of the picture is 100x100. Not sure if that matters.

[Yaroslav Mytkalyk]

Seems like the TableLayout is stretching a column with ImageView. Try to add andorid:shrinkColumns="0" and android:stretchColumns="1" to your TableLayout.

[Matt]

Works! I added what you suggested to the TableLayout and also took out the layout_weight from the ImageView. Thank you Doc!

[Gene Bo]

In xml, android:scaleType="fitCenter"