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 packagesfrom kivy.lang import Builderfrom kivy.factory import Factoryfrom 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 packagesfrom kivy.lang import Builderfrom kivy.factory import Factoryfrom kivymd.app import MDApp# it will load the kv# Note: we need not to import MDBanner# or anything if working with kvBuilder.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 classclass 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 appTest().run() |
Implementation of code:
Python3
# importing packagesfrom kivy.lang import Builderfrom kivy.factory import Factoryfrom kivymd.app import MDApp# it will load the kv# Note: we need not to import MDBanner# or anything if working with kvBuilder.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 classclass 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 appTest().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 packagesfrom kivy.lang import Builderfrom kivy.factory import Factoryfrom kivymd.app import MDApp# it will load the kv# Note: we need not to import MDBanner# or anything if working with kvBuilder.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 classclass 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 appTest().run() |
Output:
