Animate Two Layer Drawable Items Pre-Honeycomb - android

I am trying to animate two layers of a drawable to achieve the effect of the post-Honeycomb indeterminate progress indicator. The XML is very straightforward but it would seem that only one layer will animate when run on platforms prior to Honeycomb.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:drawable="#drawable/abs__spinner_48_outer_holo"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="1080" />
</item>
<item>
<rotate
android:drawable="#drawable/abs__spinner_48_inner_holo"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="720"
android:toDegrees="0" />
</item>
</layer-list>
Is this simply a limitation of these platforms or is there an alternate syntax that I can use (either in general or specifically targetted at pre-API11) to achieve the desired functionality?

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

Seems like the quick and dirty solution to get this working in pre honeycomb is to just flip the from and to in the second rotate. This is not ideal but at least the thing spins around (even if it's a bit more "boring"). This is how ABS seems to have solved it.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:drawable="#drawable/abs__spinner_48_outer_holo"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="1080" />
</item>
<item>
<rotate
android:drawable="#drawable/abs__spinner_48_inner_holo"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="0"
android:toDegrees="720" /> <!-- Like this -->
</item>
</layer-list>

Related

android run multiple animations on multiple views parallel

Here is the thing:I have a problem in presenting multiple animations
on different views parallel.
I have one button which animates scaling, one image which animates rotation and another two images which animate scaling.
The problem is that on many devices the animations are not smooth,they loose frames. However, when I use only one or two animations the animations are smooth.
edit:
Here is the animation xml code:
<rotate android:fromDegrees="0" android:toDegrees="87" xmlns:android="http://schemas.android.com/apk/res/android" android:duration="1000"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:pivotX="50%" android:pivotY="50%">
<!--
android:fillAfter="false"
android:startOffset="0"
-->
</rotate>

How translate object accurately with different kind of value on the screen? Searching for truth

Hi I have a problem with controlling position of my object on the screen. When I create activity every object on the screen is placed with animation and troubles starting here. Firstly I tried to placed all things with pixel coordinates, which based on height and width of screen. I want to take it from device when activity starts. During the coding I think the better way will be use the % values cause I don't need to think about diferent screen resolution and stuff like this.
The picture shows, how I thought the screen looks with different values,but I'm wrong.I make the assumption, that the layout match to the parent, so it have nearly this same size as the screen
Cause the range of values for % and %p is from -100 to 100, so where is -100%, when I put something like -60%p I can't see it on the screen. I try to play with the object by changing the values and see results, but for example
object represented by
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:fillEnabled="true"
android:duration="3000"
android:startOffset="7000">
<translate
android:fromXDelta="2600"
android:toXDelta="0%p"
android:fromYDelta="-10"
android:toYDelta="-10%p"
/>
<rotate
android:fromDegrees="359"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
/>
is higher on the screen then object represented by:
<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:fillEnabled="true"
android:duration="3000"
android:startOffset="12000">
<rotate
android:fromDegrees="359"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
/>
<translate
android:fromXDelta="-599"
android:toXDelta="40%p"
android:fromYDelta="-499"
android:toYDelta="-10%p"
/>
I think they should be on this same vertical level, because android:toYDelta is the same.
When we are putting the values to xml code, we are placing the right top corner of the object in my opinion.
Please clear the way I think about coordinates of different type, and where are mistakes?
I would be grateful for every answer.

How do I animate, Moving an ImageView on a circular path with certain radius in android?

Please Find the attachment for my image.
https://docs.google.com/file/d/0B_c-SDSO63obS0ZyQ1dsOXdUQmc/edit?usp=sharing
My task is, animate that GONG type of image up to some time with clock wise and anti clock wise.
For that i did some coding in animation but i didn't succeed. I am using both translate and rotate.
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="1500" />
and rotate functions,
<rotate android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="600"
android:repeatMode="restart"
android:repeatCount="infinite"
android:interpolator="#android:anim/cycle_interpolator"/>
Actually my idea is in a specific time i want to move with specific angle. But i don't know the correct way to solve this task.
Please help me. sorry for my English.
All answers are acceptable
Thanks
Shankar
You have divided a circle in 12 parts in that image and that equals to 30 degrees per segment.
you have to rotate it like this to look proper
rotateDegree=[steps]*30;
use AlarmManager to trigger animation in specific time
EDIT:
to move your image in circular path with a radius you have to give a different pivot x and y
you can find it by tryng with
pivotX= 0 and pivotY=(negative value)
I hope this helps.

Can I make an alias for a bitmap drawable in Android?

I have defined a bitmap in /drawable/app_background_raw as such:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/actual_png_file"
android:tileMode="repeat" />
Now I want two copies of this defined - one as it is unchanged, and one rotated 90 degerees so that I can use it in portrait mode. I can create the rotated one as such:
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="90"
android:toDegrees="90"
android:pivotX="0%"
android:pivotY="0%"
android:drawable="#drawable/app_background_raw">
</rotate>
..but how do I, with least overhead, create an unchanged copy of app_background_raw? I can obviously create another RotationDrawable rotated 0 degrees, but that feels a bit silly. Suggestions?
Update
This was a bad idea for this scenario, as Android seems to scale the bitmap for portait mode before I can rotate, but in any case I'm interested in knowing what the simplest way of creating an alias for a drawable is.

Rotating A Dial in Android

I need to rotate my image in my on touch listener when the user touches it. I am rotating a dial graphic, so it needs to rotate around its center point. Does anyone have an example?
I'd refer to the actual android documentation for animation here: http://developer.android.com/guide/topics/resources/animation-resource.html
As for setting up the rotation in an xml, it will look something like:
<set android:interpolator="#anim/linear_interpolator">
<rotate
android:fromDegrees="180"
android:toDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="0"
android:duration="1000">
</rotate>
</set>
That is for a 180 rotation.

Categories

Resources