How can I get the same undefined ProgressBar as ICS with 2 rotating circles?

Question

I am currently writing an open source project that aims to port the famous Holo theme to previous versions of Android (since 1,6!!!)

Everything works fine and I am really proud of my work, but the problem I am facing now is to get the ProgressBar totally looking like the ICS one.

I used the same xml code than Android source: (progress_medium_holo.xml)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
             android:drawable="@drawable/spinner_48_outer_holo"
             android:pivotX="50%"
             android:pivotY="50%"
             android:fromDegrees="0"
             android:toDegrees="1080" />
    </item>
    <item>
        <rotate
             android:drawable="@drawable/spinner_48_inner_holo"
             android:pivotX="50%"
             android:pivotY="50%"
             android:fromDegrees="720"
             android:toDegrees="0" />
    </item>
</layer-list>

With same png:

spinner_76_outer_holo.png and spinner_76_inner_holo.png

enter image description here white pic =>

But unfortunately, I only get one circle...

If you don't understand what I mean, you can try this app on a pre-ICS device:

https://play.google.com/store/apps/details?id=com.WazaBe.HoloDemo

FULL SOURCE IS HERE: https://github.com/ChristopheVersieux/HoloEverywhere

Thank a lot for your help

enter image description here

Full source is here: https://github.com/ChristopheVersieux/HoloEverywhere — Waza_Be, Mar 18 '12 at 13:42
While viewing your source code I wondered, why you took the animation xmls into the layout folder. Put them into an anim folder, so other programmers won't be confused. — Martin Erhardt, Mar 19 '12 at 21:11
You should tell that to Google: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/progress_small_holo.xml — Waza_Be, Mar 19 '12 at 21:27
License is use it as you want, but donation is appreciated ;-) — Waza_Be, Mar 25 '12 at 19:52
Note that HoloEverywhere moved to https://github.com/Prototik/HoloEverywhere — MagicMicky, Jul 30 '13 at 17:29

score 11 · Accepted Answer · edited May 23 '17 at 11:53

Just found the answer here!

https://stackoverflow.com/a/8697806/327402

Very usefull post!

There is indeed a platform limitation, although it's not what you might think. The issue is that pre-API11, RotateDrawable had some crude code in it to require that the animation rotate clockwise by checking if toDegrees was greater than fromDegrees; if not, the two were forced equal to each other. If you modified your example to have the second item move in a forward direction (from 0 to 720, or even -720 to 0), both images would animate fine on all platforms; though I realize that defeats the purpose of what you're aiming for.

Take a look at the cached version Google Codesearch has of RotateDrawable.inflate(), which is the 2.3 version of the method used to turn the XML into the object, and you'll see what I mean.

RotateDrawable.java ...the offending code is around line 235...

    float fromDegrees = a.getFloat(
            com.android.internal.R.styleable.RotateDrawable_fromDegrees, 0.0f);
    float toDegrees = a.getFloat(
            com.android.internal.R.styleable.RotateDrawable_toDegrees, 360.0f);

    toDegrees = Math.max(fromDegrees, toDegrees); //<--There's the culprit

This takes an XML block like the second item that you have there, and turns it into a RotateDrawable that ends up with the same value for fromDegrees and toDegrees (in your case, 720), causing the image to simply stand still. You can visible test this by setting the start value to some value not a multiple of 360 (like 765). You'll see that the image still does not animate, but is rotated to the initial coordinate.

This awkward check was removed in the Honeycomb/ICS sources, which is why you can do backwards rotation on those platforms. Also, it doesn't look like there is a way to set these values from Java code, so a custom RotateDrawableCompat may be in your future :)

HTH

score 4 · Answer 2 · answered Mar 22 '12 at 03:48

As addendum to Profete162's answer: I know that Jake has managed to bypass this limitation in his implementation for SherlockActionBar and make both the spinning images visible. Looking at the source code for abs__progress_medium_holo.xml it looks like he simply flipped around the fromDegrees and toDegrees values, although there might be more to it that I'm not aware of.

score 0 · Answer 3 · answered Mar 18 '12 at 18:05

0

I'm not sure, but I think the <rotate> tag inside a layer-list is simply not compatible with Android 1.6.

By looking in the Donut (1.6) source code I see that the spinner is implemented in this way (progress_medium.xml):

<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/spinner_black_48"
    android:pivotX="50%"
    android:pivotY="50%"
    android:framesCount="12"
    android:frameDuration="100" />

You could try that with the Holo drawables.

Hope it helps,
Yuvi

answered Mar 18 '12 at 18:05

YuviDroid

1,546
11
12

LayerDrawable: Since: API Level 1 : Class Overview A Drawable that manages an array of other Drawables. These are drawn in array order, so the element with the largest index will be drawn on top. It can be defined in an XML file with the element. Each Drawable in the layer is defined in a nested http://developer.android.com/reference/android/graphics/drawable/LayerDrawable.html – Waza_Be Mar 19 '12 at 14:57

How can I get the same undefined ProgressBar as ICS with 2 rotating circles?

3 Answers3

Linked