I recently ran across a problem while building a toolbar in Android. The toolbar is dynamically resizable based on user preference, and contains multiple ImageButtons which must also resize with the toolbar. These buttons are, of course, children of the toolbar itself. Several of these buttons have animations that play when they are interacted with, which were working normally before implementing the resize system. After completing the resize calculation routine, I noticed that one icon in particular, a standard 'gear'-style settings icon, distorted when rotating when the toolbar was scaled down or up. Here is the icon in its normal state:
And here it is while partway through animating:
The image during its animation
As you can see here, the normally circular icon is becoming an ellipse during its animation cycle. I tracked the problem down to the way I scaled the toolbar, as such:
sidebar.setScaleX(multiplier);
I can only assume that this is because the animation, which is fired like so:
findViewById(R.id.main_sidebar_settings_button).animate().rotation(359.0f).setDuration(500).setInterpolator(new LinearInterpolator());
is calculating its rotation off of the non-scaled version of the gear. However, the animation is only distorting in one axis, so my question is as such: since the gear icon is a child of the toolbar, which is having its scale changed, the icon must be inheriting its horizontal scale from the toolbar itself. I am changing its vertical scale to match. So, short of taking the icon out of its parent layout (a RelativeLayout), and scaling it independently of the toolbar, is there any way I can force it to animate with the scale it inherited from its parent, and not distort in this way? Thanks in advance!
