Beginner Kivy Tutorial: Basic Crash Course for Apps in Kivy

Beginner Kivy Tutorial: Basic Crash Course for Apps in Kivy

Kivy is an open source, cross-platform Python framework for the development of applications that make use of innovative, multi-touch user interfaces.

Note: This post was originally published here.

Prerequisites

In order to work with Kivy, you must be familiar with Python.

Content

This post will cover very basic applications (absolute beginners in Kivy) in which you just add (+1) or subtract (-1) using 2 buttons and update the new value to a label. By the end of this tutorial, you will have (I hope) some good knowledge and understanding of how to work with Kivy. Here are some of the things we will cover in this post:

• Getting started
• App( ) method & GridLayout in detail
• What is `build` method and what does it do?
• Structuring your app
• What are on_release and id?
• ObjectProperty

Getting started

Alrighty then, let’s start with a black window that does nothing.

Create a main.py file.

and create a main.kv file

Current file structure:

Basic_app/
  -  main.py
  -  main.kv

and there you have it.

App( ) method & GridLayout in detail

Let’s pause for a second and see what we did there.

from kivy.app import App

One of the things I love about Kivy is that it is very well documented and the documentations are very easy to understand. Visit kivy/app.py for more information. Back to the question, why did we do this?

this is why:

if __name__ == "__main__":
  app = MainApp()
  app.run()

using App.run() we started the application’s life cycle.

let’s move to next line:

from kivy.uix.gridlayout import GridLayout

You can find the above at: kivy/uix/gridlayout.py

It requires a column or row to display a widget. How do I do that?
Once again, we can visit the documentation for instructions.

Here it says that rows and cols represent the number of rows and columns, respectively, in the grid, which leads us to the reason why we did this in main.kv file:

<Container>:
  rows: 1

Following alright? Let’s keep going.

What is build Method and What Does it Do?

First let’s go through the kivy/app.py file once again and see what the documentation says:

Let’s do the same for the build method:

Now we know the reason for doing this:

class MainApp(App):
  def build(self):
    self.title = 'Awesome app!!!'
    return Container()

I hope things are clearing up a bit by now. We still have a problem though — where are the buttons and the label?
Well, let’s build them.

Structuring Your App

Let’s create a new folder and a buttons.kv file in the following structure:

Structure

- kv/
  - buttons.kv
- main.py
- main.kv

Buttons

We just created two buttons (i.e AddButton and SubtractButton) but we haven't dealt with their styles.
We can play with their style via Python but I prefer doing the styling with .kv and the logic with Python.

Let’s add something to our buttons.kv file.

<AddButton>:
  text: “+1”
<SubtractButton>:
  text: “-1”

Before we add something to the container class (GridLayout), we first need to tell kivy to read from the buttons.kv file in the kv folder.

This is where builder comes in.

from kivy.lang import Builder

A simple but inefficient way to work with big projects is to load each .kv file individually.

Builder.load_file('./kv/buttons.kv')

We can automate this:

from os import listdir
kv_path = './kv/'
for kv in listdir(kv_path):
  Builder.load_file(kv_path+kv)

Add as many .kv file in the kv folder and they will automatically be loaded by Builder. So here we are — we have defined the buttons and the container. However, there is still nothing on the screen. Let’s proceed to adding the buttons (finally)

Edit the main.kv file.

wait…we have one more problem…

What are on_release and id?

on_release and on_press are special methods that are part of the button behaviour (see kivy/uix/behaviors/button) whereas id is a property of every widget (see kivy/uix/widget.py).

Before we move ahead, spend some time on understanding “properties” in Kivy. Here are some resources to help clear things up:
Docs, stackoverflow, and kivy-wiki.

ObjectProperty

The following id will be used for ObjectProperty to communicate with Python side.

class Container(GridLayout):
  display = ObjectProperty()
  def add_one(self):
    value = int(self.display.text)
    self.display.text = str(value+1)
  def subtract_one(self):
    value = int(self.display.text)
    self.display.text = str(value-1)

Now we should have our final working app.

You can download the final working app from github.

main.py

main.kv

kv/buttons.kv

Conclusion

Thank you for reading this post — I hope you found this helpful. You can find me on GitHub, LinkedIn, CodeMentor and here. If you have any questions, feel free to reach out to me!

Want to read more?

Customizing your Navigation Drawer in Kivy & KivyMD

Texture management in Kivy using atlas

Plyer: Platform independent compatibility layer

Originally published at www.codementor.io.