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.
# 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.
# 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.
# 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:
# 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’
# 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() |
Output: