Animated Floating Action Button in Kivy

Clock

The Clock object helps us schedule a function call in the future, once or repeatedly at specified intervals. We must use the kivy inbuilt module while working with the Animation and clock – 

from kivy.animation import Animation
from kivy.clock import Clock

You can also try this code with Online Python Compiler

Run Code

Implementation

Let us look into the code.

# CodingNinja.py file 

# Creating Animated Floating Action Button
# Importing all necessary modules
import kivy

# Base Class of App need to inherit from the APP class
from kivy.app import App

# Box Layout helps us arrange widgets in a particular fashion 
from kivy.uix.boxlayout import BoxLayout

# Import config helps us change the default setting of kivy
from kivy.config import Config
Config.set('graphics', 'resizable', True)

# Import Clock helps us to schedule a function call in future
from kivy.clock import Clock

# Import Animation to work with Animation
from kivy.animation import Animation

# Create Root Widget Which is Used in main.kv file
class MainWindow(BoxLayout):
   def __init__(self, **kwargs):
       super().__init__(**kwargs)

       # Schedule the interval for our animation
       Clock.schedule_interval(self.breath, 1)

   # Creating Animation function name anim
   def anim(self, dtx):

       # We will create an animation object that could be stored
       # and reused after each call or reused across different widgets.
       # += indicates a sequential step
       anim = (Animation(btn_size=(10, 10), t='in_quad', duration=.6) +
               Animation(btn_size=(100, 100), t='in_quad', duration=.4))

       # Call the button id
       tgt = self.ids.cta


       # Start the Animation
       anim.start(tgt)

# creating the App class in which name
# .kv file is to be named main.kv
class MainApp(App):

   # defining build()
   def build(self):

       # returning the instance of root class
       return MainWindow()

# run the app
if __name__ == '__main__':
   MainApp().run()

You can also try this code with Online Python Compiler

Run Code

# main.kv file

# BoxLayout Implementation
# Float Layout used for the creation of Floatbutton
# Create properties of the Button

<FloatButton@FloatLayout>
   id: float_root  # Giving id to button
   size_hint: (None, None)
   text: ''
   btn_size: (90, 90)
   size: (70, 70)
   bg_color: (0.404, 0.227, 0.718, 1.0)
   pos_hint: {'x': .6}

   # Add Shape,Size,Position to Button
   Button:
       text: float_root.text
       markup: True
       font_size: 40
       size_hint: (None, None)
       size: float_root.btn_size
       pos_hint: {'x': 6.5, 'y': 4.8}
       background_normal: ''
       background_color: (0, 0, 0, 0)
       canvas.before:
           Color:
               rgba: (0.104, 0.427, 0.218, 1.0)
           Rectangle:
               size: self.size
               pos: self.pos


# Creation of the main window
<MainWindow>:
   BoxLayout:
       # Creating the Float button
       FloatButton:

           # Giving id to the button
           # So that we can Apply the Animation
           id: cta
           text: 'Coding Ninja'
           markup: True
           background_color: 1, 0, 1, 0

You can also try this code with Online Python Compiler

Run Code

Output:-

Frequently Asked Questions

What is kivy?

Kivy is a platform-independent Graphical user interface tool in python that can run on android, ios, Linux, windows etc. It is used to build the android application and develop desktop applications.

What is a Clock in Kivy?

The Clock object helps us schedule a function call in the future, once or repeatedly at specified intervals. We must use the kivy inbuilt module while working with the Animation. 

What is the floating action button in Kivy?

The floating action button represents the primary, most common action of an application in kivy. A floating action button occurs in front of all screen content, typically a shaped button with an icon.

How to set up animation property to a widget?

To animate Widget properties, we used Animation and AnimationTransition. We must specify at least a property name and the target value. To use an Animation, we follow these steps:

1. First, set up an Animation object

2. Second, use the Animation object in a Widget/Class.

What extensions are used for a Kivy file?

Kivy files are saved with the .kv extension.

Conclusion

This article extensively discussed how to create an Animated floating action button in Kivy and covered its properties and features. 

After reading about the Animated floating action button in Kivy, are you not feeling excited to read/explore more articles on the topic of Kivy? Don't worry; Coding Ninjas has you covered. See Size and Position of a Button, Disable Button in Kivy, Text Input With a Button in Kivy, Drop Down List in Kivy, Kivy Float Layout.

Please refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Competitive Programming, Data Structures and Algorithms, JavaScript,  System Design, and much more! To test your competency in coding, check out our mock test series and participate in the hosted contests in Coding Ninjas Studio! If you have just begun your learning process and are looking for good quality questions asked by tech giants like Google, Amazon, Microsoft, Uber, etc., Look at our interview experiences and interview bundle for placement preparations.Nevertheless, you may also consider our paid courses to give you an edge over others!

Please upvote our blogs if you find them engaging and helpful!
Happy Learning!