Create Toolbar in KivyMD

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: