Navigation Between Multiple Screens

This kivy tutorial will cover how to create and navigate between multiple screens. We will do this using something called a screen manager.

Importing Modules

We need to import the following modules before starting.

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

Using a Builder for .kv File

Kivy has something called a builder that allows us to directly load any kv file that we would like. This allows us to avoid using the strange naming conventions that we had to follow before.

We use it like so.

kv = Builder.load_file("my.kv")


class MyMainApp(App):
    def build(self):
        return kv


if __name__ == "__main__":
    MyMainApp().run()

In this example the name of my main app class is MyMainApp and the name of my kv file is my.kv

Setting up The Python Script

For each window that we would like to create we need to make an empty class that inherits from the Screen class. If we are going to be working with more than one window then we need to create a class that will manage the navigation between this windows. This class will need to inherit from ScreenManager.

class MainWindow(Screen):
    pass


class SecondWindow(Screen):
    pass


class WindowManager(ScreenManager):
    pass

And that is all we need to do from within our python script.

Creating the GUI

For this example I will use a standard login form similar to the ones we've created previously. One window will be the login form and the other will simply have a button that allows us to navigate back to the form.

At the top of our kv file we will define what screens/windows will go inside of our ScreenManager simply by indenting them underneath the ScreenManager class's tag.

We also need to ensure that we add a name attribute for each of our screens/windows. This will be what we use to navigate between them.

WindowManager:
    MainWindow:
    SecondWindow:

<MainWindow>:
    name: "main"

    GridLayout:
        cols:1

        GridLayout:
            cols: 2

            Label:
                text: "Password: "

            TextInput:
                id: passw
                multiline: False

        Button:
            text: "Submit"



<SecondWindow>:
    name: "second"

    Button:
        text: "Go Back"

Adding Navigation

To add navigation between our pages we simply need to add an on_release event to each of our buttons.

We can also choose the direction that we want the screen to move in when performing the transition.

WindowManager:
    MainWindow:
    SecondWindow:

<MainWindow>:
    name: "main"

    GridLayout:
        cols:1

        GridLayout:
            cols: 2

            Label:
                text: "Password: "

            TextInput:
                id: passw
                multiline: False

        Button:
            text: "Submit"
            on_release:
                app.root.current = "second"
                root.manager.transition.direction = "left"


<SecondWindow>:
    name: "second"

    Button:
        text: "Go Back"
        on_release:
            app.root.current = "main"
            root.manager.transition.direction = "right"

Finally if we want to make it so that the user has to type a specific password before being able to move the next screen we can modify the on_press of our first button.

Button:
    text: "Submit"
    on_release:
    app.root.current = "second" if passw.text == "tim" else "main"
    root.manager.transition.direction = 

Now we will only be able to move to the next window if we input "tim" in the password box.

Full Code

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


class MainWindow(Screen):
    pass


class SecondWindow(Screen):
    pass


class WindowManager(ScreenManager):
    pass


kv = Builder.load_file("my.kv")


class MyMainApp(App):
    def build(self):
        return kv


if __name__ == "__main__":
    MyMainApp().run()
WindowManager:
    MainWindow:
    SecondWindow:

<MainWindow>:
    name: "main"

    GridLayout:
        cols:1

        GridLayout:
            cols: 2

            Label:
                text: "Password: "

            TextInput:
                id: passw
                multiline: False

        Button:
            text: "Submit"
            on_release:
                app.root.current = "second" if passw.text == "tim" else "main"
                root.manager.transition.direction = "left"


<SecondWindow>:
    name: "second"

    Button:
        text: "Go Back"
        on_release:
            app.root.current = "main"
            root.manager.transition.direction = "right"