1

So, I've seen that this is a common question, and that many users have found many solutions to this question. The most common suggested solution is to create a custom view with a sort of "rounded" attribute to be set in order to round the corners of the image. Another solution that has been suggested is to import some third-party package to have a ready-to-use custom view implementing a rounded image.

Nothing wrong about that, but isn't there a simpler solution to get a rounded ImageView?

Zoe
  • 27,060
  • 21
  • 118
  • 148
Giobar
  • 113
  • 2
  • 8
  • Just use the `com.google.android.material.imageview.ShapeableImageView` provided by the material components library as described in the linked duplicate question. – Gabriele Mariotti May 14 '21 at 14:32

1 Answers1

2

The solution is pretty simple actually, but yet hasn't been suggested that much. A few months ago I was searching for a simple solution to get a rounded ImageView, and all I could be able to find was complicated solutions. I'm writing this answer, since this is not known by everybody (and this solution has been implemented in Android at the end of 2020), so that if someone new to Android Studio will have the same question will be able to quickly find a simple solution to make any ImageView rounded.

First thing first, since the solution is implemented in an androidx library, you should make sure that you're declaring this dependency in your gradle:

dependencies {
    //...
    implementation "androidx.constraintlayout:constraintlayout:2.0.4"
}

After syncing your gradle, you will be able to use a component called "ImageFilterView".

ImageFilterView is sub-class of ImageView, so it inherits everything from a common ImageView, but there are a few things added in order to manipulate the image. Among these new things, there is the attribute "roundPercent" which allows you to set how much the corners of the image should be rounded. Remember that this is a percentage value, so it must be a float between 0.0 and 1.0 included. Settings this attribute to 1.0 will make the image totally circular.

That's all, nothing else to do, this will be enough to get a rounded ImageView:

<androidx.constraintlayout.utils.widget.ImageFilterView
    app:roundPercent = 1.0 />

(Remember that you have to define the "app" namespace at the beginning of the first layout of your xml file in order to be able to use it:

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <!-- ... -->
</layout>
Giobar
  • 113
  • 2
  • 8
  • 1
    I was not aware of those, it does look rather random they decided to add some extra "unrelated" widgets to constraint layout package. Still the basic implementation of rounded corners is simple - for API 21+ setup outline provider with roundRect and clip to it (this also creates rounded shadow), for lower apis fallback to clipping canvas during draw. – Pawel May 14 '21 at 13:30
  • Still implementing rounded corners is really counterintuitive. As you said this has been put in an unrelated package, so it's hard to be aware of this, and your solution is still not straight forward, not direct, and may cause confusion for someone. – Giobar May 14 '21 at 13:42