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
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
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp
Builder.load_string(
)
class Test(MDApp):
def build( self ):
return Factory.Banner()
Test().run()
|
Implementation of code:
Python3
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp
Builder.load_string(
)
class Test(MDApp):
def build( self ):
return Factory.Banner()
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
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp
Builder.load_string(
)
class Test(MDApp):
def build( self ):
return Factory.Banner()
Test().run()
|
Output:
Share your thoughts in the comments
Please Login to comment...