Android Animation leaves lines while moving

Question

I have 12 ImageButtons settings in a 3x4 grid using AbsoluteLayout. When the user presses the image button, it is enlarged to fill the screen, hold it, and then shrink to its original location.

The animation works, except that when the button is reduced, it sometimes leaves the lines behind. (I added the images below).

Is there a better way to achieve this animation? What can I do to prevent drawing errors that I get?

EDIT : Also, the lines disappear as soon as the compression animation ends, they are present only during the animation.

Here is my UDATED animation code

private void animateCard(final CardButton c){ this.isAnimating = true; CardPickerActivity.this.soundManager.playSound(c.name); Util.logD("Card:" + c.name + " clicked!"); final int growDuration = 750; final int holdDuration = 500; final int shrinkDuration = 500; c.bringToFront(); AnimationSet asGrow = new AnimationSet(true); float newScale = 2.0f; float newX = (CardPickerActivity.this.wDesk/2.0f - CardPickerActivity.this.cardSize/2.0f*newScale - c.getLeft())/newScale; float newY = (CardPickerActivity.this.hDesk/2.0f - CardPickerActivity.this.cardSize/2.0f*newScale - c.getTop() )/newScale; TranslateAnimation taG = new TranslateAnimation(0.0f, newX , 0.0f, newY); ScaleAnimation saG = new ScaleAnimation( 1.0f, newScale, 1.0f, newScale); taG.setRepeatCount(1); saG.setRepeatCount(1); taG.setRepeatMode(Animation.REVERSE); saG.setRepeatMode(Animation.REVERSE); asGrow.addAnimation(taG); asGrow.addAnimation(saG); asGrow.setDuration(growDuration); c.startAnimation(asGrow); } 

Here is the XML layout for the activity, ignore layout_x and layout_y, which I set later depending on the device screen:

 <?xml version="1.0" encoding="utf-8"?> <AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/cardLayout" android:layout_width="fill_parent" android:layout_height="fill_parent"> <com.myProject.CardButton android:id="@+id/btn1" android:text="1" android:layout_x="0px" android:layout_y="0px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn2" android:text="2" android:layout_x="10px" android:layout_y="10px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn3" android:text="3" android:layout_x="20px" android:layout_y="20px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn4" android:text="4" android:layout_x="30px" android:layout_y="30px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn5" android:text="5" android:layout_x="40px" android:layout_y="40px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn6" android:text="6" android:layout_x="40px" android:layout_y="40px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn7" android:text="7" android:layout_x="40px" android:layout_y="40px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn8" android:text="8" android:layout_x="40px" android:layout_y="40px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn9" android:text="9" android:layout_x="40px" android:layout_y="40px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn10" android:text="10" android:layout_x="40px" android:layout_y="40px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn11" android:text="11" android:layout_x="40px" android:layout_y="40px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <com.myProject.CardButton android:id="@+id/btn12" android:text="12" android:layout_x="40px" android:layout_y="40px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </AbsoluteLayout> 

Here is the CardButton class, its essentially an ImageButton with a few more member variables

 public class CardButton extends ImageButton { public CardButton(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public CardButton(Context context, AttributeSet attrs) { super(context, attrs); } public CardButton(Context context) { super(context); } public String name; public Bitmap image; public int soundRes; public int imageRes; public String customImagePath; public String customSoundPath; } 

Answer 1

So, I solved the problem, but not the way I like it.

At first, in the place of my code, I did not show that I called:

 cardButton.setBackgroundColor(Color.WHITE); 

If I commented on this line, the problem disappeared. This, however, created CardButtons, which looked like regular Android buttons. This is not how I wanted them to look, so I tried to set the white “style” button in several other ways. All this caused an error.

In an attempt to better understand what is happening and track down a possible error in Android or my code, I created a test project that included only one action with a 3x4 grid and nothing more. This test project contained one action and one XML file. Starting from the base grid, I could not reproduce the error, then I started adding more and more functions to the test application and, ultimately, recreated the original activity, but without error.

I thought that maybe something about my new implementation was better than the original, so I included a new test activity in my original project. However, when I ran the test activity from the original project, the error reappeared.

Now I have two actions that use identical code in different Android projects. One of them is the only activity in the project, and the other is part of a larger project with many activities. The version in the larger project shows an error, while the version in the stand-alone project does not. I am not sure how to interpret this, and I would really appreciate any feedback / comments on this.

So, until I can understand why I get a drawing error in the context of my larger application, I am going to use the background for Android.

Update . On a whim, I made the background 9Patch, which was white. This fixed the problem.

Answer 2

This may cause a problem. Once onAnimationEnd animation starts a little earlier than the actual animation.

You can create a custom view or layout and override its 'animationEnd' method and add an interface so that you can customize the listener.

Here is an example

CustomLayout Class

 public class CustomLayout extends LinearLayout { private LayoutAnimationListener mListner; public CustomLayout(Context context) { super(context); } public CustomLayout(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onAnimationEnd() { super.onAnimationEnd(); if(mListner != null){ mListner.onAnimationEnd(CustomLayout.this); } } @Override protected void onAnimationStart() { super.onAnimationStart(); if(mListner != null){ mListner.onAnimationStart(CustomLayout.this); } } public static interface LayoutAnimationListener { //Notifies the start of the animation. void onAnimationStart(CustomLayout cLayout); //Notifies the end of the animation. void onAnimationEnd(CustomLayout cLayout); } public void setLayoutAnimationListener(LayoutAnimationListener listener){ mListner = listener; } } 

Thus, in your activity you can use it as a regular linearlayout and instead of adding an animator to the animation, you can add it to the layout, for example

 com.blessan.CustomLayout layout = (com.blessan.CustomLayout)findViewById(R.id.counts_layout); LayoutAnimationListener layoutAnimListener = new LayoutAnimationListener() { @Override public void onAnimationStart(CustomLayout cLayout) { } @Override public void onAnimationEnd(CustomLayout cLayout) { } }; layout.setLayoutAnimationListener(layoutAnimListener); 

This might work for you. Give it a try.

Answer 3

Improvement / possible solution:

I have a code improvement, I hope it also fixes the update problem. Also feel that this is the right way to do what you are trying.

 growShrink.addAnimation(ta); growShrink.addAnimation(sa); holdAnim.setStartOffset(growDuration); // hold will start when grow stops. growShrink.addAnimation(holdAnim); growShrink.setRepeatCount(1); growShrink.setRepeatMode(Animation.REVERSE); growShrink.setInterpolator(new LinearInterpolator()); 

This will play the growing animation in reverse order. There is no need for the animated end of the listener to start holding and reducing the animation.

---

Alternative solution:

Add all your growing, holding, and shrinking animations to one AnimtaionSet. Set the initial hold and shrink offsets of the animation accordingly.

 // growAnim will start at 0. holdAnim.setStartOffset(growDuration); shrinkAnim.setStartOffset(growDuration+holdDuration);