Open In App
Related Articles

Create Toolbar in KivyMD

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:



Last Updated : 17 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads