Locked learning resources

Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Locked learning resources

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Work With Kivy Widgets

00:00 Working with Kivy Widgets. A widget is an on-screen control that the user will interact with. All graphical user interface tool kits come with a set of widgets.

00:12 Some common widgets that you may have used include buttons, combo boxes, and tabs. Kivy has many widgets built into its framework, and in this part of the course, you’ll look at using a couple of them, starting out with Label.

00:28 To see how Kivy works, let’s take a look at the code of a Hello, World application.

00:43 Every Kivy application needs to subclass the App class and override build. This is where you’ll put your UI code or make calls to other functions that you define. In this case, you create a Label widget and pass in its text.

01:05 To make the application run, you instantiate your MainApp class and then call run(). Save the file, open a terminal, and run the script, as seen on-screen.

01:19 You should see the Kivy application. You’ll also notice that Kivy outputs a lot of text to the terminal, and this is useful for debugging your application.

01:37 The Label class has many properties that can be specified, but as a quick demonstration, let’s just change the font size from the default to much larger.

01:54 When running the app now, you’ll see the increased text size in the window. Next, you’ll try adding an image widget and see how that differs from a label.

02:16 Kivy has a couple of different image-related widgets to choose from. You can use Image to load local images from your hard drive or AsyncImage to load an image from a URL. For this example, you’ll stick with the standard Image class.

02:40 The Image class takes a lot of different parameters, but the one that you want to use is source. This tells Kivy which image to load.

02:48 Here, you pass a relative path to the image. The rest of the code is the same as in the previous example. When you run this code, you should see something similar to what’s seen on-screen.

03:12 The text from the previous example has been replaced with an image. Now that you have the basics down, in the next section of the course, you’ll learn how to add and arrange multiple widgets in your application.

Become a Member to join the conversation.