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 –
Adding Title:
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'
Adding Left and Right menu:
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()]]
Elevation:
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
Background Color:
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
Bottom Bar:
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 MDApp from kivymd.uix.label import MDLabel from kivymd.uix.screen import Screen from kivy.lang import Builder # builder method helper=""" 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:
