FloatingActionButton with animated icon

Question

I am trying to create a FloatingActionButton with an icon like this : https://github.com/jd-alexander/LikeButton

As you can see, the button is animated, it is not just two different buttons who are changed.

Here is my actual basic FloatingActionButton, with a static icon :

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    android:src="@drawable/ic_favorite_border_white_24dp"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"/>

I do not want to just change the icon, I would like to make an animation when I click on it.

Here is the button I need, but in this case it is not included in the FloatingActionButton :

<com.like.LikeButton
    android:id="@+id/like_button"
    android:layout_height="32dp"
    android:layout_width="32dp"
    app:icon_type="heart"
    app:circle_start_color="@color/red"
    app:like_drawable="@drawable/ic_favorite_white_24dp"
    app:unlike_drawable="@drawable/ic_favorite_border_white_24dp"
    app:dots_primary_color="@color/orange"
    app:dots_secondary_color="@color/red"
    app:circle_end_color="@color/orange"
    app:icon_size="24dp"
    app:anim_scale_factor="1"/>

To sum up :

1. I know how to do a FloatingActionButton with a static icon.

2. I know how to create an animated like button

3. I do not know how to mix steps 1) and 2) to create a FloatingActionButton with an animated icon on click.

A famous shopping app is doing it, but I do not know how.

Answer 1

I think that the way to achieve that is not by using a android.support.design.widget.FloatingActionButton, but instead create your own FAB that extends a container like a FrameLayout (or maybe even a android.support.v7.widget.CardView), set a rounded drawable background to it, and add the com.like.LikeButton as a child. Probably you will have to define a CoordinatorLayout.Behavior as well for it if you want to use it in a android.support.design.widget.CoordinatorLayout. Just use android.support.design.widget.FloatingActionButton as a source of inspiration if needed :P

Answer 2

Looks like a great idea! Havan't done it myself, but this is how I would do it:

1) FAB's are child from ImageView

2) ImageView's can be Animated.

3) Have Fun!