Android: How to only rotate the drawable part of an imageView? - android

I have an ImageView object where both its Background and drawable attributes are set.
I need to animate the drawable part of the ImageView while the background stay still.
I can't find a way to do it...
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator"
android:drawable="#drawable/ic_popup_sync_1"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:duration="1200"
android:toDegrees="360" />
imageView.startAnimation(AnimationUtils.loadAnimation(context, animId));
Both the drawable and the background are rotating at the same time...

Set the background to a separate layout that sits behind the ImageView. Put both into a RelativeLayout where the background View is aligned to the ImageView by left, right, top, and bottom so that the background stays within the image's bounds. Then you can rotate the image freely.
EDIT:
Better yet, but the ImageView inside a layout and set the layout to WRAP_CONTENT. Set the layout's background to your background image.

Related

How to I prevent squeeze of item inside layout during scale animation?

I am using scale animation in Android relative layout , where I have a button and need to scale it to small size at one end .
I have used scale animation and it works fine , but it does have an icon which gets squeezed and its shape gets altered .
I want to prevent it and let the button take its shape without affecting the icon shape when it scales from left to right.
How can I achieve this?.
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:toXScale="0.1"
android:fromYScale="1.0"
android:toYScale="1.0"
android:duration="100"
android:pivotX="100%"
>
</scale>
It sounds like you don't really want a scale animation, you want a resize animation instead. A scale animation will act like you are resizing an image. A resize animation should just affect the layout parameters of the view without altering the size of the contents (just the positioning).
You can do this in XML with a property animator:
https://developer.android.com/guide/topics/resources/animation-resource#Property
Alternatively, here is an example of a resize animation in code:
https://stackoverflow.com/a/8162779/342745

Android ImageView Animation: moving an ImageView over other views depending on their position

I need a Java (Android) code for animation to animate (move) ImageView3 from ImageView1 to Imageview2. I need the center of the ImageView3 to match the center of the ImageView1 at start and center of the ImageView3 to match the center of the ImageView2 at the end of the animation. I made a gif to show what exactly I want to achieve
Copy paste this code in your animation file. Adjust the percentages to your needs.
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromYDelta="0"
android:toYDelta="80%"
android:fromXDelta="0"
android:toXDelta="80%"
>
</translate>

Android Drawable with fixed size element in center

I'm trying to create a placeholder drawable, which should contain a animated image in the center. However, I'd like the center item to be of a fixed width and height. Is this doable?
This is the animated center image XML:
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/loading"
android:pivotX="50%"
android:pivotY="50%"/>

Ho can I rotate/scale animate the drawable in FloatingActionButton or ImageView

For, example I am having a floating action button and I want to animate the drawable part of it.
The Floating Action Button should not move or scale. Only the drawable part can scale and rotate.
For Example, Here the tick mark coming at the end is animating inside the FAB button. I just want to achive the scaling/rotating animation of the drawable inside the FAB, But FAB should not scale or rotate.
Rotation can't be a problem as a circular shape rotation is not visible if i rotate the full FAB with RotateAnimation. But scaling and rotating both can't be done with the fab, as it is seen the background of FAB is scaling.
Note: I don't want to rotate the full FAB button. ONLY the drawable part.
for scaling button
you can do like
in anim folder/
scale_button.xml
<?xml version="1.0" encoding="utf-8"?>
<scale
android:fromXScale="1.4"
android:toXScale="1.0"
android:fromYScale="1.4"
android:toYScale="1.0"
android:fillAfter="false"
android:duration="1000"
android:pivotY="50%"
android:pivotX="50%"
android:interpolator="#anim/cycle" />
cycle.xml
<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator
xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="0"
/>
MainActivity.java
Animation shake = AnimationUtils.loadAnimation(this, R.anim.shake);
your_view_name.startAnimation(shake);

Rotating image in Imageview overlaps corners

I am using following code
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:duration="36000" />
and
Animation rotate = AnimationUtils.loadAnimation(this, R.anim.rotate);
findViewById(R.id.yourImageId).startAnimation(rotate);
rotate.reset();
rotate.start();
The intention was to rotate the image inside the Imageview.
Because this image view has a background colour, this appears to rotate the whole ImageView control and it starts to overlap the text view placed next to it, for example after 45 degree rotation one corner would be overlapping the view placed to left of it
I want to show that the container is not spinning, rather just the image.
I can not remove the background, this will disturb the UI feel in my particular case.
Is it a good idea to place this into a Layout and remove background from this imageview and spin ? or is there a smarter way to it.
You could overlap 2 views (one only with the background and the other with your image) and set the Animation to rotate only the view with the image.
Regards.

Categories

Resources