Scale ImageView and keep margins-CodePudding

I'm making an app and wanted an image to scale well with different-sized screens, but when I made the width and height match the parent, it ignored the margins, making the image go out of bounds in smaller devices and too small in larger ones. The fix I found is in the answers below:

CodePudding user response：

I like having my images rounded off, so I put them inside a CardView. It looks like this:

<androidx.cardview.widget.CardView
            android:id="@ id/cardView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"
            android:adjustViewBounds="true"
            android:layout_marginRight="32dp" <-- your margins
            android:layout_marginLeft="32dp" <-- your margins
            app:cardCornerRadius="20dp" <-- your rounded corners radius
            app:cardBackgroundColor="@color/background" <-- your background color
            app:layout_constraintTop_toBottomOf="@ id/top" <-- the view you have on top of the image. If there's nothing on top, set it to "parent" or skip it altogether.
            app:layout_constraintBottom_toTopOf="@id/bottom" <-- the view you have under the image. If there's nothing on top, set it to "parent" or skip it altogether.
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <ImageView
                android:id="@ id/imageView"
                android:layout_gravity="center"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:adjustViewBounds="true"
                android:layout_centerHorizontal="true"/>

        </androidx.cardview.widget.CardView>

if you don't like your images rounded off, just skip the CardView:

<ImageView
            android:id="@ id/imageView"
            android:layout_gravity="center"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"
            android:adjustViewBounds="true"
            android:layout_marginRight="32dp" <-- your margins
            android:layout_marginLeft="32dp" <-- your margins
            android:scaleType="centerCrop"
            app:layout_constraintTop_toBottomOf="@ id/eachText"<-- the view you have on top of the image. If there's nothing on top, set it to "parent" or skip it altogether.
            app:layout_constraintBottom_toTopOf="@id/bottom" <-- the view you have under the image. If there's nothing on top, set it to "parent" or skip it altogether.
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"/>

CodePudding user response：

You should add this into your imageView in xml file

android:scaleType="fitXY"

if it doesn't work, change "fitXY" to remain options of scaleType.