Kivy Tutorial - Kivy Popup Window

Kivy Tutorials

About Lesson

In this Kivy Tutorial we are going to learn about Kivy Popup Window, The Popup widget is used to create modal popups. By default, the popup will cover the whole “parent” window. When you are creating a popup, you must at least set a Popup.title and Popup.content, remember that the default size of a Widget is size_hint=(1, 1). If you don’t want your popup to be full screen, either use size hints with values less than 1 (for instance size_hint=(.8, .8)) or deactivate the size_hint and use fixed size attributes.

OK so first of all create a python file , and add these codes in that file. our first class extends from Popup class and we are not going to add anything in that class, the second class extends from RelativeLayout class, because we want to use Relative Layout in this tutorial. and we simply create a method in here, because in my GUI i will have a button and i want to connect this method with that button, in this method we have created our Popup class object. after that we have created our main class that extends from the App class, and we have returned our MyRelativeLayout class in our main class.

from kivy.app import App
from kivy.uix.popup import Popup
from kivy.uix.relativelayout import RelativeLayout




#our popup class
class MyPopup(Popup):
    pass



#we are using relative layout
class MyRelativeLayout(RelativeLayout):

    def open_popup(self):
        pops = MyPopup()
        pops.open()



#our main window class
class PopUpWindow(App):
    def build(self):

        return MyRelativeLayout()




#in here we need to run our applicaiton
if __name__ == "__main__":
    window = PopUpWindow()
    window.run()

from kivy.app import App

from kivy.uix.popup import Popup

from kivy.uix.relativelayout import RelativeLayout

#our popup class

class MyPopup(Popup):

pass

#we are using relative layout

class MyRelativeLayout(RelativeLayout):

def open_popup(self):

pops = MyPopup()

pops.open()

#our main window class

class PopUpWindow(App):

def build(self):

return MyRelativeLayout()

#in here we need to run our applicaiton

if __name__ == "__main__":

window = PopUpWindow()

window.run()

Now let’s create our .kv file, i have named my kv file popupwindow.kv, make sure that this name should be similar to the main class name, in my case it is PopUpWindow class. we are going to define some rules for our RelativeLayout also we are going to add a button in our RelativeLayout.

<MyRelativeLayout>:
    Button:
        text:"Open Popup"
        background_color: 1,1,0,1
        pos_hint: {"x":0, "y":0}
        size_hint: 0.3, 0.3
        on_press:root.open_popup()

<MyPopup>:
    id:pop
    size_hint: .4, .4
    auto_dismiss: False
    title: 'GeeksCoders'

    Button:
        text: 'Welcome to Geekscoders.com'
        on_press: pop.dismiss()

<MyRelativeLayout>:

Button:

text:"Open Popup"

background_color: 1,1,0,1

pos_hint: {"x":0, "y":0}

size_hint: 0.3, 0.3

on_press:root.open_popup()

<MyPopup>:

id:pop

size_hint: .4, .4

auto_dismiss: False

title: 'GeeksCoders'

Button:

text: 'Welcome to Geekscoders.com'

on_press: pop.dismiss()

You can see that we have connected our button from MyRelative class in our kv file like this.

 on_press:root.open_popup()

1	on_press:root.open_popup()

Run the complete code and this is the result