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

Unlock This Lesson

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

Unlock This Lesson

Hint: You can adjust the default video playback speed in your account settings.
Hint: You can set your subtitle preferences in your account settings.
Sorry! Looks like there’s an issue with video playback 🙁 This might be due to a temporary outage or because of a configuration issue with your browser. Please see our video player troubleshooting guide to resolve the issue.

Lay Out the User Interface (UI)

For more information on laying out the user interface, check out the Kivy layout documentation.

00:00 Laying Out the UI. Each GUI framework that you use has its own method of arranging widgets. For example, in wxPython, you would use sizers, whereas in Tkinter, you use a layout or geometry manager. With Kivy, you use layouts.

00:20 There are several different types of layouts that you can use. The most common ones are BoxLayout, FloatLayout, and GridLayout.

00:34 Kivy’s documentation will give you a full list of available layouts. Here, you’ll try out BoxLayout with the code that’s seen on-screen.

00:53 First, you import BoxLayout from kivy.uix.boxlayout. Next, you create some colors, which are lists of RGB and alpha values. These are then added to another list, colors, which becomes a list of lists, allowing easy random selection of these preselected colors.

01:22 You create an instance of BoxLayout and loop over a range of 5, creating a button, btn, for each iteration. With the background color of the button set to a random color,

01:44 you then add the button to the layout. After the loop has ended and five buttons have been added to the BoxLayout, the layout is returned.

02:06 When you run this code, you’ll see something similar to what’s seen on-screen, although your colors will be a random choice. When you create a layout, there are few arguments you should know. padding: You can specify the padding in pixels between the layout and its children in one of three ways: A four-argument list [padding_left, padding_top, padding_right, padding_bottom], a two-argument list [padding_horizontal, padding_vertical], or a single argument of padding.

02:40 spacing allows you to add space between the child widgets, and orientation allows you to change the default orientation of the BoxLayout from horizontal to vertical.

02:51 Like most GUI tool kits, Kivy is mostly event-based. The framework responds to user keypresses, mouse events, and touch events. Kivy has a concept of a clock that you can use to schedule function calls for some time in the future.

03:09 Kivy also has the concept of Properties, which works with the EventDispatcher. Properties help you to do validation checking. They also let you fire events whenever a widget changes its size or position.

03:24 Let’s add a button event to the previous example. First, an .index attribute is added to the Button object. This will be used by the function that you’ll add later. Next, you call button.bind(), and this links the on_press event to the MainApp.on_press_button() method, which you’re going to code in a second.

03:44 The method implicitly takes the widget instance, which in this case is the button. Finally, the .on_press_button() method is created.

03:53 This prints out a message to the terminal indicating which button has been pressed by making use of the .index attribute that was added earlier on.

04:06 When you run the program, you’ll see something similar to what’s seen on-screen.

04:23 In the next part of the course, you’ll take a look at using the KV language to create your layouts.

Become a Member to join the conversation.