Python Kivy: Build a standard calculator application – GUI part-2

In the previous part, we have set up the basic structure of our calculator application using Python Kivy. In this part, we will focus on building the graphical user interface (GUI) of our calculator.

Step 1: Creating the Layout

The first step in building the GUI for our calculator application is to create a layout for the buttons and input field. We will use the Kivy BoxLayout and GridLayout to arrange the buttons and input field in a neat and organized manner. Here’s the code for creating the layout:

“`python
BoxLayout:
orientation: ‘vertical’
TextInput:
id: display
font_size: 50
size_hint_y: 0.4
multiline: False

GridLayout:
cols: 4
rows: 5

Button:
text: ‘7’
Button:
text: ‘8’
Button:
text: ‘9’
Button:
text: ‘+’

Button:
text: ‘4’
Button:
text: ‘5’
Button:
text: ‘6’
Button:
text: ‘-‘

Button:
text: ‘1’
Button:
text: ‘2’
Button:
text: ‘3’
Button:
text: ‘*’

Button:
text: ‘.’
Button:
text: ‘0’
Button:
text: ‘C’
Button:
text: ‘/’

Button:
text: ‘DEL’
Button:
text: ‘=’
“`

In this code, we have used the BoxLayout to stack the input field on top of the GridLayout which contains the buttons for numbers and operators. We have also set the font size, size hint, and other properties to make the layout look presentable.

Step 2: Binding the Buttons

Now that we have created the layout, the next step is to bind the buttons to the appropriate functions. We will use the Kivy on_press event to bind the buttons and define their functionality. Here’s the code for binding the buttons:

“`python
Button:
text: ‘7’
on_press: app.update_display(‘7’)
Button:
text: ‘8’
on_press: app.update_display(‘8’)
Button:
text: ‘9’
on_press: app.update_display(‘9’)
Button:
text: ‘+’
on_press: app.update_display(‘+’)
Button:
text: ‘4’
on_press: app.update_display(‘4’)
Button:
text: ‘5’
on_press: app.update_display(‘5’)
Button:
text: ‘6’
on_press: app.update_display(‘6’)
Button:
text: ‘-‘
on_press: app.update_display(‘-‘)
Button:
text: ‘1’
on_press: app.update_display(‘1’)
Button:
text: ‘2’
on_press: app.update_display(‘2’)
Button:
text: ‘3’
on_press: app.update_display(‘3’)
Button:
text: ‘*’
on_press: app.update_display(‘*’)
Button:
text: ‘.’
on_press: app.update_display(‘.’)
Button:
text: ‘0’
on_press: app.update_display(‘0’)
Button:
text: ‘C’
on_press: app.clear_display()
Button:
text: ‘/’
on_press: app.update_display(‘/’)
Button:
text: ‘DEL’
on_press: app.delete_last()
Button:
text: ‘=’
on_press: app.calculate()
“`

In this code, we have used the on_press event to bind the buttons to the update_display, clear_display, delete_last, and calculate functions. These functions will handle the input and perform the calculations based on the user’s input.

Step 3: Running the Application

Now that we have created the layout and bound the buttons to the appropriate functions, we can run the application to see the GUI in action. We can use the Python kivy.main module to run the application. Here’s the code for running the application:

“`python
if __name__ == ‘__main__’:
CalculatorApp().run()
“`

With this code, we are running the CalculatorApp which is the main application class that we have defined in the previous part. When we run this code, we will see the graphical user interface of our calculator application with the layout and buttons in place.

Conclusion

In this part, we have learned how to build the graphical user interface (GUI) for our standard calculator application using Python Kivy. We have created a layout for the input field and buttons, bound the buttons to the appropriate functions, and run the application to see the GUI in action. In the next part, we will focus on implementing the functionality for performing calculations based on the user’s input.