Inside an ImageView, how can I align the image to the bottom, horizontally center it, and scale it to fill the ImageView, maintaining aspect ratio?

user_18996840 0
Viewed 54

If I add android:scaleType="fitEnd" to the ImageView in XML, it almost does what I want, but the image is aligned to the bottom right of the view instead of bottom center.

It looks like I might be able to accomplish this by calling the setImageMatrix method on the ImageView, but I'm unsure of what to pass into setScale on the Matrix object to make it do what I want.

I've found a few answers that say to wrap the ImageView inside a parent layout and align the ImageView to the bottom of the parent, but this will not accomplish what I need. I need the image inside the actual ImageView aligned to the bottom center.

kotlin imageview android xml java
2 Answers

I figured it out. I was able to accomplish what I want by using android:scaleType=fitEnd" on the ImageView, and then wrapping it in a LinearLayout with :

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginTop="20dp"
    android:gravity="bottom|center_horizontal"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/title"
    app:layout_constraintBottom_toBottomOf="parent">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitEnd"
        />

</LinearLayout>
user_189968400

Essentially, if you want to adjust image to fit screen and maintain aspect ratio, getting it to bottom does not matter, simply perform transformations on it originating from its center. If you wish to preserve aspect ratio and fit screen at the same time, you will have 3 scenarios. Here we consider the fact that phones are not perfect square objects and that device height != device width. For our case, let's consider device width < device height:

  • Image width > height, so there will be unfilled space vertically.
  • Image height > width, so there will be unfilled space horizontally.
  • Image has same aspect ratio as device screen and no unfilled space is left.

Now it would be a good idea to read up on 2D graphics transformations but the TLDR; here would be this. We can represent the transformation of our image by essentially multiplying our image matrix via a transformation matrix. The resulting coordinates will be the transformed dimension of the image/ object. In our adjusting case, we would only be concerned with scaling and not translation.

This link will provide a gist for you to grasp the basics.

https://i-rant.arnaudbos.com/2d-transformations-android-java/

From there on, you will just have to get device width and height dynamically, compare it to image width and height, Then we will calculate the percentage by which our image should be enlarged or reduced. For instance if we see that image width is 20% larger than screen width, then we perform a scaling of 1.00 - 0.20 = 0.80%. If it is smaller by 79%, then we perform a scaling of 1.00 + 0.79 = 1.79%.

However, if you want a tried and tested implementation of this, it would be easier to use libraries such as glide to accomplish this task with a line of code.

user_153940190
Related