ShapeableImageViewを使用して簡単に円形表示を行う方法

はじめに

歴史のあるプロジェクトでは特に、円形のViewを表示したい時にDrawableを作って再現しているところも結構多いですよね。
確かにDrawableを作って適用しても綺麗に円形表示が可能ですが、気がついたら同じようなDrawableばかりが増えている、、、こんなことありませんか？
最近ではかなり浸透してきているマテリアルなUIを使用する事で、無駄なDrawableを作成する必要がなくなり、リソースも必要最低限となりすっきりして良いので、簡単にご紹介します。

ShapeableImageView

円形表示にはShapeableImageViewを使用します。
まず、ShapeableImageViewをxmlに追加します。

<com.google.android.material.imageview.ShapeableImageView
   android:layout_width="50dp"
   android:layout_height="50dp"
   app:shapeAppearanceOverlay="@style/CircleShapeAppearance" />

次に、shapeAppearanceOverlayに設定されている、styleをstyles.xmlに定義します。

<style name="CircleShapeAppearance">
   <item name="cornerFamily">rounded</item>
   <item name="cornerSize">50%</item>
</style>

設定は以上になります、これだけで丸いViewを生成可能です。
基本的にDrawableを設定する場合と同じですが、ShapeableImageViewのサイズは全て同じサイズを設定する必要があります。
また、このShapeableImageViewを使用する為にはマテリアル系の設定が必要です、その点はご注意ください。
親のstyleにマテリアルを設定できない場合はこちらが参考になります。

さいごに

ShapeableImageViewを使用する事で、無駄なDrawableを生成する必要がなく、設定も使い回す事が可能なので、実装コストも抑えることができます。
長い間運用しているプロジェクトで且つ、担当者がころころ変わっていたりすると、リソースはかなりゴミだらけになっていたりするので、後の負債にならないようこの辺りは手を抜かず対応していきたいところですね。