image distort by size in ImageView

Question

I am working on a Shopping App in which I have multiple products with image. I have ImageView to show that product image in it. I am getting multiple images from server. I am making ImageView with width "wrap_content" and make height static. If I make height "wrap_content" then ImageView size becomes too big. I don't want to make ImageView too big

XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>

<androidx.cardview.widget.CardView
    android:id="@+id/layProduct"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:elevation="@dimen/dp5"
    android:orientation="vertical"
    app:cardCornerRadius="@dimen/dp8">

    <RelativeLayout
        android:id="@+id/layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="@dimen/dp10">

        <ImageView
            android:id="@+id/ivProduct"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/dp124"
            android:layout_centerHorizontal="true"
            android:adjustViewBounds="true"
            android:src="@mipmap/image_placeholder" />


        <TextView
            android:id="@+id/txtProductName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/ivProduct"
            android:layout_marginStart="@dimen/dp14"
            android:maxLines="1"
            android:text="English umbrella"
            android:textColor="#ff393737" />

        <TextView
            android:id="@+id/txtProductPrice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/txtProductName"
            android:layout_marginStart="@dimen/dp14"
            android:text="$24.99"
            android:textColor="#ff393737"
            android:textStyle="bold" />
    </RelativeLayout>
</androidx.cardview.widget.CardView>

Code:

             Glide.with(activity).load(image)
                .placeholder(R.mipmap.image_placeholder)
                .error(R.mipmap.image_placeholder)
                .into(ivProduct);

The image is streching in imageview. I want image like as Amazon Listing.

Answer 1

Say, you want to crop the image into 400x200.

<ImageView
                    android:layout_width="400dp"
                    android:layout_height="200dp"
                    android:scaleType="centerCrop"
                    android:src="@android:drawable/btn_star"/>

Then the ugly Android 2.3 star icon was displayed as:

Change the 400 and 200 into your preferred dimensions.

Suggested by ImageView to scale to fixed height, but crop excess width

This is exactly what Amazon does in a browser:

Answer 2

You should use android:scaleType attr for ImageView; For example, android:scaleType="centerCrop"