android - カスタムプログレスバーを作成

Question

下の画像のようなカスタムプログレスバーを作成したい

1秒ごとに黒い円が赤い円で消えていくので、以下のコードを使用しました。フレームごとのアニメーションを使用する場合、60枚の画像が必要だったので、代わりに以下のコードを使用しました

<item>
    <shape android:shape="oval" >
        <gradient
            android:centerColor="#e9a30f"
            android:endColor="#953308"
            android:gradientRadius="300"
            android:startColor="#923008"
            android:type="radial"
            android:useLevel="false" />
        <stroke
            android:width="1.0dip"
            android:color="#953308" />
    </shape>
</item>
<item>
    <shape
        android:innerRadiusRatio="4.5"
        android:shape="ring"
        android:thicknessRatio="6.0"
        android:useLevel="false" >
        <size
            android:height="48dp"
            android:width="48dp" />

        <gradient
            android:centerColor="#000000"
            android:endColor="#ffffffff"
            android:startColor="#000000"
            android:type="sweep"
            android:useLevel="false" />

        <stroke
            android:width="1.0dip"
            android:color="#ffffffff" />
    </shape>
</item>
<item>
    <shape
        android:bottom="1.0dp"
        android:innerRadiusRatio="4.5"
        android:shape="ring"
        android:thicknessRatio="6.0"
        android:top="1.0dp"
        android:useLevel="true" >
        <size
            android:height="48dp"
            android:width="48dp" />

        <solid android:color="#ff0000" />

        <stroke
            android:width="1.0dp"
            android:color="#ffffffff" />
    </shape>
</item>

このコードを実行すると、画像は以下のようになります

しかし、ここでは楕円形が大きく見えることがわかります。その楕円形を黒い円に入れたいのですが、xml で体の助けを借りてください。