2020/12/17 に material-components 1.3.0-beta1 が公開されました。
1.3.0 では ProgressIndicator と TimePicker が新たに追加されており、この記事では ProgressIndicator について紹介しようと思います。
これまでの ProgressBar との違い
- Linear と Circular が別の View として扱うようになった
- MaterialTheming に準拠するようになった
- 色の指定がしやすくなった
- 角丸の指定ができるようになった
- 表示・非表示のアニメーションが使えるようになった
基本的な使い方
これまで style で Linear か Circular を出し分けていましたが、material-component 版では別の View として使います。
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
常にアニメーションさせたい場合は android:indeterminate="true" を設定する。
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true" />
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true" />
app:indicatorDirectionLinear (Circular の場合は app:indicatorDirectionCircular) でインジケータの流れの向きも指定できる。
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
app:indicatorDirectionLinear="endToStart" />
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminate="true"
app:indicatorDirectionCircular="counterclockwise" />
角丸
app:trackCornerRadius でインジケータの角丸の設定ができます。
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:trackCornerRadius="6dp" />
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:trackCornerRadius="6dp" />
色を変える
app:indicatorColor と app:trackColor で色を変えることができます。
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:trackColor="@color/blue"
app:indicatorColor="@color/yellow" />
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:trackColor="@color/blue"
app:indicatorColor="@color/yellow" />
色の配列を使うことで複数の色を合わせたインジケータにすることができる。
app:indeterminateAnimationType="disjoint/contiguous" でインジケータのアニメーションの種類も変えることができる。
<integer-array name="custom_progress_colors">
<item>@color/yellow</item>
<item>@color/blue</item>
<item>@color/red</item>
</integer-array>
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:indeterminateAnimationType="disjoint"
app:indicatorColor="@array/custom_progress_colors" />
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:indeterminateAnimationType="contiguous"
app:indicatorColor="@array/custom_progress_colors" />
<com.google.android.material.progressindicator.CircularProgressIndicator
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:indicatorColor="@array/custom_progress_colors" />
Standalone Indicator
インジケータの Drawable も提供されるようになり、Chip などに Indicator を埋め込むことができます。
val progressIndicatorSpec = CircularProgressIndicatorSpec(
requireContext(),
null,
0,
R.style.Widget_MaterialComponents_CircularProgressIndicator_ExtraSmall
)
val indeterminateDrawable = IndeterminateDrawable.createCircularDrawable(
requireContext(),
progressIndicatorSpec)
binding.chip.chipIcon = indeterminateDrawable
CircularProgressIndicatorSpec で Indicator のサイズや向きを設定できます。上記の例では @style/Widget.MaterialComponents.CircularProgressIndicator.ExtraSmall の style からサイズなどを取得して設定している。
この他にも表示・非表示のアニメーションの設定もできたり、インジケータの幅も変えることができます。
これまでの ProgressBar よりも表現できる幅が広がり、色の変更もしやすくなっているのでよきタイミングで置き換えていきたいですね。