Simple Counter app using kivy python

In this blogs, we will be discussing about the simple counter app that has been developed in kivy python. This program is a mixture of kivy and kivymd widget. BoxLayout and Label taken from kivy whereas Button taken from kivymd.

Importing require modules to work on counter app. Below modules imported into program

import kivymd
from kivymd.app import MDApp
from kivymd.uix.boxlayout import BoxLayout
from kivymd.uix.label import MDLabel
from kivy.uix.button import Button
from kivy.lang import Builder

Creating a string where widgets are defined. Below is the string assigned to kv variable.

kv ='''
BoxLayout:
    orientation:'vertical'
    MDLabel:
        id:counter_text
        text:'0'
        font_size:100
        pos_hint:{'center_x':0.5,'center_y':0.6}
        halign:'center'
        markup:True
    BoxLayout:
        orientation:'horizontal'
        padding : 50
        spacing:100
        BoxLayout:
            orientation:'horizontal'
            Button:
                id:reset
                text: "[color=#00ffcc]RESET[/color]"
                font_size:30
                on_press:app.reset()
                md_bg_color: 0.5,0.5,0.9,1
                markup: True
        BoxLayout:
            orientation:'horizontal'
            Button:
                id:count
                text:'COUNTER'
                font_size:30
                on_press:app.increment()
                md_bg_color: 0.5,0.5,0.9,1
                size : 150,100
                markup: True

'''

Created CounterApp class with MDApp as a base class. Variable counter has been initialized with 0 value which will be used later in two functions. Building app using return statement

class CounterApp(MDApp):
    counter = 0
    def build(self):
        return Builder.load_string(kv)

Below are the functions created for incrementing counter value and reseting the counter to 0. Method increment() increments value of a counter variable by 1 each time when counter button in pressed and then displaying value of counter variable on Label text with a id ‘counter_text’. This increment() method is called when button widget with a id of ‘count’ is pressed. Method reset() makes counter variable value to 0.

def increment(self):
    self.counter += 1
    self.root.ids.counter_text.text= str(self.counter)

def reset(self):
    self.counter = 0
    self.root.ids.counter_text.text = str(self.counter)

OUTPUT

counterapp

Complete Code

import kivymd
from kivymd.app import MDApp
from kivymd.uix.boxlayout import BoxLayout
from kivymd.uix.label import MDLabel
from kivy.uix.button import Button
from kivy.lang import Builder



kv ='''
BoxLayout:
    orientation:'vertical'
    MDLabel:
        id:counter_text
        text:'0'
        font_size:100
        pos_hint:{'center_x':0.5,'center_y':0.6}
        halign:'center'
        markup:True
    BoxLayout:
        orientation:'horizontal'
        padding : 50
        spacing:100
        BoxLayout:
            orientation:'horizontal'
            Button:
                id:reset
                text: "[color=#00ffcc]RESET[/color]"
                font_size:30
                on_press:app.reset()
                md_bg_color: 0.5,0.5,0.9,1
                markup: True
        BoxLayout:
            orientation:'horizontal'
            Button:
                id:count
                text:'COUNTER'
                font_size:30
                on_press:app.increment()
                md_bg_color: 0.5,0.5,0.9,1
                size : 150,100
                markup: True

'''

class CounterApp(MDApp):
    counter = 0
    def build(self):
        return Builder.load_string(kv)


    def increment(self):
        self.counter += 1
        self.root.ids.counter_text.text= str(self.counter)

    def reset(self):
        self.counter = 0
        self.root.ids.counter_text.text = str(self.counter)

CounterApp().run()

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s