Most programming tutorials, regardless of which programming language you are going to study, begin with a Hello World program where you can see what a program in that particular language must contain to work at all. Let’s do the same here. What does a Hello World program in Kivy look like? Here’s our basic Kivy app.
But before we delve into the topic, here’s some info for you.
*****
Table of Contents
Book Info
I just published my Kivy book, GUI Programming with Python and Kivy. It’s pretty long (over 800 pages) and comprehensive. And, which also counts, easy to read. The book contains lots of illustrations.
This book covers all the basics that you need to know to start programming GUI applications with Python and Kivy. Throughout the book we are building a GUI application from scratch, a fully functional game using all kinds of tools that Kivy has to offer. It’s our Slugrace project, but covered in a much more in-depth manner.
Each part of the book starts with a theoretical introduction of a topic or idea that we then implement in the project. I assume you have no prior knowledge of the Kivy library, but you should have at least some basic knowledge of the Python programming language, including the object-oriented programming paradigm as this is what we will be using a lot in this book.
The book covers all the basic elements of Kivy that you have to know, like widgets, layouts, Kivy ids and properties, graphics, screens, animation, sound. Finally we’ll deploy the app to Windows. It is pretty comprehensive and after you finish it, I’m sure you’ll be able to create your own awesome GUI apps of any kind, not just games.
I hope you will have at least as much fun reading the book as I had writing it.
As far as this Kivy series is concerned, the following parts will contain the most important elements covered in the book. However, some elements will be presented in a simplified way here on my blog or omitted completely.
____________
If you are interested, you can purchase the book in four versions. Here are the links:
1) ebook – pdf version on my website – in full color
Here you can see the description of the book, sample graphics from the book and the full table of contents.
2) ebook – Kindle version on Amazon – in full color
3) paperback version on Amazon – in black and white
4) paperback version on Amazon – in full color
*****
And Now Let’s Move On…
Hello World – A Basic Kivy App
Well, we’re going to write a basic Kivy app that will display the Hello World text. In Kivy, like in many other GUI libraries and frameworks, static text is usually displayed in a label. In Kivy we call simple GUI elements like labels, buttons, sliders, check boxes, etc. widgets, although widgets don’t have to be simple at all and you can create your own widgets, which we are going to do later.
Create a folder
Anyway, our program is going to display the text Hello World in a label. Before we write the code, let’s create a folder where we will save it. Then open the folder in your editor or IDE. Here’s how to do it in Visual Studio Code:
In this tutorial I’m going to create a new folder for each part and name it accordingly, so the folder for this part is called slugrace 3 because this is part 3 of the tutorial. My text editor of choice is Visual Studio Code and if I explain how to do something in the future, it should be understood how to do it in Visual Studio Code. If you are using a different editor, you surely know it quite well and will have no problem doing the same stuff in it.
Create a new file
When you open your folder, you need a file to write the code to. This is going to be a regular Python file, so with the extension .py. You can name your file whatever you like, I’ll name mine main.py. Here’s how you can create the file: When you hover your mouse over the name of your folder, a menu with a couple icons will appear. The first icon is the one you should click to create a new file:
All you have to do is type in the name of the file:
As soon as you confirm by hitting Enter, the new file will be listed in the folder (A) and it will open automatically in a new tab (B). This is how we are going to add new files in the future.
Write the code of the Kivy app
Now we are ready to write our code. Here it is with comments:
# We're using Kivy, so we'll need the kivy module
import kivy
# We need the App class. Our application is going to inherit from it.
from kivy.app import App
# We also need the Label widget.
from kivy.uix.button import Label
# Here comes the application class. It inherits from App.
class HelloWorldApp(App):
def build(self):
return Label(text='Hello World!')
# And this is where we actually run the app.
if __name__ == '__main__':
HelloWorldApp().run()
You can find this file, as well as all the other Python and kv files later in this tutorial on Github. You will find the link near the top of the sidebar of the page on the right.
Running Your Kivy App
This is a basic Kivy application. Now we are ready to run it. There are several ways you can do it. Let’s have a look at the most obvious ones:
1) the Run Python File in Terminal button
The first way to run the app is by pressing the Run Python File in Terminal button in the upper right corner (A). Here’s what we get when we do that: the application window shows up with our application running in it (B) and the terminal opens at the bottom with the Kivy log (C).
2) Run the Kivy App Without Debugging in the Debug menu
You can also go to the Debug menu and select Run Without Debugging:
3) Start Debugging option in the Debug menu
There is also the Start Debugging option in the Debug menu. You can choose it and then select a Debug Configuration. Go ahead and select the first option, Python File:
4) Hotkeys
For the previous two options you can also use hotkeys:
– F5 to start debugging
– Ctrl + F5 to run without debugging
5) Context menu
You can also right-click anywhere in the editor tab where the code of your file is and select Run Python File in Terminal:
6) External terminal
If, for some reason, you can’t or don’t want to use the terminal from within Visual Studio Code, you can always use an external terminal, like the Command Prompt on Windows, the Anaconda Prompt or what have you. First you have to go to the directory where the executable file is. In my case, the main.py file is in the following location:
D:\Python\Blog\Kivy\1- slugrace\code\slugrace 3
Then, in order to run the file just type in: python main.py
Here’s what my Anaconda Prompt terminal looks like if I run the file:
So, that’s it for today. You know what a basic Kivy app looks like and how to run it. As mentioned in the previous part, an application consists of two layers: logic and presentation. Although there isn’t any logic in our basic app actually, there is some presentation: you can see a graphical element, the label.
As also mentioned in the previous part, you can either write the full app in Python code or split it into a Python file for logic and a Kivy language file for presentation. In a basic scenario like this, it’s overkill to create a Kivy language file to accompany the Python file, but still, I’m going to do that in the next part so that you can see how to make a basic Kivy file program using both Python and the Kivy language. We will definitely be using Kivy language files extensively when our GUI becomes more complex and, I promise, it won’t be long.