Android で Custom Progress Bar を作る方法

Progress Bar といっても、バー状のものではなく、indeterminate モードを自作する方法です。 indeterminate モードは、終了時間が未定の時に使用される周期的なアニメーションを指します。

indeterminateDrawable を記述すればよい

実は、やり方は簡単。 ProgressBar の indeterminateDrawable に Drawable Animation を指定すれば良いのです。注意点としては、layout_width, layout_height に wrap_content が使えないということ。サイズを指定する必要があります。

/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <ProgressBar
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_centerInParent="true"
        android:indeterminateDrawable="@drawable/animation01" />
 
</RelativeLayout>

Drawable Animation の作り方

Drawable Animation はリンク先にもあるようにパラパラ漫画の要領でアニメーションを作成します。

例えば、ic_signal_wifi_[0-4].png のようなファイルを用意し、以下のように animation01.xml に記述します。

/res/drawable/animation01.xml

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false">
    <item android:duration="200" android:drawable="@drawable/ic_signal_wifi_0_bar" />
    <item android:duration="200" android:drawable="@drawable/ic_signal_wifi_1_bar" />
    <item android:duration="200" android:drawable="@drawable/ic_signal_wifi_2_bar" />
    <item android:duration="200" android:drawable="@drawable/ic_signal_wifi_3_bar" />
    <item android:duration="200" android:drawable="@drawable/ic_signal_wifi_4_bar" />
</animation-list>

あとは、上記のように indeterminateDrawable 属性に指定すれば、以下のような Custom Progress Bar が完成します。

さらに簡易的な方法もある

単純な回転の場合、 Animation Resources の RotateDrawable を使えば、リソースが一つしかなくても回転アニメーションを作成できます。

例えば以下のように¹。

/res/drawable/animation02.xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="-360"
    android:drawable="@drawable/ic_sync"/>

この方法、速度指定できないですし、細かい制御には向いていません。

参考

速度を N倍にする方法はあるみたい

AndroidのRotateDrawableで回転速度を調整する - scache’s blog

-360 にしているのは回転方向を反時計周りにするためです。 ↩

穀風