Create spinner using KivyMD

In this article, we will learn how to create a spinner using KivyMD in Python programming language.

Create spinner using KivyMD

In addition to the Kivy framework is KivyMD. A set of Material Design widgets for use with the Kivy GUI framework which is used to create mobile applications. The Kivy framework is comparable, however, it offers a more appealing GUI. To install the kivymd module execute the below command in the command prompt or terminal.

pip install kivymd

Example 1

In this example, we are going to create a simple spinner that we can see normally while buffering. Here is the stepwise implementation.

Step 1. Import required packages. 

Python3

# importing packages
from kivy.lang import Builder
from kivymd.app import MDApp

Step 2. Adjusting window size. To adjust window size we pass width and height to window.size as done below.

Python3

# adjusting window size
Window.size = (800, 700)

Step 3. We will be designing our layout using Kv language. First, we will declare the layout widget class called MDScreen and then the child widget class called MDSpinner. For MDSpinner we will pass its location in x,y coordinate form. center_x is used for the x coordinate whereas center_y is used for the y coordinate. To set Spinner size we will be using the size and set its dp to 46. We will keep active to True in order to get spinner active by default.

Python3

# writing kv lang
KV = '''
# declaring screen
MDScreen:

    # desiging MDSpinner
    MDSpinner:
        size_hint: None, None

        # sets length and width of spinner to 46dp
        size: dp(46), dp(46)

        # sets position of spinner on screen
        pos_hint: {'center_x': 0.5, 'center_y': 0.5}

        active: True
'''

Step 4. Writing the main program. To run Kv file we will be using load_string() and pass our Kv language in it. So we will define a function for this named build() and on-call it will load Kv and return the screen. run() is used to run the class and it does not require any parameters.

Python3

# main app class
class Main(MDApp):
    def build(self):
        # returns kv
        return Builder.load_string(KV)

# running app
Main().run()

Complete code:

Python3

# importing packages
from kivy.lang import Builder
from kivymd.app import MDApp

# writing kv lang
KV = '''
# declaring screen
MDScreen:

    # desiging MDSpinner
    MDSpinner:
        size_hint: None, None

        # sets length and width of spinner to 46dp
        size: dp(46), dp(46)

        # sets position of spinner on screen
        pos_hint: {'center_x': 0.5, 'center_y': 0.5}

        active: True

'''

# main app class
class Main(MDApp):
    def build(self):
        # returns kv
        return Builder.load_string(KV)

# running app
Main().run()

Output:

Spinner

Example 2

In this example, we will be making changes in Step 2 of the above example and keep other steps unchanged.

We will add MDCheckBox and specify its position using pos_hint and give it an id name check. If the check box is checked then it will have active as True so we will be using the same approach in MDSpinner and check if MDCheckBox is returning active as True or False, if returns true we will set MDspinner True. To do so we use active in MDSpinner and check for active status in MDCheckBox using check.active.

Python3

# writing kv lang
KV = '''
MDScreen:

    # designing spinner
    MDSpinner:
        size_hint: None, None

        # setting up size
        size: dp(46), dp(46)

        # setting up position
        pos_hint: {'center_x': 0.5, 'center_y': 0.5}

        # active event
        active: check.active

    # designing checkbox
    MDCheckbox:
        # giving id to checkbox
        id: check

        size_hint: None, None

        # setting up position
        pos_hint: {'center_x': 0.5, 'center_y': 0.4}

        # active event
        active: True
'''

Complete Code:

Python3

# importing packages
from kivy.lang import Builder
from kivymd.app import MDApp

# writing kv lang
KV = '''
MDScreen:

    # designing spinner
    MDSpinner:
        size_hint: None, None

        # setting up size
        size: dp(46), dp(46)

        # setting up position
        pos_hint: {'center_x': 0.5, 'center_y': 0.5}

        # active event
        active: check.active

    # designing checkbox
    MDCheckbox:
        # giving id to checkbox
        id: check

        size_hint: None, None

        # setting up position
        pos_hint: {'center_x': 0.5, 'center_y': 0.4}

        # active event
        active: True
'''

# main app class
class Main(MDApp):
    def build(self):

        # returns screen
        return Builder.load_string(KV)

# running app
Main().run()

Output: