Search code examples
androidxmlimageandroid-studioandroid-constraintlayout

Image Buttons Zoomed In/Cropped On Layout?


I'm working on an app where I have 4 image buttons, but for some reason the images I use get very zoomed in / cropped, as can be seen below. Any suggestions? enter image description here

I've tried resizing the image files themselves, but no matter whether they're 2k or 100x100, there's very little visual difference.

Here's the XML layout code for one of the buttons:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<ImageButton
    android:id="@+id/imageButton1"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_marginEnd="520dp"
    android:onClick="Click1"
    android:src="@drawable/placeholder1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:ignore="SpeakableTextPresentCheck"
    tools:srcCompat="@drawable/placeholder1" />

Solution

  • In your ImageButton tag set attribute to

    android:scaleType="centerInside"
    

    or

    android:scaleType="fitXY"