How to Create Bottom Navigation using Kivymd and Python?

KivyMD is a commonly known library of Python which offers us with a collection of Material Design (MD) compliant widgets. These widgets can be used along with the kivy framework which is another library and is used for creating multi-touch applications. The large number of UI elements that kivyMD provides us with, include buttons, cards, dialogs, menus and many more such elements, all of which are designed to give an appealing look and feel.

A navigation bar is a UI element that allows users to “navigate” between different screens/sections of an application. They are normally present on the top or bottom of our screen. We might often see the 3 buttons on the bottom of the screen if we use an android phone. When we use WhatsApp or any feature on iOS, we see the features below like status, calls, communities, chats, and settings which “navigate” us to different screens. In KivyMD, the MDBottomNavigation widget enables us to add MDBottomNavigationItem widgets to it. Each such item has a unique name associated with it and a text label which describes the screen it represents. Icons can also be added to each of these items to help users instantly understand and identify the screens briefly.

In this article, we are going to see how a bottom navigation bar can be created with the help of KivyMD and Python.

Before going forward, it is necessary to install the certain libraries as they are not part of the standard library packages. They include kivy and kivymd and their install commands are as follows −

pip install kivy
pip install kivymd

Let us now see the step-by-step implementation.

Step 1. Importing all Necessary Packages

The Kivymd.app is a module in the KivyMD library that contains the MDApp class or the base class which is to be used in the KivyMD applications. It provides us with many methods to initialise applications and manage their lifecycle. The kivy.uix.screenmanager is used to manage the multiple screens in our Kivy application, activities like adding, removing and switching between screens are handled by it. Next we have the kivymd.uix.bottomnavigation which contains the requirements for creating the navigation bar in KivyMD applications. It is the main widget that is representing the bottom navigation bar. Lastly, we have the kivy.lang.Builder that is a module in the Kivy library used for importing KV language files or use strings to build the corresponding widget trees.

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.uix.bottomnavigation import MDBottomNavigation
from kivy.lang import Builder

Step 2. Layout Designing

Just the way in websites we use HTML and XML in android to design our layouts, similarly here we use the KV language to design our layouts. The first part of this is the MDBottomNavigation class. Depending upon how many widgets will be required inside the navigation bar, we will declare those many sub classes or MDBottomNavigationItem each of them with a name, text and an icon to correspond to it for better understanding of users. The MDLabel is used to present text on the screen that is specified and a halign tag is specified as centre to ensure the text is present in the centre of the screen.

KV='''<MDBottomNavigation>:
   MDBottomNavigationItem:
      name: 'screen1'
      text: 'Android'
      icon: 'android'       
      MDLabel:
         text: 'Android'
         halign: 'center'
   MDBottomNavigationItem:
      name: 'screen2'
      text: 'Apple'
      icon: 'apple'        
      MDLabel:
         text: 'Apple'
         halign: 'center'
   MDBottomNavigationItem:
      name: 'screen3'
      text: 'Linux'
      icon: 'linux'        
      MDLabel:
         text: 'Linux'
         halign: 'center'
   
   MDBottomNavigationItem:
      name: 'screen4'
      text: 'Windows'
      icon: 'microsoft-windows'        
      MDLabel:
         text: 'Windows'
         halign: 'center'
 '''

Step 3. Code to Integrate and Run

In this step, we declare the respective screen classes, screen manager and add the widgets. In order to run the kv language written layout, we make use of the load_string() function and pass the kv string in it. Alternatively we can also make use of an external kv language file. The builder then handles all widgets and generates the widget tree. The .run() method is called and this runs the class without needing any parameters.

class Screen1(Screen):
   pass
class Screen2(Screen):
   pass
class Screen3(Screen):
    pass
class Screen4(Screen):
   pass
sm = ScreenManager()
sm.add_widget(Screen1(name='screen1'))
sm.add_widget(Screen2(name='screen2'))
sm.add_widget(Screen3(name='screen3'))
class TutorialsPointApp(MDApp):
   def build(self):
      Builder.load_string(KV)
      return MDBottomNavigation()
if __name__ == '__main__':
   TutorialsPointApp().run()

Example

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.uix.bottomnavigation import MDBottomNavigation
from kivy.lang import Builder

KV='''<MDBottomNavigation>:
   MDBottomNavigationItem:
      name: 'screen1'
      text: 'Android'
      icon: 'android'        
      MDLabel:
         text: 'Android'
         halign: 'center'             

   MDBottomNavigationItem:
      name: 'screen2'
      text: 'Apple'
      icon: 'apple'        
      MDLabel:
         text: 'Apple'
         halign: 'center'
   MDBottomNavigationItem:
      name: 'screen3'
      text: 'Linux'
      icon: 'linux'        
      MDLabel:
         text: 'Linux'
         halign: 'center'    
   MDBottomNavigationItem:
      name: 'screen4'
      text: 'Windows'
      icon: 'microsoft-windows'        
      MDLabel:
         text: 'Windows'
         halign: 'center'
 ''' 
class Screen1(Screen):
   pass
class Screen2(Screen):
   pass
class Screen3(Screen):
   pass
class Screen4(Screen):
   pass
sm = ScreenManager()
sm.add_widget(Screen1(name='screen1'))
sm.add_widget(Screen2(name='screen2'))
sm.add_widget(Screen3(name='screen3'))
class TutorialsPointApp(MDApp):
   def build(self):
      Builder.load_string(KV)
      return MDBottomNavigation()
if __name__ == '__main__':
   TutorialsPointApp().run()

Output

1. On start/ on clicking the 1st option which is android

2. On clicking windows

3. On clicking Apple

Conclusion

The KivyMD library is a really good choice for dealing with Material Design compliant widgets. The MDBottomNavigation widget provides us a navigation bar to switch between multiple screens inside of an application and can contain 1 or more MDBottomNavigationItem widgets. To use KivyMD, we need to make sure the design layout is written clearly in the KV language in the form of a string (used here) or external file. We have implemented the bottom navigation with 4 widgets inside of it which are Android, Apple, Linux and Windows. When we click on each of them, the screen changes and displays the corresponding name as a text. KivyMD is highly useful for creating modern day responsive user interfaces in Python and helps developers who want to create cross-platform applications with a consistent look and feel across devices and platforms.