7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ImageViewを角丸にする方法

Last updated at Posted at 2020-08-29

概要

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

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

hojge.png

実装方法

実装のコードは下記のようになります。
ポイントは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のコードから動的に指定する必要があります。

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?