Create Toolbar in KivyMD
Last Updated :
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 –
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
helper =
class Demo(MDApp):
def build( self ):
screen = Builder.load_string(helper)
return screen
def navigation_draw( self ):
print ( "NavBar" )
if __name__ = = "__main__" :
Demo().run()
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...