Image is not keep the ratio, how to keep it?

Question

I just created a GUI with only one ImageView. The code below:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/TableLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center|top"
    android:background="@drawable/exam_list_bg"
    android:gravity="top|center" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/exam_icon_failed" />

    </TableRow>

</TableLayout>

Some more info: - exam_icon_failed.png (97x175) - i use Galaxy Nexus as preview device (in eclipse)

And the problem: - In preview screen, i see that the image was OK (keep ratio, no stretch..) But when i install in phone (same screen size with preview device) -> the image was stretched.

Could you give some advice for this case? i want to keep the image ratio. Many thanks!

Answer 1

Thank for your help. Finally, i found that it come from my desktop (exactly screen resolution).

When i view the original image with my desktop, it look like a square. I have took a picture from my desktop here: http://i1312.photobucket.com/albums/t530/langhoangal/myQuestions/original_inDesktop_zpsbab06700.jpg

But when i open it by my laptop, i can see it like that (i think you see like that): http://i1312.photobucket.com/albums/t530/langhoangal/myQuestions/original_inLaptop_zpsbf19a22c.jpg -> same with what i can see in my phone.

So, the problem is my computer screen display wrong. :) I have tried to adjust resolution and it ok now, i can see exactly what display on phone.

Many thanks for all of you! Cheer!

Answer 2

Add scaleType to your ImageView like so:

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside"
        android:src="@drawable/exam_icon_failed" />

Answer 3

Please try this:

<ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/exam_icon_failed"
            android:adjustViewBounds="true"/>

And apply 9-patch to your image if possible. Hope this helps.

Answer 4

change your image view like

<ImageView
   android:id="@+id/imageView1"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:scaleType="center" 
   android:src="@drawable/exam_icon_failed" />

may help you and someone..