How to Create Bottom Navigation using Kivymd and Python

Last Updated : 02 Jun, 2022

In this article, we will see how to add the Bottom Navigation in our application using KivyMD in Python.

Installation:

To install this module type the below command in the terminal.

pip install kivy

pip install kivymd

MDBottomNavigation Method:

Bottom navigation is used to navigate from one screen to another with the help of the buttons in the bottom.

Step 1. Import required packages.

For this, we will need Builder from kivy and MDApp from kivymd package.

Note: We will not be importing MDNavigation and MDScreen because we are designing our screen using kv language.

Python3

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

Step 2. Design layout.

We will be designing our layout using kv language. First, we will declare the Screen widget class called MDScreen and then the child widget class. Here MDBottomNaviagation is a child class, MDBottonNavigation and MDLabel are Sub-child classes.

Syntax:

MDScreen:

MDBottomNavigation:

MDBottomNavigationItem:
MDLabel:

Talking about the parameters used.

We will pass the name, text, and icon parameters to MDBottomNavigationItem. The name parameter is completely optional here but we use it to classify screens. The icon is used to declare icons on the screen. The text parameter is the text output on the Navigation bottom.
We will pass text and halign parameters in MDLabel. Where text works the same as in MDBottomNavigationItem but it will display text on the main screen and halign is used to declare alignment of the content in the label.

Python3

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

    # this will create a space navigation bottom
    MDBottomNavigation:

        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 1'
            text: 'Python'
            icon: 'language-python'
            
            # this will be triggered when screen 1 is selected
            # creates a label
            MDLabel:
                text: 'Python'
                halign: 'center'
        
        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 2'
            text: 'Java'
            icon: 'language-java'

            # this will be triggered when screen 2 is selected
            # creates a label
            MDLabel:
                text: 'Java'
                halign: 'center'

        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 3'
            text: 'CPP'
            icon: 'language-cpp'

            # this will be triggered when screen 3 is selected
            # creates a label
            MDLabel:
                text: 'CPP'
                halign: 'center'
'''

Step 3. 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 does not require any parameters.

Python3

# App class
class Test(MDApp):

    def build(self):
      
        # this will load kv lang
        screen = Builder.load_string(KV)

        # returning screen
        return screen

# running app
Test().run()

Adding above Steps:

Python3

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

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

    # this will create a space navigation bottom
    MDBottomNavigation:

        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 1'
            text: 'Python'
            icon: 'language-python'

            # this will be triggered when screen 1 is selected
            # creates a label
            MDLabel:
                text: 'Python'
                halign: 'center'

        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 2'
            text: 'Java'
            icon: 'language-java'

            # this will be triggered when screen 2 is selected
            # creates a label
            MDLabel:
                text: 'Java'
                halign: 'center'

        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 3'
            text: 'CPP'
            icon: 'language-cpp'

            # this will be triggered when screen 3 is selected
            # creates a label
            MDLabel:
                text: 'CPP'
                halign: 'center'
'''

# App class
class Test(MDApp):

    def build(self):
      
        # this will load kv lang
        screen = Builder.load_string(KV)

        # returning screen
        return screen

# running app
Test().run()

Output:

Example:

For this example, we will be changing parameters and changing the bottom navigation color. The steps will remain the same as above but we will have some add-ons for changing the bottom navigation color.

Syntax:

MDBottomNavigation:

panel_color: 1,0,0,1
text_color_active: 0, 1, 0, 1

panel_color will change the color of the bottom navigation. Here we are passing rgba value which means red.
text_color_active will change the color of MDBottomNavigationItem when we click on it. Here the color is green.

Note: The maximum value of a color you can pass is 1.

We also changed text and icons for this example. Here is the list of all available icons by KivyMD. Click here.

Note: You can also have a custom icon for that you just need to replace the icon parameter with your media file.

Example:

icon: 'icon.png'

Python3

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

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

    # this will create a space navigation bottom
    MDBottomNavigation:
        panel_color: 1,0,0,1
        text_color_active: 0, 1, 0, 1

        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 1'
            text: 'Camera'
            icon: 'camera'

            # this will be triggered when screen 1 is selected
            # creates a label
            MDLabel:
                text: 'You have selected Camera'
                halign: 'center'

        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 2'
            text: 'Microphone'
            icon: 'microphone'

            # this will be triggered when screen 2 is selected
            # creates a label
            MDLabel:
                text: 'You have selected Microphone'
                halign: 'center'

        # this will create a navigation button on the bottom of screen
        MDBottomNavigationItem:
            name: 'screen 3'
            text: 'Wi-FI'
            icon: 'wifi'

            # this will be triggered when screen 3 is selected
            # creates a label
            MDLabel:
                text: 'You have selected Wi-Fi'
                halign: 'center'
'''

# App class
class Test(MDApp):

    def build(self):
      
        # this will load kv lang
        screen = Builder.load_string(KV)

        # returning screen
        return screen

# running app
Test().run()