19

I have this icon:

enter image description here

And when i press my item in a listview i want it to rotate 180°. When i click again i want it to rotate another 180° so it get's to it's original position.

First i tried:

view.animate().rotation(180).setDuration(500).start();

But it only fires once. After that i tried:

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:fillAfter="true" android:fillEnabled="true"> <rotate android:duration="500" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="180" /> </set>

But with that the animation always starts with the arrow showing to the buttom and rotating to the top even if the arrow already shows to the top.

So how can i make that working?

Improve this question

4 Answers 4

Reset to default
31

User following code to click event of image:

ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotation",rotationAngle, rotationAngle + 180); anim.setDuration(500); anim.start(); rotationAngle += 180; rotationAngle = rotationAngle%360;

and make rotationAngle a global variable:

int rotationAngle = 0;
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

25

For another solution, if you want it to rotate 180° every time the view is pressed then try this instead,

rotationAngle = rotationAngle == 0 ? 180 : 0; //toggle mExpandArrow.animate().rotation(rotationAngle).setDuration(500).start();

Just define rotationAngle initially as,

int rotationAngle = 0;
Improve this answer

1 Comment

Great.. it awesome.
2

You can do this using animatedvectordrawable. On prelolipop devices this works only if you using support lib v28 or above

for more details see this repos: https://github.com/alexjlockwood/adp-delightful-details

In layout add:

<ImageView android:id="@+id/expandcollapse" android:layout_width="128dp" android:layout_height="128dp" android:layout_margin="4dp" android:contentDescription="@null" android:scaleType="fitCenter" app:srcCompat="@drawable/asl_checkable_expandcollapse" />

In Fragment or in Activity

expandCollapseView.setOnClickListener(v -> { final int[] stateSet = {android.R.attr.state_checked * (isChecked ? 1 : -1)}; expandCollapseView.setImageState(stateSet, true); });

asl_checkable_expandcollapse.xml

<?xml version="1.0" encoding="utf-8"?> <animated-selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/expanded" android:drawable="@drawable/vd_checkable_expandcollapse_expanded" android:state_checked="true"/> <item android:id="@+id/collapsed" android:drawable="@drawable/vd_checkable_expandcollapse_collapsed"/> <transition android:drawable="@drawable/avd_checkable_expandcollapse_collapsed_to_expanded" android:fromId="@id/collapsed" android:toId="@id/expanded"/> <transition android:drawable="@drawable/avd_checkable_expandcollapse_expanded_to_collapsed" android:fromId="@id/expanded" android:toId="@id/collapsed"/> </animated-selector>

vd_checkable_expandcollapse_expanded.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:tint="?attr/colorControlNormal" android:viewportHeight="24" android:viewportWidth="24"> <group android:name="chevron" android:translateX="12" android:translateY="9"> <group android:name="leftBar" android:rotation="135"> <group android:translateY="-3"> <path android:fillColor="@android:color/white" android:pathData="@string/path_pathmorph_expandcollapse"/> </group> </group> <group android:name="rightBar" android:rotation="45"> <group android:translateY="3"> <path android:fillColor="@android:color/white" android:pathData="@string/path_pathmorph_expandcollapse"/> </group> </group> </group> </vector>

vd_checkable_expandcollapse_collapsed.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="24dp" android:height="24dp" android:tint="?attr/colorControlNormal" android:viewportHeight="24" android:viewportWidth="24"> <group android:name="chevron" android:translateX="12" android:translateY="15"> <group android:name="leftBar" android:rotation="135"> <group android:translateY="3"> <path android:fillColor="@android:color/white" android:pathData="@string/path_pathmorph_expandcollapse"/> </group> </group> <group android:name="rightBar" android:rotation="45"> <group android:translateY="-3"> <path android:fillColor="@android:color/white" android:pathData="@string/path_pathmorph_expandcollapse"/> </group> </group> </group> </vector>

avd_checkable_expandcollapse_collapsed_to_expanded.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" android:drawable="@drawable/vd_checkable_expandcollapse_collapsed"> <target android:name="chevron"> <aapt:attr name="android:animation"> <objectAnimator android:duration="250" android:interpolator="@android:interpolator/fast_out_slow_in" android:propertyName="translateY" android:valueFrom="15" android:valueTo="9"/> </aapt:attr> </target> <target android:name="leftBar"> <aapt:attr name="android:animation"> <objectAnimator android:duration="200" android:interpolator="@interpolator/pathmorph_expandcollapse" android:propertyName="rotation" android:valueFrom="135" android:valueTo="45" android:valueType="floatType"/> </aapt:attr> </target> <target android:name="rightBar"> <aapt:attr name="android:animation"> <objectAnimator android:duration="200" android:interpolator="@interpolator/pathmorph_expandcollapse" android:propertyName="rotation" android:valueFrom="45" android:valueTo="135" android:valueType="floatType"/> </aapt:attr> </target> </animated-vector>

avd_checkable_expandcollapse_expanded_to_collapsed.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt" android:drawable="@drawable/vd_checkable_expandcollapse_expanded"> <target android:name="chevron"> <aapt:attr name="android:animation"> <objectAnimator android:duration="250" android:interpolator="@android:interpolator/fast_out_slow_in" android:propertyName="translateY" android:valueFrom="9" android:valueTo="15"/> </aapt:attr> </target> <target android:name="leftBar"> <aapt:attr name="android:animation"> <objectAnimator android:duration="200" android:interpolator="@interpolator/pathmorph_expandcollapse" android:propertyName="rotation" android:valueFrom="135" android:valueTo="45" android:valueType="floatType"/> </aapt:attr> </target> <target android:name="rightBar"> <aapt:attr name="android:animation"> <objectAnimator android:duration="200" android:interpolator="@interpolator/pathmorph_expandcollapse" android:propertyName="rotation" android:valueFrom="45" android:valueTo="135" android:valueType="floatType"/> </aapt:attr> </target> </animated-vector>
Improve this answer

Comments

0

you can try this on your list adapter 

 btnOpen.setOnClickListener(v -> { if (btnOpen.getTag()!=null && btnOpen.getTag().toString().equals("180")){ ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotation",180, 0); anim.setDuration(time); anim.start(); btnOpen.setTag(""); } else { ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotation",0, 180); anim.setDuration(time); anim.start(); btnOpen.setTag(180+""); } });

This work with tag on your list

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.