35. ToggleButton

ToggleButtons are very similar to Buttons, however, their on state persists, until the next press. ToggleButtons have a property called state, which can be 'normal' or 'down' for off and on states. Here, we will not use the state property. However, we will use them in the next Tutorial.

---

The root is based on GridLayout, and we have to import the App class to create an app. We create an empty class which will be defined in the kv file.

---

A subclass of the App class is created, and we override the App class build() method to return the root. Before the build() is called, we have to start the process with the run() method of the App class.

# ex35.py

from kivy.uix.gridlayout import GridLayout
from kivy.app import App

class Ex35(GridLayout):
    pass
        
class Ex35App(App):
    def build(self):
        return Ex35()

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

---

In the kv file, we set columns as 2. We will have 4 RelativeLayouts next. Since we do not set the size, we will have a 2 by 2 grid, with each RelativeLayout getting the same size. The background for the first RelativeLayout is red.

---

The first ToggleButton size and position isset. All other ToggleButtons will have the same size and relative position. For the first ToggleButton, the text is 'Toggle Button 1'.

---

For the second RelativeLayout with background color of green, the ToggleButton position and size are same. It's text is 'Toggle Button 2'.

---

For the third ToggleButton with a background RelativeLayout of blue, the text is 'Toggle Button 3'. It is part of a group. In a group, only one member may have on state at a particular time.

---

ToggleButton 4 is in the same group as ToggleButton 3. Thus either this ToggleButton is on or the other ToggleButton is on. It is possible for both ToggleButtons to be off.

# ex35.kv

<Ex35>:
    cols: 2
    RelativeLayout:
        canvas:
            Color:
                rgb: 1,0,0
            Rectangle:
                size: root.width/2,root.height/2
        ToggleButton:
            size_hint: None, None
            size: 0.25*root.width,0.25*root.height
            pos: 0.125*root.width,0.125*root.height
            text: 'Toggle Button 1'
            
    RelativeLayout:
        canvas:
            Color:
                rgb: 0,1,0
            Rectangle:
                size: root.width/2,root.height/2
        ToggleButton:
            size_hint: None, None
            size: 0.25*root.width,0.25*root.height
            pos: 0.125*root.width,0.125*root.height
            text: 'Toggle Button 2'

    RelativeLayout:
        canvas:
            Color:
                rgb: 0,0,1
            Rectangle:
                size: root.width/2,root.height/2
        ToggleButton:
            size_hint: None, None
            size: 0.25*root.width,0.25*root.height
            pos: 0.125*root.width,0.125*root.height
            text: 'Toggle Button 3'
            group: 'geometry'

    RelativeLayout:
        canvas:
            Color:
                rgb: 0,1,1
            Rectangle:
                size: root.width/2,root.height/2
        ToggleButton:
            size_hint: None, None
            size: 0.25*root.width,0.25*root.height
            pos: 0.125*root.width,0.125*root.height
            text: 'Toggle Button 4'
            group: 'geometry'
            

---

This is the result. The first two ToggleButtons in row 1 are independent, and so both can be on. However, in the second row, the two belong to the same group. Thus, if the first is selected, and we select the second, the first will be deselected. Most applications will use ToggleButtons, rather than regular Buttons, in the toolbar to give, a visual clue of the selected tool.

---