Switching "Screens" in Kivy using the ScreenManager?

[Eamonn Rea]

I absolutely LOVE Kivy. At first (and to an extent it still kind of is) it was a little hard to get used to. It's very different from what I'm used to, but after getting used to it's workflow it's really awesome!

The point of Kivy is to create graphical applications such as utilities or even games, which is more than possible with Kivy as demonstrated in the Kivy contest. In the apps that I would like to create, I'd like to switch between menus, or in a game environment, a "Game State". I've looked into Kivy's ScreenManager, added Screens using the add_widget() method, but when I run the following code it doesn't work!

main.py:

#!/usr/bin/kivy

import mechanize

import sys

from kivy.app import App

from kivy.uix.floatlayout import FloatLayout

from kivy.uix.button import Button 

from kivy.uix.textinput import TextInput

from kivy.uix.label import Label

from kivy.uix.screenmanager import ScreenManager, Screen

class MainMenu(Screen):

pass

class HackingScreen(Screen):

pass

class AboutScreen(Screen):

pass

class HelpScreen(Screen):

pass

class HackingLayout(FloatLayout):

pass

class RootLayout(FloatLayout):

def __init__(self):

super(FloatLayout, self).__init__()

sm.current = "MainMenu"

def start(self):

sm.current = "HackingScreen"

                return HackingLayout()

def about(self):

pass

def help(self):

pass

def quit(self):

sys.exit(0)

def get_screen_manager(self):

return sm

sm = ScreenManager()

sm.add_widget( MainMenu( name = "MainMenu" ) )

sm.add_widget( HackingScreen( name = "HackingScreen" ) )

sm.add_widget( AboutScreen( name = "AboutScreen" ) )

sm.add_widget( HelpScreen( name = "HelpScreen" ) )

class MainApp(App):

def build(self):

return RootLayout()

if __name__ == '__main__':

MainApp().run()

main.kv:

<RootLayout>:

Label:

   id: title_label

   pos: root.width / 2 - self.width / 2, root.height / 2 - self.height / 2 + 150

   font_size: 50

   text: "Interletter Hacking Program"

Button:

   id: start_button

   pos: root.width / 2 - self.width / 2, root.height / 2 - self.height / 2

   text: "Start Hacking"

   size: 150, 30

   size_hint_x: None

   size_hint_y: None

   on_release: root.start()

   font_size: 19

Button:

   id: about_button

   pos: root.width / 2 - self.width / 2, root.height / 2 - self.height / 2 - 50

   text: "About"

   size: 150, 30

   size_hint_x: None

   size_hint_y: None

   on_release: root.about()

   font_size: 19

Button:

   id: help_button

   pos: root.width / 2 - self.width / 2, root.height / 2 - self.height / 2 - 100

   text: "How to use"

   size: 150, 30

   size_hint_x: None

   size_hint_y: None

   on_release: root.help()

   font_size: 19

Button:

   id: quit_button

   pos: root.width / 2 - self.width / 2, root.height / 2 - self.height / 2 - 150

   text: "Quit"

   size: 150, 30

   size_hint_x: None

   size_hint_y: None

   on_release: root.quit()

   font_size: 19

<HackingLayout>:

Button:

   id: test_button

   pos: 100, 100

   size: 150, 30

   text: "Hello World"

   size_hint_x: None

   size_hint_y: None

   font_size: 19

When I click the "Start Hacking" button, it doesn't do anything. Should it not switch to a new layout called "HackingLayout", since when we press the "Start Hacking" button, Kivy Language calls the "start" method, which switches the screen to a "HackingScreen" and returns a new HackingLayout? Should it not then remove all the widgets from the current "MainMenu" screen, switch to the HackingScreen screen and place a button at 100, 100, with the size of 150, 30 and the text of "Hello World" onto the screen?

I can't find much information on how to do this stuff with Screens and ScreenManagers, which leads me to believe this isn't how I should be doing things. If it's not, please let me know and inform me on how to do it properly. Also, if my code isn't very "Kivy-like", or if I'm not doing things the way they should be done in Kivy, please let me know.

Also note that the quit button works 100% fine :)

Thanks! Any help is appreciated!

[Milos Gradjanin]

Try defining the screen manager inside the MainApp class' build function. Add the widgets to the sm in the same place, too.
Here's a video showing just that here: http://youtu.be/aSGw-BXPSko

[Eamonn Rea]

I had to do a little bit more research, but what you said really helped me. Thanks :)

[Simi Taiwo]

Hello, I know this might seem silly as this was posted years ago, but I have encountered a problem similar to yours and i've tried everything but I can't get my screens to work. I'd really love to know how you got it to function.

Thank you.

[Elliot Garbus]

Here is an example of transitioning between 3 screens.

 

from kivy.app import App
from kivy.lang import Builder

kv = """
#:import FadeTransition kivy.uix.screenmanager.FadeTransition

ScreenManager:
    transition: FadeTransition()
    MainScreen:
        name: 'main'
    AnotherScreen:
        name: 'other'
        text: 'This is the other screen,\\nPress to go to yet another screen'
        next_screen: 'yet another'
    AnotherScreen:
        name: 'yet another'
        text: 'This is yet another screen,\\n press to go to main'
        next_screen: 'main'
    
<MainScreen@Screen>:
    Button:
        on_release: app.root.current = 'other'
        text: 'This is main,\\nPress to go to the other Screen'
        font_size: 40
            
<AnotherScreen@Screen>:
    text: 'init'
    next_screen: 'init'
    Button:
        on_release: app.root.current = root.next_screen
        text: root.text
        font_size: 40
"""


class Main1App(App):
    def build(self):
        return Builder.load_string(kv)


Main1App().run()

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/124e398f-4440-483a-948c-95e73f2aa688o%40googlegroups.com.