How to Create banner in kivymd-Python?

Last Updated : 03 Jun, 2022

In this article, we will see how to add the banner to our application using KivyMD in Python.

A banner is a dropdown item when a button or action is triggered. Banners are widely used for pop-ups and warnings in mobile applications. You might need a basic understanding of kv lang to get started.

Installation:

To install the modules type the below command in the terminal.

pip install kivy

pip install kivymd

Simple Banner:

Step 1. Import required packages.

For this, we will need Builder, Factory from kivy, and MDApp from kivymd package.

Note: We will not be importing kivy widgets/ kivy classes because we are designing our layout using kv language.

Python3

# importing packages
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp

Step 2. Design layout.

We will be designing our layout using kv language.

First, we will declare the Screen widget class called Screen and then the child widget class. Here MDBanner, MDToolbar, and MDBoxLayout is a child class, and OneLineListItem and widget are a Sub-child classes of MDBoxLayout.
We will pass the id, text, over_widget, and vertical_pad parameters to MDBanner. The id parameter is completely optional here but we use it to give it a unique identity. The over_widget and vertical_pad are used for alignment on-screen, over_widget sets the Banner on the screen and vertical_pad sets padding vertically on the screen. The text parameter is the text output on the MDBanner.
We will pass title, id, elevation, and pos_hint parameters in MDToolbar. Where the title works as text, elevation is used to align MDToolbar on the top of the screen, and pos_hint is used to specify its location on the screen.
In MDBoxLayout we will be using id, orientation, size_hint_y, height. Where we will be keeping our orientation vertical, size_hint_y is used to specify height according to the y-axis, and we will use the height parameter to get a proper BoxLayout when MDBanner is dropped(in simple we need to change BoxLayout height when MDBanner is dropped).
We will also be using the widget and OneLineListItem where the widget will be empty and we will pass text and on_release. On_release is an event here, so when the event will be triggered it will show the banner.

Python3

# importing packages
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp

# it will load the kv
# Note: we need not to import MDBanner
# or anything if working with kv
Builder.load_string('''
<Banner@Screen>
    # this will create a banner
    MDBanner:
        id: banner
        text: ["GEEKS FOR GEEKS."]
        
        # defining size to banner
        over_widget: screen
        vertical_pad: toolbar.height
    
    # this will create a toolbar
    MDToolbar:
        id: toolbar
        title: "Example Banners"
        elevation: 10
        pos_hint: {'top': 1}

    # this will create a vertical box layout
    MDBoxLayout:
        id: screen
        orientation: "vertical"
        size_hint_y: None
        height: Window.height - toolbar.height
        
        # it will trigger banner to show
        OneLineListItem:
            text: "CLICK HERE"
            on_release: banner.show()
            
        # we will keep widget because we want to align OneLineListItem at the top
        # or it will float at the bottom by default
        Widget:  
''')


# App class
class Test(MDApp):
    def build(self):

        # Factory.banner is our kv lang we wrote
        # which was loader by builder.load_string()
        # and stored in Factory
        return Factory.Banner()


# running app
Test().run()

Implementation of code:

Python3

# importing packages
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp

# it will load the kv
# Note: we need not to import MDBanner
# or anything if working with kv
Builder.load_string('''
<Banner@Screen>
    # this will create a banner
    MDBanner:
        id: banner
        text: ["GEEKS FOR GEEKS."]
        
        # defining size to banner
        over_widget: screen
        vertical_pad: toolbar.height
    
    # this will create a toolbar
    MDToolbar:
        id: toolbar
        title: "Example Banners"
        elevation: 10
        pos_hint: {'top': 1}

    # this will create a vertical box layout
    MDBoxLayout:
        id: screen
        orientation: "vertical"
        size_hint_y: None
        height: Window.height - toolbar.height
        
        # it will trigger banner to show
        OneLineListItem:
            text: "CLICK HERE"
            on_release: banner.show()
            
        #we don't need widgets so we will leave widget empty
        #or you can simply remove it
        Widget:  
''')

# App class
class Test(MDApp):
    def build(self):

        # Factory.banner is our kv lang we wrote
        # which was loader by builder.load_string()
        # and stored in Factory
        return Factory.Banner()

# running app
Test().run()

Output:

Banner with buttons:

In this, we will be adding buttons to the banner. For this example, the approach will be the same as the above example but we need to add some parameters in MDBanner in order to add buttons.

Syntax:

MDBanner:

left_action : ["text", function]

right_action : ["text", function]

In this example, left_action defines the left button and right_action for the right button. Where text will be the text for the button and the second parameter with being our function. For this example, we will pass the lambda function and pass None.

Implementation:

Python3

# importing packages
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp

# it will load the kv
# Note: we need not to import MDBanner
# or anything if working with kv
Builder.load_string('''
<Banner@Screen>
    # this will create a banner
    MDBanner:
        id: banner
        text: ["GEEKS FOR GEEKS."]
        
        # defining button in banner
        left_action: ["LEARN MORE", lambda x: None]
        right_action: ["CLOSE", lambda x: None]
        
        # defining size to banner
        over_widget: screen
        vertical_pad: toolbar.height
    
    # this will create a toolbar
    MDToolbar:
        id: toolbar
        title: "Example Banners"
        elevation: 10
        pos_hint: {'top': 1}

    # this will create a vertical box layout
    MDBoxLayout:
        id: screen
        orientation: "vertical"
        size_hint_y: None
        height: Window.height - toolbar.height
        
        # it will trigger banner to show
        OneLineListItem:
            text: "CLICK HERE"
            on_release: banner.show()
            
        #we don't need widgets so we will leave widget empty
        #or you can simply remove it
        Widget:  
''')

# App class
class Test(MDApp):
    def build(self):

        # Factory.banner is our kv lang we wrote
        # which was loader by builder.load_string()
        # and stored in Factory
        return Factory.Banner()

# running app
Test().run()