FAB // Utilizing Animated Vector Drawable Animations
The use of the FAB (Floating Action Button) and AVD (Animated Vector Drawables) serve as a powerful combination for prompting user action. These little details can really elevate the user experience in a fun and intuitive way.
I began experimenting with a few different vector drawables to see what type of animations I could come up with. A few common symbols I decided to work with were Plus (+), Cross (x), and Check (√).
This animation was similar to the above, but for the animation, I added two objectAnimators. One to rotate the vector and one to morph the shape of the vector from a Cross (x) to a Check (√). I've provided the XML used in this animation below:
Animated Vector Drawable:
To best organize the various vector pathData, names, and groupNames, I placed them all in a string resource file here.
To illustrate this animation in a use-case, I created a mock event page concept. The FAB is used to add friends to invite to the event.
- Plus: Reveals friends to invite
- Cross: Hides friends invite list
- Check: Confirm and send invitation to your selected friends