41. ScreenManager

Many applications will use multiple screens. If so, the Screen and ScreenManager class can be used.

---

The ScreenManager and Screen class are imported. The ScreenManager will be used for the root. The ListProperty will be used to hold the selected color list.

---

These are the three Screens in this example.

---

The root is based on ScreenManager, and the selected color list variable will be stored in this class.

# ex41.py

from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.app import App
from kivy.properties import ListProperty

class ScreenCircle(Screen):
    pass

class ScreenSquare(Screen):
    pass

class ScreenColor(Screen):
    pass

class Ex41(ScreenManager):
    selected_color = ListProperty([1,0,0,1])
          
class Ex41App(App):
    def build(self):
        return Ex41()

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

---

In the kv file, we import RiseInTransition. We have to give a transition between screens. Otherwise the default sliding transition will be used. We start the kv code for the first screen. It's name is 'screen_color'. It will have ColorPicker as its widget. The color and on_color, connect the color, to the ListProperty.

---

There are two buttons in the ScreenColor screen. When pressed, we will go to either of the two screens, by changing the current property of the manager.

---

The other screen, ScreenCircle, draws a circle with the selected color.

---

It has 2 buttons to go to one of the other 2 screens.

---

The ScreenSquare Screen draws a rectangle with the selected color.

---

These two buttons will select one of the two other screens.

---

Our root is the manager. The background is set as white. The transition is defined and then the list of screens. The first Screen here, ScreenCircle, will be the screen opened first, when the kivy program is run.

# ex41.kv
#:import RiseInTransition kivy.uix.screenmanager.RiseInTransition

<ScreenColor>:
    name: 'screen_color'
    ColorPicker:
        color: root.manager.selected_color
        on_color: root.manager.selected_color=self.color
    Button:
        text: 'Go to circle'
        size_hint: None,None
        size: 100,100
        pos: 500,0
        on_press: root.manager.current = 'screen_circle'
    Button:
        text: 'Go to square'
        size_hint: None,None
        size: 100,100
        pos: 600,0
        on_press: root.manager.current = 'screen_square'

<ScreenCircle>:
    name: 'screen_circle'
    canvas:
        Color:
            rgba: root.manager.selected_color
        Ellipse:
            size: 250,250
            pos: 150,150
    Button:
        text: 'Go to square'
        size_hint: None, None
        size: 100,100
        pos: 0,0
        on_press: root.manager.current = 'screen_square'
    Button:
        text: 'Select Color'
        size_hint: None,None
        size: 100,100
        pos: 300,0
        on_press: root.manager.current = 'screen_color'

<ScreenSquare>:
    name: 'screen_square'
    canvas:
        Color:
            rgba: root.manager.selected_color
        Rectangle:
            size: 250,250
            pos: 150,150
    Button:
        text: 'Go to circle'
        size_hint: None,None
        size: 100,100
        pos: 0,0
        on_press: root.manager.current = 'screen_circle'
    Button:
        text: 'Select Color'
        size_hint: None,None
        size: 100,100
        pos: 300,0
        on_press: root.manager.current = 'screen_color'

<Ex41>:
    canvas:
        Color:
            rgb: 1,1,1
        Rectangle:
            size: self.size
            pos: self.pos
    transition: RiseInTransition()
    ScreenCircle:
    ScreenSquare:
    ScreenColor:
        

---

Demo of App on Youtube