ImageViewを角丸にする方法 #Android

概要

Androidには、画像リソースを表示するためにImageViewクラスが存在します。これを使用することで、UIに画像を表示することが可能になります。しかしながら、下の画像のように丸いアイコンのような画像を表示させる属性は、存在しません。(2020/08/29現在)

なので今回は、ImageViewを角丸にする方法を紹介します。サードパーティのライブラリも複数存在しますが、今回はそのよなライブラリに頼らずAndroid標準のライブラリのみ使用して実装する方法を紹介します。

実装方法

実装のコードは下記のようになります。
ポイントはCardViewを使用することです。

<androidx.cardview.widget.CardView
    android:id="@+id/icon"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:cardBackgroundColor="@color/colorAccent"
    app:cardCornerRadius="20dp"
    app:cardElevation="0dp"

    <ImageView
        android:id="@+id/image_view"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:src="@drawable/test_jpg"
        android:scaleType="centerCrop"
        android:layout_gravity="center"
        />
</androidx.cardview.widget.CardView>

ざっくり実装方針を説明すると、CardViewの子としてImageViewを配置し、CardViewで角丸を作成しています。

CardViewには、app:cardCornerRadiusという属性が存在し、角の半径を指定することができます。この属性により角丸が実現できます。

まとめ

今回はImageViewを角丸にする方法を紹介しました。
サードパーティのライブラリを使用しなくても、簡単に実装できますので、ぜひ使用してみてください。

追記

OutlineProviderを仕様することでも可能です。
紹介した方法と比べてxmlのネストが減らせるメリットがありますが、java/kotlinのコードから動的に指定する必要があります。