Kivy - Popup

A Popup widget in Kivy presents a dialog that appears over the main Prent window, usually in response to a button-click event. A dialog box is used for many purposes, such as displaying a certain message to the user, making the user enter some input, or asking the user to confirm a particular action.

In general, the dialogs in any GUI application are of two types: modal and non-modal. A dialog box that doesn't allow the user to interact with the parent window without interacting with it, is called a modal dialog. On the other hand, if the user can dismiss the dialog box without interacting with it, it is a non-modal dialog.

In Kivy, the popup dialog covers the entire parent window by default. How you can configure its size as required.

The Popup class is defined in the "kivy.uix.popup" module.

from kivy.uix.popup import Popup
popup = Popup(**kwargs)

A Popup object is preconfigured with a layout that has a title and a separation bar. We can customize the layout by adding other widgets to its layout parameter.

The following snippet produces a simple popup over the parent window −

from kivy.uix.popup import Popup
popup = Popup(title='Popup Demo',
   content=Label(text='This is a Popup'),
   size_hint=(None, None), size=(400, 400))

You need to call the open() method of Popup object to display it.

popup.open()

As the pop is displayed, it will be dismissed by any click outside it. To prevent the popup from getting automatically dismissed, set the auto_dismiss property to False. You need to call the popup.dismiss() method explicitly. Usually, this is done by binding it to a button's on_press event.

class popdemo(App):
   def build(self):
      btn = Button(text="Click here")
      btn.bind(on_press=self.onButtonPress)
      return btn
   
   def onButtonPress(self, button):
      layout = GridLayout(cols=1)
      lbl = Label(text='Hello world')
      closeButton = Button(text="OK")
      layout.add_widget(lbl)
      layout.add_widget(closeButton)
      popup = Popup(
         title='Popup Demo', content=layout,
         auto_dismiss=False, size_hint=(None, None),
         size=(400, 400)
      )
      popup.open()
      closeButton.bind(on_press=self.on_close)
   
   def on_close(self, event):
      self.popup.dismiss()

When the button captioned "Click here" is clicked, you get a popup dialog as shown below −

Kivy Popup

Press the OK button on the popup to dismiss it.

The Popup class defines following properties −

  • content − Content of the popup that is displayed just under the title. content is an ObjectProperty and defaults to None.

  • title − String that represents the title of the popup. title is a StringProperty and defaults to 'No title'.

A Popup object responds to the following events −

  • on_open − Fired when the Popup is opened.

  • on_dismiss − Fired when the Popup is closed. If the callback returns True, the dismiss will be canceled.

Example

The following code gives a good example of Popup dialog in Kivy. First of all, we add a label and a button to the vertical box layout of a parent window. The button click pops up a one-column gridlayout with a text input, asking the user to enter name. As the popup is dismissed, the text is used to change the label of the parent window.

Here is the complete code −

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.uix.gridlayout import GridLayout
from kivy.uix.popup import Popup
from kivy.core.window import Window

Window.size = (720, 400)

class PopupExample(App):
   def build(self):
      self.layout = GridLayout(cols=1, padding=10)
      
      self.l1 = Label(
         text='enter your name', font_size=32,
         color=[.8, .6, .4, 1]
      )
      self.layout.add_widget(self.l1)
      
      self.button = Button(text="Click Here")
      self.layout.add_widget(self.button)
      self.button.bind(on_press=self.onButtonPress)
      return self.layout
   
   def onButtonPress(self, button):
      layout = GridLayout(cols=1, padding=10)
      
      popupLabel = Label(text="Enter name")
      self.t1 = TextInput()
      closeButton = Button(text="OK")
      
      layout.add_widget(popupLabel)
      layout.add_widget(self.t1)
      layout.add_widget(closeButton)
      
      self.popup = Popup(
         title='Hello', content=layout,
         auto_dismiss=False, size_hint=(None, None),
         size=(200, 200)
      )
      self.popup.open()
      closeButton.bind(on_press=self.on_close)
   
   def on_close(self, event):
      self.l1.text = 'Thanks ' + self.t1.text
      self.popup.dismiss()
PopupExample().run()

Output

The App window appears like this −

Kivy Popup Dialog
Advertisements