Question 128067 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Scale ImageView and keep margins

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:

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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"/>

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search