Fit Image in imageview correctly in android

Question

I have a list view with logos of supermarkets as images. Currently, they are not centered perfectly and are distorted. Please look at the screenshot http://i59.tinypic.com/33adym8.png

Here is my layout of row item

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/highlight_selector">

    <ImageView
        style="@style/imgPriceStoreLogoSmall"
        android:id="@+id/imgStoreLogo"
        android:src="@drawable/panda_logo"
        />
    <LinearLayout
        android:id="@+id/layoutPriceInfo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical" >
            <TextView
                android:id="@+id/lblStoreName"
                style="@style/lblRowProductName"
                android:layout_marginTop="5dp"
                android:textColor="@color/black"
                android:textSize="24sp"
                android:fontFamily="sans-serif-thin"
                android:text="Store Full Name"/>
            <TextView
                android:id="@+id/lblPrice"
                style="@style/lblRowOriginalPrice"
                android:textSize="20sp"
                android:textColor="@color/black"
                android:layout_marginTop="5dp"
                android:text="SAR 16.95"/>
        </LinearLayout>
    <ImageView style="@style/imgRowArrowIcon" />
</LinearLayout>

and my style

<style name="imgPriceStoreLogoSmall">
    <item name="android:layout_width">80dp</item>
    <item name="android:layout_height">80dp</item>
    <item name="android:layout_gravity">start</item>
    <item name="android:padding">5dp</item>
    <item name="android:scaleType">fitXY</item>
    <item name="android:contentDescription">@string/app_name</item>
    <item name="android:src">@drawable/no_image</item>
</style>

I do not know the actual sizes of the logo images but want to resize to fit in imageview nicely. Any help is appreciated.

Thanks, Noorul

Answer 1

The following code fits the image to yoursampleimage if the server image is so big

  <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/yousampleimagesizeimage" >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:adjustViewBounds="true"
                android:maxHeight="?android:attr/listPreferredItemHeight"
                android:maxWidth="?android:attr/listPreferredItemHeight"
                android:scaleType="centerCrop"
                android:src="@drawable/serverorDynamicimage" />
        </LinearLayout>

(or)

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

        <ImageView
            android:scaleType="centerCrop"
            android:id="@+id/actualimage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/sampleimage"
            android:layout_alignLeft="@+id/sampleimage"
            android:layout_alignRight="@+id/sampleimage"
            android:layout_alignTop="@+id/sampleimage"
            android:src="@drawable/actualimage" />

        <ImageView
            android:visibility="invisible"
            android:id="@+id/sampleimage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/sampleactualimage" />
    </RelativeLayout>

Answer 2

ImageView.ScaleType

use:

<item name="android:scaleType">centerCrop</item>

Answer 3

You have used width & height as 80dp. If image smaller that this height and width, it will be streached to fit in this area. If it is large, it will be scaled down to fit this area. I recommend using images multiple of 80x80 size e.g. 160x160, 40x40, etc.

layout_gravity = start means "Push object to the beginning of its container, not changing its size."

Whereas

center_vertical Place object in the vertical center of its container, not changing its size.

You can use "center_vertical" to put your image in vertically center.