Drawer (≡) to close (x) animated vector drawable

asl_drawer

<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/open"
        android:drawable="@drawable/ic_drawer_closed"
        android:state_selected="true"/>

    <item
        android:id="@+id/closed"
        android:drawable="@drawable/ic_drawer"/>

    <transition
        android:drawable="@drawable/avd_drawer_close"
        android:fromId="@id/open"
        android:toId="@id/closed"/>

    <transition
        android:drawable="@drawable/avd_drawer_open"
        android:fromId="@id/closed"
        android:toId="@id/open"/>

</animated-selector>

avd_drawer_close

<?xml version="1.0" encoding="utf-8"?>
<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="close"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="top"
                android:fillColor="#FFFFFF"
                android:pathData="M 16.457 3.666 L 18.589 5.645 L 7.703 17.39 L 5.571 15.414 Z"
                android:strokeWidth="0.1" />
            <path
                android:name="middle"
                android:fillColor="#FFFFFF"
                android:pathData="M 11.947 12 L 11.947 9.039 L 11.947 9.039 L 11.947 12 Z"
                android:strokeWidth="0.1" />
            <path
                android:name="bottom"
                android:fillColor="#FFFFFF"
                android:pathData="M 5.548 5.672 L 7.674 3.687 L 18.612 15.384 L 16.489 17.369 Z"
                android:strokeWidth="0.1" />
        </vector>
    </aapt:attr>
    <target android:name="top">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="500"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:propertyName="pathData"
                android:valueFrom="M 16.457 3.666 L 18.589 5.645 L 7.703 17.39 L 5.571 15.414 Z"
                android:valueTo="M 4.07 6.979 L 4.07 4.071 L 20.087 4.071 L 20.087 6.979 Z"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
    <target android:name="middle">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="500"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:propertyName="pathData"
                android:valueFrom="M 11.947 12 L 11.947 9.039 L 11.947 9.039 L 11.947 12 Z"
                android:valueTo="M 4.018 12 L 4.018 9.039 L 19.983 9.039 L 19.983 12 Z"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
    <target android:name="bottom">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="500"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:propertyName="pathData"
                android:valueFrom="M 5.548 5.672 L 7.674 3.687 L 18.612 15.384 L 16.489 17.369 Z"
                android:valueTo="M 3.996 16.958 L 3.988 14.05 L 20.001 13.991 L 20.012 16.897 Z"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

avd_drawer_open

<?xml version="1.0" encoding="utf-8"?>
<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="drawer"
            android:width="24dp"
            android:height="24dp"
            android:viewportWidth="24"
            android:viewportHeight="24">
            <path
                android:name="top"
                android:fillColor="#FFFFFF"
                android:pathData="M 4.07 6.979 L 4.07 4.071 L 20.087 4.071 L 20.087 6.979 Z"
                android:strokeWidth="0.1" />
            <path
                android:name="middle"
                android:fillColor="#FFFFFF"
                android:pathData="M 4.018 12 L 4.018 9.039 L 19.983 9.039 L 19.983 12 Z"
                android:strokeWidth="0.1" />
            <path
                android:name="bottom"
                android:fillColor="#FFFFFF"
                android:pathData="M 3.996 16.958 L 3.988 14.05 L 20.001 13.991 L 20.012 16.897 Z"
                android:strokeWidth="0.1" />
        </vector>
    </aapt:attr>
    <target android:name="top">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="500"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:propertyName="pathData"
                android:valueFrom="M 4.07 6.979 L 4.07 4.071 L 20.087 4.071 L 20.087 6.979 Z"
                android:valueTo="M 16.457 3.666 L 18.589 5.645 L 7.703 17.39 L 5.571 15.414 Z"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
    <target android:name="middle">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="500"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:propertyName="pathData"
                android:valueFrom="M 4.018 12 L 4.018 9.039 L 19.983 9.039 L 19.983 12 Z"
                android:valueTo="M 11.947 12 L 11.947 9.039 L 11.947 9.039 L 11.947 12 Z"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
    <target android:name="bottom">
        <aapt:attr name="android:animation">
            <objectAnimator
                android:duration="500"
                android:interpolator="@android:interpolator/fast_out_slow_in"
                android:propertyName="pathData"
                android:valueFrom="M 3.996 16.958 L 3.988 14.05 L 20.001 13.991 L 20.012 16.897 Z"
                android:valueTo="M 5.548 5.672 L 7.674 3.687 L 18.612 15.384 L 16.489 17.369 Z"
                android:valueType="pathType" />
        </aapt:attr>
    </target>
</animated-vector>

ic_drawer

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="drawer"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:name="top"
        android:fillColor="#FFFFFF"
        android:pathData="M 4.07 6.979 L 4.07 4.071 L 20.087 4.071 L 20.087 6.979 Z"
        android:strokeWidth="0.1" />
    <path
        android:name="middle"
        android:fillColor="#FFFFFF"
        android:pathData="M 4.018 12 L 4.018 9.039 L 19.983 9.039 L 19.983 12 Z"
        android:strokeWidth="0.1" />
    <path
        android:name="bottom"
        android:fillColor="#FFFFFF"
        android:pathData="M 3.996 16.958 L 3.988 14.05 L 20.001 13.991 L 20.012 16.897 Z"
        android:strokeWidth="0.1" />
</vector>

ic_drawer_closed

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:name="drawer"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:name="top"
        android:fillColor="#FFFFFF"
        android:pathData="M 16.457 3.666 L 18.589 5.645 L 7.703 17.39 L 5.571 15.414 Z"
        android:strokeWidth="0.1" />
    <path
        android:name="bottom"
        android:fillColor="#FFFFFF"
        android:pathData="M 5.548 5.672 L 7.674 3.687 L 18.612 15.384 L 16.489 17.369 Z"
        android:strokeWidth="0.1" />
</vector>

how can i use this for FAB?

how can i use this for FAB?

You have to give the FAB states, it currently uses the android:state_selected as one of it's states:

<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/open"
        android:drawable="@drawable/ic_drawer_closed"
        android:state_selected="true"/>

    <item
        android:id="@+id/closed"
        android:drawable="@drawable/ic_drawer"/>

Will try ut. Is this only support for sdk 21+?

…

On Tue, Nov 23, 2021, 4:58 PM Daniel ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ how can i use this for FAB? You have to give the FAB states, it currently uses the android:state_selected as one of it's states: ` <item android:id="@+id/closed" ***@***.***/ic_drawer"/>` — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/4e586da045f204dda984e0dc5ffb9c1c#gistcomment-3971583>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACJ5XTX2PDSC33TTSCU7S4TUNNQWBANCNFSM4MQBPYMQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

I'm not sure, I can't remember whether there were any API constraints. You'll have to check if Android Studio complains/warns about anything not being supported by a lower API version when you add it.

Ok, thanks Daniel

…

On Tue, Nov 23, 2021, 5:08 PM Daniel ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ I'm not sure, I can't remember whether there were any API constraints. You'll have to check if Android Studio complains/warns about anything not being supported by a lower API version when you add it. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/4e586da045f204dda984e0dc5ffb9c1c#gistcomment-3971592>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACJ5XTRIUEW6DN7JXB44WSLUNNRYJANCNFSM4MQBPYMQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.