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
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.
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
class Test(MDApp):
def build( self ):
screen = Builder.load_string(KV)
return screen
Test().run()
|
Adding above Steps:
Python3
from kivy.lang import Builder
from kivymd.app import MDApp
KV =
class Test(MDApp):
def build( self ):
screen = Builder.load_string(KV)
return screen
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
from kivy.lang import Builder
from kivymd.app import MDApp
KV =
class Test(MDApp):
def build( self ):
screen = Builder.load_string(KV)
return screen
Test().run()
|
Output:
Share your thoughts in the comments
Please Login to comment...