[Android] MaterialCardView を使って画像を角丸表示する

1.はじめに

Android で画像を角丸化したいのですが、
何か属性をいじればサクッとできるのかと思いきやちょっと手間がかかりました!
(iOSならサクッとできるのに!)

ということで本ポストでは MaterialCardView を使って画像を角丸化する手法をまとめます。
参照: Android Developers: MaterialCardView

2.前提条件

Mac: macOS Big Sur 11.5.1
Android Studio: Arctic Fox | 2020.3.1 Patch 3
Gradle: 7.0.2

3.事前準備: まず素の画像を表示する

レイアウトXML に以下のように記述します。

<?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">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/sample_image" />

</androidx.constraintlayout.widget.ConstraintLayout>

シンプルに200×200 の画像を画面中央に配置するレイアウトです。

エミュレータで見るとこんな感じです。

画面キャプチャ

ちなみに画像は以下を「sample_image」というリソース名でプロジェクトに追加しています。
(必要なら自由に使ってください)

sample_image

画像の追加方法がうろ覚えな方は、例えば本ブログの
Web-y.dev: [Android] プロジェクト作成からViewBinding を使って画像表示するまでをまとめる
を参考にしていただければと思います。

4.角丸化する

いよいよ角丸化します。

冒頭で言った通り、MaterialCardView を使って丸くします。

レイアウトXMLを以下のように編集します。

<?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">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:cardCornerRadius="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:srcCompat="@drawable/sample_image" />
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

ImageView に一枚 MaterialCardView のレイヤーを被せてやるイメージです。
そうすると以下のように画像が角丸になりました!

角丸化された

一点注意点として、アプリのテーマが MaterialComponents かその子テーマでない場合、
エラーが発生することがあるようです。

その場合は以下のように
MaterialComponents などのテーマを指定すれば回避できるかと思います。

android:theme=”@style/Theme.MaterialComponents.Light”

参考: Stack Overflow: https://stackoverflow.com/a/61244323

また、MterialCardViewFrameLayout を継承しています。

そのため、画像の親要素が FrameLayout だった場合は、
基本的にはそれを MaterialCardView に変更するだけで角丸化に対応できるかと思います。

5.さいごに

iOS だと

View.layer.cornerRadius

のように一行噛ませるだけで角丸化できたので、
それよりは手間がかかりますね😇

以上です。
お疲れ様でした!

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。