Create Toolbar in KivyMD

17 Jun, 2021
In this article, we will see how to add the toolbar in mobile applications using KivyMD in Python. KivyMD provide two type of toolbar –
Top Toolbar
Bottom Toolbar
Let’s see how to create each type of toolbar and how to add certain attributes like title, left menu, right menu, etc. Some commonly used attributes are –
To add a title to the toolbar use the title attribute.
Syntax: title: ‘The title we want to show on the toolbar’
It is represented as follows-
MDToolbar:
    title:'Demo'     
It is the left and the right menu that you must have seen in certain apps. To create this the following attributes are used.
Syntax: 
Left_action_items: we need to specify a icon and function associated with it that will show on the left side of title.
right_action_items: similar to left_action_items but on the right side 
It is represented as follows:
MDToolbar:
title:’Demo’
left_action_items:[[‘menu’,lambda x: app.navigation_draw()]]
right_action_items:[[‘logout’,lambda x: app.navigation_draw()]]
 It is used for showing shadow effect below a toolbar
Syntax: elevation: to show a shadow effect below toolbar
It is represented as follows
MDToolbar:
title:’Demo’
    left_action_items:[[‘menu’,lambda x: app.navigation_draw()]]
    right_action_items:[[‘logout’,lambda x: app.navigation_draw()]]
    elevation:10
To change the color of the toolbar md_bg_color is used.
Syntax: md_bg_color: Its representation should be an RGB value
It is represented as follows:
MDToolbar:
title:’Demo’
left_action_items:[[‘menu’,lambda x: app.navigation_draw()]]
right_action_items:[[‘logout’,lambda x: app.navigation_draw()]]
    elevation:10
    md_bg_color: 0,0,100/255,1
In addition to the top toolbar, we can also add a bottom toolbar. MDBottomAppBar is used to display the toolbar at the bottom.
It is represented as follows:
MDBottomAppBar:
MDToolbar:
title:’Bottom’
  left_action_items:[[‘menu’,lambda x: app.navigation_draw()]]
    elevation:10
    md_bg_color: 0,0,100/255,1
Let’s see an example where we will create both the top and bottom toolbar.
Note: The widgets on the screen will adjust themselves according to the size of the window because widgets use size hinting (adjustment) by default.
Python3
from kivymd.app import MDAppfrom kivymd.uix.label import MDLabelfrom kivymd.uix.screen import Screenfrom kivy.lang import Builder  # builder methodhelper="""Screen:    name:'About us'    BoxLayout:        orientation:'vertical'        MDToolbar:            title:'Demo'            left_action_items:[['menu',lambda x: app.navigation_draw()]]            right_action_items:[['logout',lambda x: app.navigation_draw()]]            elevation:10            md_bg_color: 0,0,100/255,1                      MDLabel:            text:"hi"            halign:'center'        MDBottomAppBar:            MDToolbar:                title:'Bottom'                left_action_items:[['menu',lambda x: app.navigation_draw()]]                elevation:10                md_bg_color: 0,0,100/255,1"""class Demo(MDApp):      def build(self):          screen=Builder.load_string(helper)        return screen          # lambda Function    def navigation_draw(self):        print("NavBar")  if __name__ == "__main__":    Demo().run()
Output:
python-modules
Python
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.