Blog スタッフブログ

Android システム開発

[Android][Kotlin]円形プログレスバーの表示の仕方

システム開発担当のTFです。

※Android10対応（他バージョンの場合、細かい部分等が異なる事があります）

iosの円形プログレスバーの表示はこちら

やり方

  • プログレスバーの見た目をカスタマイズしたxmlを「res/drawable/」に作成する
  • レイアウトでProgressBarを配置し、progressDrawableに作成したxmlをセットする
  • コードで、配置したProgressBarのprogressに値を入れる

参考

　　【Android】円形のインジケータ -> ProgressBarクラスの応用

サンプル

<!-- 見た目の作成 -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/progress">
        <shape
            android:innerRadiusRatio="3"  <!-- 内円の半径 -->
            android:shape="ring"          <!-- 円形 -->
            android:thicknessRatio="20.0" <!-- リングの厚さ -->
            android:useLevel="true">

            <!-- 色設定 -->
            <gradient
                android:centerColor="#40B92A"
                android:endColor="#40B92A"
                android:startColor="#40B92A"
                android:type="sweep" />
        </shape>
    </item>
</layer-list>
<!-- プログレスバーのセット -->
<ProgressBar
	android:id="@+id/progressBar"
	style="?android:attr/progressBarStyleHorizontal"
	android:layout_width="80dp"                             <!-- 横幅 -->
	android:layout_height="80dp"                            <!-- 高さ -->
	android:progress="0"                                    <!-- 初期位置 -->
	android:progressDrawable="@drawable/ring_progress_bar"  <!-- 作成した見た目のセット -->
	android:rotation="-90"                                  <!-- 真上からスタート -->
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintLeft_toLeftOf="parent"
	app:layout_constraintRight_toRightOf="parent"
	app:layout_constraintTop_toTopOf="parent" />

// プログレスのセット
// 進捗が変わるたびにこの関数を呼び出す
private fun setProgressBar(progress: Int)
{
	var value:Int = progress
	if( value < 0 ) value = 0
	if( value > 100 ) value = 100

	// UI更新の為、runOnUiThread内で行う
	runOnUiThread {
		binding.progressBar.progress = value
		// progressの数値を表示する場合、数字表示用のTextViewを別途用意する
		// binding.progressTextView.text = value.toString()
	}
}
戻る一覧へ戻る