Androidで円形のカスタムプログレスバーを作成する方法を徹底解説

はじめに

このチュートリアルでは、Androidアプリで円形（サークル型）のカスタムプログレスバーを作成する方法を解説します。標準のProgressBarウィジェットとdrawableリソースを組み合わせることで、リング状のデザインで進捗率を美しく視覚化できます。

完成イメージ

画面中央に現在の進捗率（%）を示すテキストを重ね、その周囲には背景として灰色のリングを配置し、緑色のリングが0%から100%まで滑らかに伸びていくシンプルなUIを作成します。

ステップ1：Android Studioで新規プロジェクトを作成

Android Studioのメニューから [File] → [New Project] を選択し、必要な項目をすべて入力して新しいプロジェクトを作成しましょう。

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

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_centerInParent="true"
        android:indeterminate="false"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="100" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:text="25%"
        android:layout_centerInParent="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="24sp" />

</RelativeLayout>

ここでは、親レイアウトの中央に250dp四方のProgressBarと、同じサイズのTextViewを重ねて配置しています。

ステップ3：drawableリソース（circularprogressbar.xml）を作成

res/drawable/circularprogressbar.xml を新規作成し、以下のコードを記述します。

<layer-list xmlns:android="https://schemas.android.com/apk/res/android">

    <!-- 背景：灰色のリング -->
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">
            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>

    <!-- 前景：進捗を示す緑色のリング -->
    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">
            <shape
                android:innerRadiusRatio="6"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true">
                <gradient
                    android:centerColor="#00FF00"
                    android:endColor="#00FF00"
                    android:startColor="#00FF00"
                    android:type="sweep" />
                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />
            </shape>
        </rotate>
    </item>

</layer-list>

コードのポイント

• shape="ring"：リング形状を定義します。innerRadiusRatio（内径の比率）と thicknessRatio（線の太さの比率）で見た目を自由に調整できます。
• rotate（回転）：fromDegrees="270" を指定することで、進捗の開始位置が上部（12時の方向）からになります。
• layer-list：背景となる灰色のリングの上に、進捗を示す緑色のリングを重ねて描画しています。

ステップ4：MainActivity.java を実装

src/MainActivity.java に以下のコードを追加します。

import androidx.appcompat.app.AppCompatActivity;
import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    int status = 0;
    private Handler handler = new Handler();
    TextView textView;

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

        Resources resources = getResources();
        Drawable drawable = resources.getDrawable(R.drawable.circularprogressbar);
        final ProgressBar progressBar = findViewById(R.id.circularProgressbar);
        progressBar.setProgress(0);
        progressBar.setSecondaryProgress(100);
        progressBar.setMax(100);
        progressBar.setProgressDrawable(drawable);
        textView = findViewById(R.id.textView);

        new Thread(new Runnable() {
            @Override
            public void run() {
                while (status < 100) {
                    status += 1;
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            progressBar.setProgress(status);
                            textView.setText(String.format("%d%%", status));
                        }
                    });
                    try {
                        Thread.sleep(16);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

このコードでは、バックグラウンドスレッドでステータス値を0から100まで1ずつ増加させながら、Handlerを介してメインスレッド上のProgressBarとTextViewを更新しています。約16ミリ秒間隔での更新により、60fps相当の滑らかなアニメーション効果を実現しています。

ステップ5：AndroidManifest.xml の確認

本サンプルでは特別な権限は不要のため、AndroidManifest.xml はデフォルトのままで問題ありません。

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

それでは、アプリケーションを実行してみましょう。実機のAndroidスマートフォンをPCに接続した状態を前提としています。Android Studioでプロジェクトのアクティビティファイルを開き、ツールバーの実行アイコン をクリックします。接続中のモバイルデバイスを選択して起動すると、スマートフォンの画面に下図のような円形プログレスバーが表示され、0%から100%までアニメーションしながら進んでいく様子を確認できます。