Python | ScreenManager in Kivy using .kv file



Kivy — it is a platform independent GUI tool in Python. Since it can run on Android, IOS, Linux, Windows, etc. It is mainly used to develop Android application, but that does not mean that it cannot be used in desktop applications.

ScreenManager Widget:

Screen Manager — it is a widget that is used to manage multiple screens for your application. ScreenManager by default only displays one screen at a time and uses TransitionBase to switch from one screen to another. Multiple transitions are supported.

The ScreenManager and Screen classes are imported. ScreenManager will be used for the root as:

 from kivy.uix.screenmanager import ScreenManager, Screen 

Note. By default, ScreenManager.transition is a SlideTransition with options direction and duration.

  Basic Approach:  1) import kivy 2) import kivyApp 3) import Screen Manager, Screen, "" Transitions you want to use "" 4) Set minimum version (optional) 5) Create Different Screen classes and pass them 6) Create features of Screen classes in .kv file :: Add features in different screens 7) Create App class 8) return screen manager 9) Run an instance of the class  

Below is a code implementation with .kv file .py .

# Program to show how to create a radio button
# import nodded m module

import kivy 

  
# Your application base class inherits from the application class.
# app: always refers to an instance of your application

from kivy.app import App 

  
# this limits the kivy version ie
# you cannot lower this version
# use application or software

kivy.require ( `1.9.0` )

 
# Builder is used when .kv file
# for use in a .py file

from kivy.lang import Builder

 
# The screen manager is a widget
# dedicated to managing multiple screens for your application.

from kivy.uix.screenmanager import ScreenManager, Screen

  
# You can create your kv code in the file Python

Builder.load_string ( "" "

& lt; ScreenOne & gt ;:

BoxLayout:

Button:

text: “Go to screen 2 "

  background_color: 0, 0, 1, 1

on_press:

  # You can define the duration of the change

# and direction slip

root.manager.transition.direction = & # 39; left & # 39;

root.manager.transition.duration = 1

root.manager.current = & # 39; screen_two & # 39;

 
& lt; ScreenTwo & gt ;:

BoxLayout:

Button:

text:" Go to Screen 3 "

  background_color: 1, 1, 0 , 1

on_press:

root.manager.transition.direction = & # 39; left & # 39;

  root.manager.transition.duration = 1

  root.manager.current = & # 39; screen_three & # 39;

 
& lt; ScreenThree & gt ;:

BoxLayout:

Button:

text: "Go to Screen 4"

background_color: 1, 0, 1, 1

  on_press:

root.manager.transition.direction = & # 39 ; left & # 39;

root.manager.transition.duration = 1

root.manager.current = & # 39; screen_four & # 39;

 
& lt; ScreenFour & gt ;:

BoxLayout:

  Button:

text: "Go to Screen 5"

background_color: 0, 1, 1, 1

on_press:

root.manager.transition.direction = & # 39; left & # 39;

root.manager.transition.duration = 1

root.manager.current = & # 39; screen_five & # 39;

 
& lt; ScreenFive & gt ;:

BoxLayout:

  Button:

  text: "Go to Screen 1"

background_color: 1, 0, 0, 1

on_press:

root.manager.transition.direction = & # 39; right & # 39;

root.manager.current = & # 39; screen_one & # 39;

 

 

"" " )

 
# Create class for all screens you can include
# useful methods specific to this screen

class ScreenOne (Screen):

  pass

  

class ScreenTwo (Screen):

pass

 

class ScreenThree (Screen):

pass

 

class ScreenFour (Screen):

pass

 

class ScreenFive (Screen):

pass

  

 
# ScreenManager controls movement between screens

screen_manager = ScreenManager ()

 
# Add screens to the manager and then provide a name
# used to switch screens

screen_manager.add_widget (ScreenOne (name = "screen_one" ))

screen_manager.add_widget (ScreenTwo (name = "screen_two" ))

screen_manager.add_widget (ScreenThree ( name = "screen_three" ))

screen_man ager.add_widget (ScreenFour (name = "screen_four" ))

screen_manager.add_widget (ScreenFive (name = "screen_five" ))

 
# Create application class

class ScreenApp (App):

def build ( self ):

  return screen_manager

 
# run application

sample_app = ScreenApp ()

sample_app.run ()

Output:

Change transitions:

You have multiple transitions available by default, such as:

  • NoTransition - switches screens instantly with no animation
  • SlideTransition - slide the screen in / out, from any direction
  • CardTransition - new screen slides on the previous or the old one slides off the new one depending on the mode
  • SwapTransition - implementation of the iOS swap transition
  • FadeTransition - shader to fade the screen in / out
  • WipeTransition - shader to wipe the screens from right to left
  • FallOutTransition - shader where the old screen `falls` and becomes transparent, revealing the new one behind it.
  • RiseInTransition - shader where the new screen rises from the screen center while fading from transparent to opaque.

You can easily switch transitions by changing the ScreenManager.transition property:

 sm = ScreenManager (transition = FadeTransition ()) 

# Program, to show how to create a radio button
# import nimble module

import kivy 

 
# Base class for your application inherits from the application class.
# app: always refers to your application instance

from kivy.app import App 

 
# this limits the kivy version ie
# below this version you are not you can
# use the application or software

kivy.require ( `1.9.0` )

  
# Builder is used when a .kv file
# for use in a .py file

from kivy.lang import Builder

  
# The screen manager is a widget
# dedicated to managing multiple screens for your application.

from kivy.uix.screenmanager import (ScreenManager, Screen, NoTransition,

SlideTransition, CardTransition, SwapTransition,
FadeTransition, WipeTransition, FallOutTransition, RiseInTransition) 

 
# You can create your kv code in Python file

Builder.load_string ( "" "

& lt; ScreenOne & gt ;:

BoxLayout:

Button:

text: "Go to Screen 2"

background_color: 0, 0, 1, 1

  on_press:

# You can define change duration

# and slide direction

root.manager.transition.direction = & # 39; left & # 39;

root.manager.transition.duration = 1

root.manager.current = & # 39; screen_two & # 39;

 
& lt; ScreenTwo & gt ;:

  BoxLayout:

Button:

  text:" Go to Screen 3 "

background_color: 1, 1, 0, 1

on_press:

root.manager.transition.direction = & # 39; left & # 39;

  root.manager.transition.duration = 1

root.manager.current = & # 39 ; screen_three & # 39;

 
& lt; ScreenThree & gt ;:

BoxLayout:

Button:

text: "Go to Screen 4"

background_color: 1, 0, 1, 1

on_press:

root.manager.transition.direction = & # 39; left & # 39;

root.manager.transition.duration = 1

root.manager.current = & # 39; screen_four & # 39;

 
& lt; ScreenFour & gt ;:

BoxLayout :

Button:

text: "Go to Screen 5"

background_color: 0, 1, 1, 1

on_press:

root.manager.transition. direction = & # 39; left & # 39;

root.manager.transition.duration = 1

root.manager.current = & # 39; screen_five & # 39;

 
& lt; ScreenFive & gt ;:

BoxLayout:

Button:

text: “Go to screen 1 "

  background_color: 1, 0, 0, 1

on_press:

  root.manager.transition.direction = & # 39; right & # 39;

root.manager.current = & # 39; screen_one & # 39;

  

  

" "" )

 
# Create a class for all screens which you can include
# useful methods specific to this screen

class ScreenOne (Screen):

pass

 

class ScreenTwo (Screen):

  pass

 

class ScreenThree (Screen):

pass

 

class ScreenFour (Screen):

pass

 

class ScreenFive (Screen):

pass

 

 
# ScreenManager controls movement between screens
# You can change transitions accordingly

screen_manager = ScreenManager (transition = RiseInTransition ())

  
# Add screens to the manager and then provide a name # used to switch screens

screen_manager.add_widget (ScreenOne (name = "screen_one" ))

screen_manager.add_widget (ScreenTwo (name = " screen_two " ))

screen_manager.add_widget (ScreenThree (name = " screen_three " ))

screen_manager.add_widget (ScreenFour (name = "screen_four" ))

screen_manager.add_widget (ScreenFive (name = "screen_five" ))

  
# Create application class

class ScreenApp (App):

def build ( self ):

return screen_manager

 
# run the application

sample_app = ScreenApp ()

sample_app.run ()

Note: the code is the same, some points have been added to the code, do not confuse.

Output video of different transitions —