AndroidでCircularImageView（円形画像）を作成する方法を徹底解説

本記事では、AndroidアプリでCircularImageView（円形の画像ビュー）を作成する方法を、初心者にもわかりやすいようステップごとに解説します。

ステップ1：新規プロジェクトの作成

まず、Android Studioで新しいプロジェクトを作成します。メニューから「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを新規作成してください。

ステップ2：CircularImageViewライブラリの導入

円形ビューを実現するには、build.gradleファイルにCircularImageViewライブラリを追加します。以下のように依存関係を記述しましょう。

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    implementation 'com.mikhaellopez:circularimageview:3.2.0'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

ステップ3：MainActivity.javaの実装

変更後のメインアクティビティファイルMainActivity.javaの内容は以下の通りです。このファイルには、アクティビティの基本的なライフサイクルメソッドを含めることができます。今回はactivity_main.xmlの中でCircularImageViewを作成しています。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

ステップ4：レイアウトファイル（activity_main.xml）の編集

CircularImageViewを組み込むためのres/layout/activity_main.xmlの内容は以下の通りです。

<?xml version = "1.0" encoding = "utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context = ".MainActivity">
<LinearLayout
    android:layout_width = "match_parent"
    android:gravity = "center_horizontal"
    android:orientation = "vertical"
    android:layout_height = "match_parent">
    <com.mikhaellopez.circularimageview.CircularImageView
        android:layout_width = "250dp"
        android:layout_height = "250dp"
        android:src = "@drawable/image"
        app:civ_border_color = "#EEEEEE"
        app:civ_border_width = "4dp"
        app:civ_shadow = "true"
        app:civ_shadow_radius = "10"
        app:civ_shadow_color = "#8BC34A"/>
    <TextView
        android:text = "Mohammad Mohtashim"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent"
        android:layout_marginTop = "20dp"
        android:textSize = "20sp"
        android:textAlignment = "center"/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>

上記のレイアウトでは、CircularImageViewをcom.mikhaellopez.circularimageview.CircularImageViewとして宣言し、drawableフォルダに格納した「image」というIDの画像を読み込んでいます。

アプリの実行と確認

それでは、アプリケーションを実行してみましょう。実機のAndroidスマートフォンがパソコンに接続されているものとします。Android Studioでプロジェクト内のいずれかのアクティビティファイルを開き、ツールバーのRunアイコンをクリックしてください。実行先のデバイスとして自分のスマートフォンを選択すると、端末上に次のようなデフォルト画面が表示されます。

CircularImageViewの主なプロパティ一覧

• app:civ_border − 枠線の表示・非表示を設定します。デフォルト値はtrue（表示）です。

• app:civ_border_color − 枠線の色を指定します。デフォルトの色は白です。

• app:civ_border_width − 枠線の幅を指定します。デフォルト値は4dpです。

• app:civ_background_color − 背景色を指定します。デフォルトの背景色は白です。

• app:civ_shadow − 画像に影を付けるかどうかを設定します。デフォルト値はfalseのため、影が必要な場合はtrueに変更してください。

• app:civ_shadow_color − 影の色を指定します。デフォルト値は黒です。

• app:civ_shadow_radius − 影の半径を指定します。デフォルト値は8.0fです。

• app:civ_shadow_gravity − 影の位置（重力方向）を指定します。デフォルト値はbottom（下）です。