Toggle Button using .kv file

Introduction

In this article, we will be covering Toggle Button a Python using a GUI tool that works on any platform provided by Kivy module python. We will also see how to use the .kv file in Kivy for developing the layout of the application. This article assumes that you have been somewhat familiar with Basics of Python otherwise it will be a bit difficult to understand it at first glance however you can still go through this article.

Implementation of Toggle Button

This article covers the use of the Toggle Button using kivy in python through the .kv file. Let us understand it in detail, ToggleButton is a checkbox-like widget. When you touch or click it, the status changes from 'normal' to 'down' (unlike a Button, which is just 'down' when pushed)

Toggle buttons can also be combined to create radio buttons; however, only one of the buttons in a group can be in the 'down' position. A string or any other hashable Python object can be used as the group name:

malebtn = ToggleButton(text='Male', group='sex', )
femalebtn = ToggleButton(text='Female', group='sex', state='down')
transbtn = ToggleButton(text='Trans', group='sex')

You can also try this code with Online Python Compiler

Run Code

At any given moment, only one of the buttons can be 'down'/checked. You may use the same attributes that you would for a Button class to configure the ToggleButton.

Implementation

In this section, we will look at the implementation of the Toggle button in python using kivy. Let's see the algorithm given below:

1. Firstly, we will import all the necessary modules like Kivy App, Widget, ToggleButton widget which acts like a checkbox and Gridlayout which arranges children in a matrix. It takes the available space and divides it into columns and rows, then adds widgets to the resulting “cells”.

from kivy.app import App
 
from kivy.uix.widget import Widget
from kivy.uix.togglebutton import ToggleButton
from kivy.uix.gridlayout import GridLayout
 
from kivy.lang import Builder
 
Builder.load_file('togglebtn.kv')

You can also try this code with Online Python Compiler

Run Code

2. Next we will create the Layout, Widget and the App class 

class Widgets(Widget):
   def btn(self):
       show_toggle()
 
class Toggle_btn(GridLayout):
   pass
 
class TogglebtnApp(App):
   def build(self):
       return Toggle_btn()

You can also try this code with Online Python Compiler

Run Code

3. We also need to create a show_toggle function that will show the button from the .kv file and open the toggleWindow containing the button.

def show_toggle():
   show = Toggle_btn()
 
   toggleWindow = ToggleButton(title="Toggle Window", content=show,
                       size_hint=(None, None), size=(200, 200))
   toggleWindow.open()

You can also try this code with Online Python Compiler

Run Code

4. Finally we can run our App instance.

# Run the App
if __name__ == '__main__':
   TogglebtnApp().run()

You can also try this code with Online Python Compiler

Run Code

.kv Code

The .kv file is where the two-button and their specifications (size, colour, background colour, etc ) are defined.

# .kv file implementation of the code


<Toggle_btn>:


    # Columns divides screen in two parts
    cols:2


    # Create Toggle button 1
    RelativeLayout:
        canvas:
            Color:
                rgb: 1, 65, 0
            Rectangle:
                size: root.width, root.height
        ToggleButton:
            size_hint: None, None
            size: 0.25 * root.width, 0.25 * root.height
            pos: 0.125 * root.width, 0.350 * root.height
            text: 'Toggle Button 1'
            group: 'geometry'


# Create Toggle button 2
    RelativeLayout:
        canvas:
            Color:
                rgb: 2, 2, 2
            Rectangle:
                size: root.width, root.height
        ToggleButton:
            size_hint: None, None
            size: 0.25 * root.width, 0.25 * root.height
            pos: 0.125 * root.width, 0.350 * root.height
            text: 'Toggle Button 2'
            group: 'geometry'

Output