Lay Out the User Interface (UI)

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.