How to set lotie animation to floating action buttton

i want to set my floating action button to lottie animation. is there any way to do it because i want this animation to show when new notification recieves.

its been 2 hour someone pls reply asap


I am unable to get. Please tell us clearly

what i want is to change the icon of floating action button to lottie animation.

ooh k wait

sorry their is no way to use floating action button with lottie animation better you try gif

Lotties are a separate component, and require rendering. They only work as stand alone display objects. You cannot put them within a FAB.

Animated FAB can be a visual nuisance. Animation is intended to draw the eye to the point of movement. If you are animating something consistently it can be very frustrating as a user, and result in a lower UI.

Use animation with purpose.


i think you didn’t read my post. it is clearly written that the purpose is to let the user know that there is new notification. as there is not extension to show notification count inside the app. it is necessay and is not going to lower the UI experience of user.

I did read your post.

You can simulate an animation by using the clock function and have it cycle through a few colours, or different text/icons

Like every 100 ms change colour from green to yellow and back again for a total of 10 times.

1 Like

Just to clarify and extend what @cian said, according to the guidelines,

A floating action button (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in three types: regular, mini, and extended.

In short, it represents an action that’s fixed, meaning it is not intended to change. As Cian pointed out, with animation, you would change it and always draw the users attention to it, until the point it will feel disturbed and annoyed.