Beginner Challenge 1¶

Time 🕐

Estimated time of completion: 15min to 30min (depending on your experience)

Welcome to your first challenge!¶

In this challenge, you will learn how to create a Kivy app, and how to position widgets on the screen.

What do I need before starting?¶

You need to have Kivy installed on your computer. If you don't have it installed, follow the instructions on the installation page.

Hello World App¶

Create it¶

Create a new file called main.py and paste the following code:

main.py
from kivy.app import App
from kivy.lang import Builder

kv = Builder.load_string("""
Button:
    text: "Hello World"
"""
)


class MainApp(App):
    def build(self):
        return kv


MainApp().run()

Check it out¶

Run the app by typing python main.py in your terminal and press enter. You should see a window with a button that says "Hello World".

$ python main.py

Prepared to see the result? Here it is:

What did we do?¶

We created a Kivy app that displays a button with the text "Hello World". But how does it work? Let's break it down.

Recap, step by step¶

Step 1: import Kivy classes¶

main.py
from kivy.app import App
from kivy.lang import Builder

kv = Builder.load_string("""
Button:
    text: "Hello World"
"""
)


class MainApp(App):
    def build(self):
        return kv


MainApp().run()

We imported two classes from Kivy library: App (from app module) and Builder (from lang module). The App class is the base class for all Kivy apps. The Builder class is used to load the Kivy language code, which is used to create the user interface (buttons, labels, etc).

Step 2: load the Kivy language code¶

main.py
from kivy.app import App
from kivy.lang import Builder

kv = Builder.load_string("""
Button:
    text: "Hello World"
"""
)


class MainApp(App):
    def build(self):
        return kv


MainApp().run()

We created a variable called kv and assigned it the value of Builder.load_string(). The load_string method takes a string as an argument, which is the Kivy language code. In this case, we are creating a button with the text "Hello World". Don't worry if you don't understand the Kivy language code yet. We will learn more about it in the next challenge.

Step 3: declare the MainApp class¶

main.py
from kivy.app import App
from kivy.lang import Builder

kv = Builder.load_string("""
Button:
    text: "Hello World"
"""
)


class MainApp(App):
    def build(self):
        return kv


MainApp().run()

We created a class called MainApp that inherits from the App class. The App class is the base class for all Kivy apps. We will learn more about classes in the next challenge. For now, just know that we need to create a class that inherits from the App class. And we need to define a method called build() that returns the Kivy language code.

Step 4: run the app¶

main.py
from kivy.app import App
from kivy.lang import Builder

kv = Builder.load_string("""
Button:
    text: "Hello World"
"""
)


class MainApp(App):
    def build(self):
        return kv


MainApp().run()

We ran the app by calling the run() method of the MainApp class. This method starts the Kivy event loop, which is responsible for updating the app continuously. And it displays the window with the button.

We challenge you!¶

Now that you know how to create a Kivy app, it's time to challenge yourself. In this very easy challenge, you will create a Kivy app that displays a button with the text "Learning Kivy: Your Name Here". Remember to replace "Your Name Here" with your name.

If you still haven't followed the previous instructions, please create a file called main.py and paste the code from the challenge above.
Change the text of the button to "Learning Kivy: Your Name Here".
Run the app by typing python main.py in your terminal.
Take a screenshot of the app and post it in the Discord server

What's next?¶

In the next challenge, we will learn how to position widgets on the screen. We will also learn how to use the Kivy language code to create more widgets.