How to use Kivy ScreenManager to build a basic multi screen application

Test Environment

Fedora 31 with Kivy installed

What is ScreenManager –

Kivy ScreenManager is a kind of Widget which help in building and managing multi screen applications. The default ScreenManager displays only one screen at a time. These screens can be switched between each other based on condition or event configured in the application. Also, the ScreenManager supports various types of Transition methods for user interfaces. This Widget can be useful to build Mobile Application where in we want to divide our applications into multi screens like for a gaming application we can have a Menu, Instruction, Game Area and Final Score screen separated from each other and called as per the requirement in the application.

In this video we will try to use ScreenManager to build a multi screen application in which the first screen displays a form type of UI with Labels and TextInput which accept input from user and when this form is submitted the user provided data is displayed in the second screen along with a return button which when clicked it will take us to the first screen of our appliation. We also enhance our UI apperance by applying canvas and background image along with some font modification to our Labels.

So, let see how we can build this application in this video below. If you are intereseted in reading you can find the step by step procedure shown below.

Procedure –

Step1: Create application named sreenapp.py to launch empty Window with ScreenManager as its root Widget

Here in this step we are extending the ScreenManager base call with Manager child class which will be the root widget element for this application. This will launch an empty window with Manager as the root widget element.

[admin@fed31 screening]$ cat screenapp.py 
#!/usr/bin/env python

import kivy
kivy.require('1.11.1')

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager

class Manager(ScreenManager):
    pass

class ScreenApp(App):
    def build(self):
        return Manager()

if __name__ == '__main__':
    ScreenApp().run()

Step2: Create kv file name screenapp.kv to represent our ScreenManager UI with two Screens

Here in this step we are creating a kv file to add two Screens to our ScreenManager. As of now we did not defined how our screen look so this will show an empty screen when launched.

[admin@fed31 screening]$ cat screenapp.kv 
#:kivy 1.11.1

<Manager>:
    Screen:
        name: 'screen1'
    Screen:
        name: 'screen2'

Step3: Add BoxLayout to our Screens to represent our UI with Labels and Buttons

In this step we will try to use BoxLayout to add Child Widgets like Label, TextInput and Submit Button to our first screen and in our second screen we will add Label and Return Button as show in below updated kv file.

For each of the Label in our first screen we have given an identifier name to get a reference to our Child Widget instance. In our second screen we are getting the Label text data from this identifier using identifier.text (ie. firstname.text and secondname.text)

The Submit and Return Button on screen1 and screen2 bind to the on_release event to change the current screen.

[admin@fed31 screening]$ cat screenapp.kv 
#:kivy 1.11.1

<Manager>:
    Screen:
        name: 'screen1'
        BoxLayout:
            orientation: 'vertical'
            Label:
                text: 'First Name'
                font_size: 32
                bold: True
            TextInput:
                id: firstname
                hint_text: 'Enter First Name'
            Label:
                text: 'Second Name'
                font_size: 32
                bold: True
            TextInput:
                id: secondname
                hint_text: 'Enter Second Name'
            Button:
                text: 'Submit'
                font_size: 32
                bold: True
                on_release:
                    root.current = 'screen2'
    Screen:
        name: 'screen2'
        BoxLayout:
            orientation: 'vertical'
            Label:
                text: firstname.text
                bold: True
                font_size: 32
            Label:
                text: secondname.text
                bold: True
                font_size: 32
            Button:
                text: "Return"
                bold: True
                font_size: 32
                on_release:
                    root.current = 'screen1'

Step4: Apply Canvas and Background image to our application

Here we will apply Canvas to our ScreenManager which will show a background image with ligth red color for appearance. The modification to our kv file are as shown below in the snippet. For the complete code refer to the github link – 

[admin@fed31 screening]$ cat screenapp.kv 
#:kivy 1.11.1

<Manager>:
    canvas:
        Color:
            rgba: .75, 0, 0, 1
        Rectangle:
            size: self.size
            pos: self.pos
            source: 'serenity.jpg' 
    Screen:
        name: 'screen1'
...
    Screen:
        name: 'screen2'
        BoxLayout:
            orientation: 'vertical'
            Label:
                text: firstname.text
                bold: True
                font_size: 32
            Label:
                text: secondname.text
                bold: True
                font_size: 32
            Button:
                text: "Return"
                bold: True
                font_size: 32
                on_release:
                    root.current = 'screen1'