androidandroid-imageviewscreen-resolutionimage-scalingadjustviewbounds

How to fit image into the imageview perfectly without losing image quality android

Im trying to fit images perfectly in the imageView but the image dosent fit properly when i use centerCrop with adjustViewBounds but when i use fitXY with adjustViewBounds the image fits perfectly to the imageView but now the image quality gets worst, My imageView height and width are match_parent and yes i also used fitCenter but didnt worked

Screenshot//currently im using centerCrop with adjustViewBounds

enter image description here

Here is my code

<LinearLayout 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="match_parent"
    android:layout_centerInParent="true"
    android:orientation="vertical"
    android:weightSum="5">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/Card_View"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_weight="4"
        app:shapeAppearanceOverlay="@style/RoundedCornerHome">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/imagePostHome"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:scaleType="centerCrop"
                android:adjustViewBounds="true"
                android:contentDescription="@string/todo"
                app:shapeAppearanceOverlay="@style/RoundedCornerHome" />

            <include
                android:id="@+id/imagepost_buttons"
                layout="@layout/imagepost_buttons" />
        </FrameLayout>

    </com.google.android.material.card.MaterialCardView>

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="10dp"
        android:layout_weight="1"
        android:background="@color/grey"
        app:cardBackgroundColor="@color/grey"
        app:shapeAppearanceOverlay="@style/RoundedCornerHome">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <include
                android:id="@+id/material_cardview_snipet"
                layout="@layout/material_cardview_snipet" />
        </FrameLayout>


    </com.google.android.material.card.MaterialCardView>


</LinearLayout>

for those who want to know what is layout material_cardview_snipet ,here is the code of it

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|right"
        android:layout_marginTop="5dp"
        android:layout_marginEnd="25dp"
        android:src="@drawable/ic_baseline_attach_money_24"
        tools:ignore="RtlHardcoded"
        android:contentDescription="@string/todo" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Ian Somerhalder"
        android:textColor="@color/white"
        android:layout_marginTop="5dp"
        android:textSize="20sp"
        android:textStyle="bold"
        tools:ignore="SmallSp" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left|center_vertical"
        tools:ignore="RtlHardcoded"
        android:textSize="17sp"
        android:layout_marginLeft="10dp"
        android:textColor="@color/white"
        android:text=".............."/>



</FrameLayout>
Solution

  • If you're image size I mean height and width ratio don't match with your image view height and width ratio glide will fit the image to center of your image view and a part of the image cuts if the ratios doesn't match. If you force images to fit the image view even the ratios doesn't matches it will be compressed to fit either in x-axis or in y-axis. So your image don't look as original.

    So use your image view attributes like this android:layout_width="match_parent" android:layout_height="wrap_content"

    Here width is fixed and hight will be calculated according to the image height.