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

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

Change `scaleType` from `fitXY` to `fitCenter`. `fitXY` fills all available space ignoring aspect ratio — Gooziec, Sep 17 '14 at 12:58
possible duplicate of [Fit image into ImageView, keep aspect ratio and then resize ImageView to image dimensions?](http://stackoverflow.com/questions/8232608/fit-image-into-imageview-keep-aspect-ratio-and-then-resize-imageview-to-image-d) — Confuse, Sep 17 '14 at 13:27
@Noorul how u resolved your issue ? can upls share ...i have imageview background image for frame how will i set my server image in my frame ? — Erum, Sep 01 '15 at 08:16

score 1 · Accepted Answer · answered Sep 17 '14 at 13:02

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>

score 0 · Answer 2 · answered Sep 17 '14 at 13:03

0

ImageView.ScaleType

use:

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

answered Sep 17 '14 at 13:03

Sagar Pilkhwal

3,998
2
25
77

score 0 · Answer 3 · answered Sep 17 '14 at 13:45

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.

Fit Image in imageview correctly in android

3 Answers3

Linked