Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature suggestion - Showing an animated icon #27

Open
cyc1ingsir opened this issue Jul 12, 2022 · 0 comments
Open

Feature suggestion - Showing an animated icon #27

cyc1ingsir opened this issue Jul 12, 2022 · 0 comments

Comments

@cyc1ingsir
Copy link

cyc1ingsir commented Jul 12, 2022

I'd like to show an animated vector drawable (https://developer.android.com/guide/topics/graphics/drawable-animation#AnimVector) as action icon.
I'll attach an self designed animated trash can example of an animated vector at the end. You may preview the animation within Android Studio.

For the proof of concept, I extended the decorate function (and adding the member and setter etc)
Find an example for the left swipe below.

              if ( swipeLeftAnimatedActionIconId != 0 && dX < - iconHorizontalMargin ) {
                    AnimatedVectorDrawable icon = (AnimatedVectorDrawable) ContextCompat.getDrawable(recyclerView.getContext(), swipeLeftAnimatedActionIconId);
                    if ( icon != null ) {
                        iconSize = icon.getIntrinsicHeight();
                        int halfIcon = iconSize / 2;
                        int top = viewHolder.itemView.getTop() + ((viewHolder.itemView.getBottom() - viewHolder.itemView.getTop()) / 2 - halfIcon);
                        imgLeft = viewHolder.itemView.getRight() - iconHorizontalMargin - mSwipeLeftPadding[1] - halfIcon * 2;
                        icon.setBounds(imgLeft, top, viewHolder.itemView.getRight() - iconHorizontalMargin - mSwipeLeftPadding[1], top + icon.getIntrinsicHeight());
                        if (swipeLeftActionIconTint != null)
                            icon.setColorFilter(swipeLeftActionIconTint, PorterDuff.Mode.SRC_IN);
                        icon.draw(canvas);
                        icon.start();
                    }
                }

Basically it's just casting the icon to AnimatedVectorDrawable (there is a AnimatedVectorDrawableCompat version available too, but this didn't work out of the box an my minimum SDK is 25 so I settled for the non Compat version) and calling the start() method. The animation is restarting if the swiping takes longer but this may be prevented with a few tweaks I assume.
This might be a cool addition to the library. What do you think?

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <group android:name="group">
                <path
                    android:name="clip"
                    android:fillColor="@android:color/white"
                    android:pathData="M 8 11 L 16 11 L 16 21 L 8 21 Z"
                    android:strokeAlpha="0.3"
                    android:fillAlpha="0.3"/>
                <path
                    android:name="can"
                    android:pathData= "M 6 9 L 6 21 C 6 22 7 23 8 23 L 16 23 C 16 23 18 23 18 21 L 18 9 Z M 8 11 L 16 11 L 16 21 L 8 21 Z"
                    android:fillColor="@android:color/white"/>

                <path
                    android:name="lid"
                    android:pathData="M 5 8 L 19 8 L 19 6 L 16 6 L 15 5 L 9 5 L 8 6 L 5 6 Z"
                    android:fillColor="@android:color/white"/>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="group">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="translateY"
                android:duration="100"
                android:valueFrom="0"
                android:valueTo="-5"
                android:valueType="floatType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
        </aapt:attr>
    </target>
    <target android:name="clip">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="100"
                android:duration="141"
                android:valueFrom="M 8 11 L 16 11 L 16 21 L 8 21 Z"
                android:valueTo="M 8 17 L 16 17 L 16 26 L 8 26 Z"
                android:valueType="pathType"
                android:interpolator="@android:anim/bounce_interpolator" />

        </aapt:attr>
    </target>
    <target android:name="can">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="100"
                android:duration="141"
                android:valueFrom="M 6 9 L 6 21 C 6 22 7 23 8 23 L 16 23 C 16 23 18 23 18 21 L 18 9 Z M 8 11 L 16 11 L 16 21 L 8 21 Z"
                android:valueTo=  "M 6 14 L 6 26 C 6 27 7 28 8 28 L 16 28 C 16 28 18 28 18 26 L 18 14 Z M 8 16 L 16 16 L 16 26 L 8 26 Z"
                android:valueType="pathType"
                android:interpolator="@android:anim/bounce_interpolator"/>
        </aapt:attr>
    </target>
    <target android:name="lid">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:propertyName="pathData"
                android:startOffset="194"
                android:duration="306"
                android:valueFrom="M 5 8 L 19 8 L 19 7 L 17 7 L 15 6 L 9 6 L 7 7 L 5 7 L 5 8 Z"
                android:valueTo="M 5 13 L 19 13 L 19 12 L 17 12 L 15 11 L 9 11 L 7 12 L 5 12 L 5 13 Z"
                android:valueType="pathType"
                android:interpolator="@android:anim/decelerate_interpolator"/>
        </aapt:attr>
    </target>
</animated-vector>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant