AndroidアプリでImageViewの角を丸く表示する方法を徹底解説

はじめに

Androidアプリ開発では、プロフィール画像やサムネイルなどの画像の角を丸く表示したい場面がよくあります。角丸の画像を取り入れるだけで、UI全体が柔らかく洗練された印象になります。

本記事では、BitmapShaderとCanvasを活用してImageViewの角を丸く加工する方法を、実際のコード付きでステップ形式に分けて解説します。

手順1：Android Studioで新規プロジェクトを作成する

Android Studioを起動し、メニューから「File」→「New Project」を選択します。必要な項目（アプリ名・パッケージ名・保存先など）を入力して、新しいプロジェクトを作成してください。この記事ではプログラミング言語としてJavaを使用します。

手順2：レイアウトファイル（activity_main.xml）を編集する

res/layout/activity_main.xmlに、以下のコードを記述します。TextViewとImageViewを縦方向に配置したシンプルなLinearLayout構成です。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="fill_parent"
        android:layout_margin="10dp"
        android:layout_height="fill_parent" />

</LinearLayout>

手順3：MainActivity.javaに角丸処理を実装する

src/MainActivity.javaに以下のコードを追加します。角丸処理のポイントは次の3つです。

• BitmapShader：元画像をシェーダーとしてPaintに設定する
• setAntiAlias(true)：アンチエイリアスを有効化し、角のギザギザ（ジャギー）を防ぐ
• drawRoundRect()：角丸の半径を100ピクセルとして描画する

package com.example.sample;

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textView = (TextView) findViewById(R.id.textView);
        textView.setTextColor(Color.RED);
        textView.setTextSize(20);

        ImageView mimageView = (ImageView) findViewById(R.id.imageView);

        // リソースから元画像（cat）をBitmapとして取得
        Bitmap mbitmap = ((BitmapDrawable) getResources().getDrawable(R.drawable.cat)).getBitmap();

        // 同じサイズの空のBitmapを作成
        Bitmap imageRounded = Bitmap.createBitmap(mbitmap.getWidth(), mbitmap.getHeight(), mbitmap.getConfig());

        Canvas canvas = new Canvas(imageRounded);
        Paint mpaint = new Paint();
        mpaint.setAntiAlias(true);
        mpaint.setShader(new BitmapShader(mbitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP));

        // 角丸半径100pxで矩形を描画（数値を変えると角丸の大きさを調整できます）
        canvas.drawRoundRect(new RectF(0, 0, mbitmap.getWidth(), mbitmap.getHeight()), 100, 100, mpaint);

        mimageView.setImageBitmap(imageRounded);
    }
}

※ 角丸の半径はdrawRoundRect()の第4引数・第5引数で指定しています。値を小さくすれば控えめな角丸に、大きくすれば円形に近づきます。

手順4：AndroidManifest.xmlを確認する

app/manifests/AndroidManifest.xmlは以下のように設定します。インターネット通信などを行わないため、特別なパーミッションは不要です。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.sample">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

アプリを実行して動作を確認する

それではアプリを実行してみましょう。実機のAndroidスマートフォンをPCに接続しているか、エミュレーターが起動していることを確認してください。

Android Studioのツールバーにある「Run」アイコンをクリックし、表示された一覧からデバイスを選択します。アプリが起動すると、角が丸く加工された画像が画面に表示されます。

補足：もっと簡単に角丸画像を作る代替手法

今回紹介した方法はBitmapを直接加工するため自由度が高い一方、コード量がやや多くなります。状況によっては、以下の手法の方が手軽でおすすめです。

• CardView：app:cardCornerRadius属性を指定するだけで、内包するImageViewごと角丸化できます。
• ShapeableImageView：Material ComponentsライブラリのshapeAppearanceOverlayを使えば、XMLだけで角丸・円形・切り欠きなどを柔軟に定義できます。
• ViewOutlineProvider + setClipToOutline(true)：API 21以降で使える標準機能で、追加ライブラリなしにクリップ角丸を実現できます。

対応OSバージョンやデザイン要件に合わせて、最適な手法を選択してください。