概要
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のコードから動的に指定する必要があります。