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.
Create screenapp.py to launch empty Window with ScreenManager as root widget |
---|
[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.
Create screenapp.kv to add two screen widgets to the screenmanager |
---|
[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.
Updated screenapp.kv to represent UI with Labels and Buttons |
---|
[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 –
Apply Canvas and Background image to our application |
---|
[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' |
With these modifications we will be able to launch our application and on providing input in our first screen and clicking on the Submit button, it will try to load our second screen with our input data on it. We also have a return button in our second screen which when clicked will take us back to our first screen.
Hope you enjoyed reading this article or watching the video. Thank you.
Leave a Reply
You must be logged in to post a comment.