Skip to content

Feature suggestion - Showing an animated icon #27

@cyc1ingsir

Description

@cyc1ingsir

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions