[Android] プロフィール画像とかでよく見る画像を丸にくり抜くやり方 [メモ]

はじめに

プロフィール画像とかでよく見る、画像を円型に表示させる方法。色々なやり方があると思うが、今回はMaterial ComponentのShapableImageViewを使います。

目標

Gradle

implementation 'com.google.android.material:material:1.2.1'

実装

shapeAppearanceOverlay属性に任意のスタイルを当てはめると簡単に円型やひし形などカスタマイズできます。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/black"
    >
    <!--   円 -->
    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:layout_marginTop="80dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@id/rhombus"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Circle"
        app:srcCompat="@drawable/test"
        />
    <!--   ひし形 -->
    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/rhombus"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:scaleType="centerCrop"
        android:layout_marginTop="80dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/circle"
        app:layout_constraintTop_toTopOf="parent"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Rhombus"
        app:srcCompat="@drawable/test"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

    <style name="ShapeAppearanceOverlay.App.Circle" parent="" >
        <item name="cornerSize">50%</item>
    </style>

    <style name="ShapeAppearanceOverlay.App.Rhombus" parent="" >
        <item name="cornerSize">50%</item>
        <item name="cornerFamily">cut</item>
    </style>

他にも様々なカスタマイズができるようです。参考