Screen Manager for Multiple Screens

In this Kivy tutorial, we cover the Kivy Screen Manager. Any medium to large application is going to have multiple windows. Even if it is something as simple as a login screen that leads to a home screen that allows you to visit a settings screen, you are going to need a way to move to and from the screens.

Kivy works bit like Tkinter, where you just simply bring the main screen to the foreground, but, luckily for us, Kivy does this for us much easier than Tkinter does!

We can use the Screen Manager to store the possible screens, and bring the current screen to the front for the viewer. Not only this, but Kivy also has some basic transitions to make the movement between screens feel a bit better to the user. We'll use the "fade transition" here.

First, let's write our python file:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition

class MainScreen(Screen):
    pass

class AnotherScreen(Screen):
    pass

class ScreenManagement(ScreenManager):
    pass

presentation = Builder.load_file("main.kv")

class MainApp(App):
    def build(self):
        return presentation

MainApp().run()
	  

Above, we're now importing the ScreenManager, Screen, and the FadeTransition that we intend to use

Next, we create our MainScreen class, and our AnotherScreen class. These will be the two "screens" for our application.

Then we create the ScreenManagement class, which will inhereit from the ScreenManager class. We're going to use this class for the screen management.

The rest of the code is the same as previous tutorials up to this point.

Now we visit the .kv file, which we've explicitly called main.kv in our python script.

ScreenManagement:
    transition: FadeTransition()
    MainScreen:
    AnotherScreen:
	
<MainScreen>:
    name: 'main'

    Button:
        on_release: app.root.current = 'other'
        text: 'Another Screen'
        font_size: 50
            
<AnotherScreen>:
    name: 'other'

    Button:
        on_release: app.root.current = 'main'
        text: 'back to the home screen'
        font_size: 50
		

With this, you should have a resulting program that knows to switch screens with the click of a button.

The next tutorial: Drawing Application with Screen Manager