I have a button animation which is defined to scale from 1.0 to 1.1 and back. The text of the button ("Next") scales up and then down, but the button size does not change.
1. Is this expected behavior?
2. There is a jerk when it restarts the animation. I assume this is happening at the loadAnimation() call. Is there a way to make that seamless?
public void startAnimation() {
final View nextButtonView = fragmentActivity.findViewById(R.id.game2NextButton);
nextButtonView.setVisibility(View.VISIBLE);
Animation anim = AnimationUtils.loadAnimation(fragmentActivity, R.anim.scale_button);
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationEnd(Animation arg0) {
Animation anim = AnimationUtils.loadAnimation(fragmentActivity, R.anim.scale_button);
anim.setAnimationListener(this);
nextButtonView.startAnimation(anim);
}
@Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationStart(Animation arg0) {
// TODO Auto-generated method stub
}
});
nextButtonView.startAnimation(anim);
}
scale_button.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
android:duration="1000"
android:fillBefore="false"
android:fillAfter="false"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.1"
android:toYScale="1.1" />
<set android:interpolator="@android:anim/decelerate_interpolator" >
<scale
android:duration="1000"
android:fillBefore="false"
android:fillAfter="false"
android:fromXScale="1.1"
android:fromYScale="1.1"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="1000"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
</set>
Next Button is in layout like so:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="@+id/game2NextButton"
style="@style/navigation_button"
android:contentDescription="@string/nextbutton"
android:text="@string/next" />
</LinearLayout>
Navigation button style:
<style name="navigation_button">
<item name="android:layout_width">320dp</item>
<item name="android:layout_height">80dp</item>
<item name="android:textColor">@drawable/text_color</item>
<item name="android:background">@drawable/navigation_button_shape</item>
<item name="android:onClick">onButtonClicked</item>
<item name="android:textSize">32sp</item>
<item name="android:textStyle">bold</item>
<item name="android:maxLines">1</item>
</style>
Button shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="@color/darkgrey2" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
Edit:
As Ercan suggests, then best approach is to use android:repeatMode="reverse"
as below. Thus the animation is implemented entirely on xml.
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fillAfter="true"
android:fillBefore="true"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/decelerate_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:toXScale="1.1"
android:toYScale="1.1" />