My first Application in kivy
By: Yugam Sachdeva
Tags: Crossplatform Mobile App, Android App Development, Python, Application Development, Kivy

If you have started learning kivy and your all basic concepts related to kivy are cleared, then you will be excited to build your very first app and looking for a basic idea to build an app.

My suggestion to build a basic app like a calculator because it is easy to build a calculator for a person who’s new to the framework and as well as it will help you understand various new concepts related to the kivy framework.

And one of the main reasons i chose calculator is that when we fail to do our first task successfully we tend to drop learning the language. So my advice is to start with an easy task that can be completed and that will motivate you to learn this framework further, as small achievement gives you great motivation to strive for more

Build an attractive Interface

Before building your application interface, you must keep in mind that your application interface should look attractive and also be simple enough which can be operated by a non-technical user.

Start building

We all are very much familiar with a calculator and must know that a calculator interface consist of numbers of buttons like count(0–9), operators(+,_,*,/), etc.

Problem

Now, most of the newbies will start creating each button separately by writing each button object but this will increase the lines of code and will make your program complex.

How to solve this problem?

If you have experience of any programming language you must be aware of the loop concept and we are going to apply that concept here.

By using for loop we can create multiple buttons by writing a few lines of code and can set different parameters for each button separately.

let me show you how it will work:

from kivy.app import App

from kivy.uix.floatlayout import FloatLayout

from kivy.uix.textinput import TextInput

from kivy.uix.button import Button

from kivy.core.window import Window #window size

w,h=Window.size #class for first screen class Display(FloatLayout):

string=""

def __init__(self,*args):

super().__init__(*args)

self.text_field=TextInput(font_size=60,hint_text="Enter the values here",text="",size_hint=(0.8,0.05),pos_hint={'x':0.1,'y':0.85})

self.add_widget(self.text_field)



btn_list=['C','(',')','/','7','8','9','*','4','5','6','+','1','2','3','-','0','','.','=']

Y=0.5

X=0.025

n=1

for i in range(20):

if n==18:

pass

else:

self.btn=Button(text=btn_list[i],size_hint=(0.2,0.1),pos_hint={'x':X,'y':Y},)

self.add_widget(self.btn)

self.btn.background_color = (1, 1, 1, 1)

self.btn.color=(0,0,0,1)

self.btn.font_size=w*0.05

self.btn.bind(on_press=self.calculation)



if n%4==0:

Y-=0.125

X=0.025

self.btn.background_color=(1,0.49,0.31,1)

self.btn.color=(1,1,1,1)

else:

X+=0.25



if n==17:

self.btn.size_hint_x=0.45

if n==20:

self.btn.background_color=(0,1,0,1)



n+=1

def calculation(self,instance):

pass



#Main class

class calci(App):

def build(self):

return Display()



calci().run()

Output

Explanation

In the above code, we have created one text field where all the calculations part will be displayed.

And then we’ve created a list carrying the button name we want to add in the interface and then started a for loop in which button is being created one by one but we need to put text and position as variable because every button will have different text as well as different position. As you can see we are putting text from the above list that we have created and position is also varying from button to button. We have also given different colours. Like this different parameter is passed to different buttons.

Now, these all buttons should perform a function but if you have noticed that we have bound all the buttons with the same function. So how will the function differentiate which button is clicked by the user?

For that, you will have to understand the concept of instance.

What is an instance?

When we bind a button with a function then it will send all its information like its text, size, position, etc. on doing that binded action.

And all of the information will be store as an instance in that function, so you have to mention a parameter in that function as instance or by any other name.

Now, we will prepare that function so that our application will work according to the demand of the user.

def calculation(self,instance):

a=instance.text

if a=="=":

try:

self.string=self.text_field.text

self.text_field.text=str(eval(self.string))

self.string=self.text_field.text

except SyntaxError:

self.text_field.text="syntax error!"

self.string=""

except TypeError:

self.text_field.text="pass wrong input!"

self.string=""

except NameError:

self.text_field.text="syntax error!"

self.string=""

except:

self.text_field.text="syntax error!"

self.string=""

elif a=="C":

self.string=self.string[0:-1]

self.text_field.text=self.string

else:

self.string+=a

self.text_field.text=self.string

Replace this function with the function of the above code and your application will start working.

Output

Explanation

So what’s going on in this function is, initially, the function is identifying which button is clicked by the user by checking it’s text which is present in instance parameter.

And then if the equal button is clicked, the function is picking the text field input and solving it using an inbuilt function in python which is eval().

eval() function is used to solve the mathematical expression by BODMAS rule.

If it will face any kind of exception then it will be handled by exception handling and will show output according to the type of error.

If the Clear button is clicked, it will decrease the text field value by one letter.

Else every button will do the same thing that adds their value in the text field. Similarly like this you can allot functioning to every button.

That’s how this function works and calculates the values. In this way you can build your own calculator and add more functions to it like trigonometry, power, root etc and also you can make it more attractive.