Android L morphing animations [closed]

Question

Does anyone know a good library or approach to achieve the morphing of icons and images. In particular om looking for a way to morhp a play button into a pause button in vise versa.

For an example i would recommend looking at the all new Android YouTube app in the play store. Or by visiting this link:

http://www.google.com/design/spec/animation/delightful-details.html

And check out the right hand side video.

Any help would be greatly appreciated. I have notices acutually that the material-menu github page does do some morphing of buttons. But this is only possible by translating en rotating 3 single lines.

https://github.com/balysv/material-menu/blob/master/library/src/main/java/com/balysv/materialmenu/MaterialMenuDrawable.java

This is actually not the desired effect.

Thanks in advance

Answer 1

take a look at this library: https://github.com/wnafee/vector-compat it provides AnimatedVectorDrawable and MorphButton that does exactly what you are looking for.

Instructions
1-Add the vector-compat dependency to your build.gradle file and make sure to use buildToolsVersion 22 or higher:

android {
    // use version 22 or higher
    buildToolsVersion "22.0.1"
    ...
}
dependencies {
    compile 'com.wnafee:vector-compat:1.0.5'
    ...
}

2-Add MorphButton view in your layout xml

<com.wnafee.vector.MorphButton
    android:id="@+id/playPauseBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:vc_startDrawable="@drawable/ic_pause_to_play"
app:vc_endDrawable="@drawable/ic_play_to_pause" /> 

To use MorphButton in your app, make sure to include the morphButtonStyle item in your base app theme:

<style name="MyAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="morphButtonStyle">@style/Widget.MorphButton</item>
</style>

Animated vector drawables for play/pause and play/stop are already included in the library, so the code above works out of the box and you don't need to import any extra drawables yourself.